Rails - как включить файлы Javascript только на определенные страницы

Question

У меня есть редактор WYSIWYG, который я встроил в сайт и настроил. Существует много файлов Javascript, которые нужно загружать только на страницах с помощью редактора WYSIWYG; в настоящее время они загружаются на каждую страницу (и даже ломают другой Javascript на определенных страницах).

В настоящее время файлы Javascript находятся в assets/javascript/wysiwyg/ и не включены в качестве необходимых файлов в application.js, но по-прежнему включены на каждую страницу из-за конвейера активов (я думаю).

Я хочу знать, могу ли я исключить эти файлы с других страниц. Можно ли переместить их из конвейера активов в каталог public/ и импортировать их (в файлах сценариев кофе, возможно?) В соответствующие представления?

Answer 1

Вы можете поместить любые файлы Javascript, которые вы хотите загрузить вручную, в каталог public/javascripts/lib вашего приложения, и они не будут включены в конвейер активов. Затем вы можете загрузить их вручную на нужные им страницы.

Например, в одном проекте, я использую Chosen JQuery плагин, и я загрузить его следующим образом:

<script type="text/javascript" src="/javascripts/lib/chosen.jquery.min.js"></script> 

Rails будет источником публичных файлов из public/, так что вам нужно только, чтобы ссылаться на файлы из там (удалите бит public/).

Этот проект довольно большой, с 88 контроллерами, 662 действиями и в общей сложности 38 пользовательских javascript-библиотек, которые используются спорадически вокруг приложения, включая редакторы разметки, графические библиотеки и даже пользовательский интерфейс jQuery.

Чтобы управлять разрастанием и держать каждую страницу максимально плотной, я сделал 2 вещи: 1) в моем контроллере я установил переменную экземпляра, @page_libs, чтобы перечислить загружаемые библиотеки и 2) макет использует значения в @page_libs, чтобы включить специальную Javascript при необходимости.

действию контроллера может выглядеть следующим образом:

def edit 
    @products = products.find(params[:id]) 
    @page_libs = ['ui', 'textile'] 
end 

И app/views/layouts/application.html.erb включает это в правильном месте:

<%- if (@page_libs || []).include?('ui') || (@page_libs || []).include?('table') %> 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> 
    <script type="text/javascript" src="/javascripts/lib/chosen.jquery.min.js"></script> 
<% end -%> 
<%- if (@page_libs || []).include?('swiper') %> 
    <script type="text/javascript" src="/javascripts/lib/idangerous.swiper.min.js"></script> 
<% end -%> 
<%- if (@page_libs || []).include?('table') %> 
    <script type="text/javascript" src="/javascripts/lib/jquery.handsontable.full.js"></script> 
<% end -%> 
<%- if (@page_libs || []).include?('textile') %> 
    <script type="text/javascript" src="/javascripts/lib/textile.js" charset="utf-8"></script> 
<% end -%> 

Обратите внимание, что первый включает для JQuery UI, который я загрузить из CDN, а не из моего приложения public. Этот метод работает так же, как и с внешними библиотеками, а также с теми, которые вы принимаете. Фактически, большинство страниц в моем приложении зависят только от 2 внешних библиотек (jQuery и Underscore.js), но имеют возможность загружать до 16 других библиотек Javascript из внешних источников. Ограничение внешних библиотек на странице может значительно сократить время загрузки страницы, что является прямым повышением производительности для вашего приложения.

Иногда библиотека Javascript будет включать в себя компоненты CSS. Или вы можете даже включить CSS для CSS. Такой же подход можно использовать с внешней таблицей стилей. Это соответствующая страница конкретных стилей «включает в себя» для вышеупомянутых библиотек JavaScript:

<%- if (@page_libs || []).include?('ui') %> 
    <link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css"> 
    <link rel="stylesheet" type="text/css" href="/stylesheets/lib/chosen.min.css"> 
<% end -%> 
<%- if (@page_libs || []).include?('swiper') %> 
    <link rel="stylesheet" type="text/css" href="/stylesheets/lib/idangerous.swiper.css"> 
<% end -%> 

Таким образом, у меня есть один пункт в проекте для управления библиотеками, независимо от того, сколько (или несколько), обязательны для заполнения для страницы.Я, вероятно, в конце концов создам серию настраиваемых обработчиков before_action в ApplicationController, чтобы определить, какие библиотеки нужно использовать для страницы. Что-то вроде этого:

before_action: :include_library_ui,  only: [:new, :edit] 
before_action: :include_library_swiper, only: [:show] 

Это еще раз очистит действия контроллера и облегчит идентификацию зависимостей. Однако, учитывая размер моей кодовой базы и оставшихся неотложных задач, я еще не сделал этого скачка. Возможно, это вдохновит вас на это, чтобы начать.