Rails-如何仅在某些页面上包含Javascript文件 [英] Rails - how to include Javascript files only on certain pages

问题描述

我有一个内置于网站并自定义的所见即所得(WYSIWYG)编辑器.许多Javascript文件只需要使用WYSIWYG编辑器加载到页面上即可；目前，它们会加载到每个页面上(甚至会破坏某些页面上的其他Javascript).

I have a WYSIWYG editor that I have built into the site and customised. There are a lot of Javascript files that only need to be loaded on the pages with the WYSIWYG editor; currently they are loaded on every page (and even break other Javascript on certain pages).

当前Javascript文件位于assets/javascript/wysiwyg/中，并且没有作为application.js中的要求文件包含，但由于资产管道(我认为)，因此仍包含在每个页面中.

Currently the Javascript files are in assets/javascript/wysiwyg/ and aren't included as the require files in application.js but are still included on every page because of the assets pipeline (I think).

我想知道是否可以从其他页面排除这些文件.是否可以将它们从资产管道移动到public/目录，并将它们(可能在咖啡脚本文件中)导入到适当的视图中?

I want to know if I can exclude these files from the other pages. Is it possible to move them from the assets pipeline to the public/ directory and import them (in the coffee script files, maybe?) into the appropriate views?

推荐答案

您可以将要手动加载的任何Javascript文件放在应用程序的public/javascripts/lib目录中，并且它们不会包含在资产管道中.然后，您可以在需要它们的页面上手动加载它们.

You can put any Javascript files that you want to load manually in the public/javascripts/lib directory of your application, and they will not be included in the assets pipeline. You can then load them manually on the pages that need them.

例如，在一个项目中，我使用 Chosen jQuery插件，并且像加载它一样所以:

For instance, in one project, I use the Chosen jQuery plugin, and I load it like so:

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

Rails将从public/获取公共文件，因此您只需要从那里引用文件(删除public/位).

Rails will source the public files from public/, so you only need to reference your files from there (remove the public/ bit).

这个项目相当大，有88个控制器，662个动作以及总共38个自定义javascript库，这些库在应用程序中偶尔使用，包括markdown编辑器，图表库，甚至是jQuery UI.

This project is fairly large, with 88 controllers, 662 actions, and a total of 38 custom javascript libraries that get used sporadically around the app, including markdown editors, charting libraries, and even jQuery UI.

要管理扩展并保持每个页面尽可能紧密，我做了两件事:1)在控制器中，我设置了一个实例变量@page_libs，以列出要加载的库，以及2)布局在需要时使用@page_libs中的值来包含特殊Javascript.

To manage the sprawl and to keep each page as tight as possible, I have done 2 things: 1) in my controller, I set an instance variable,@page_libs, to list the libs to load, and 2) the layout uses the values in @page_libs to include the specialty Javascript when required.

控制器动作可能如下所示:

A controller action might look like this:

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

app/views/layouts/application.html.erb将此包含在正确的位置:

And the app/views/layouts/application.html.erb includes this in the correct place:

<%- 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 和

Note that the first include is for jQuery UI, which I load from a CDN, rather than from my app's public. This technique works just as well with external libraries, as well as those that you host. In fact, most pages in my app only depend on 2 external libraries (jQuery and Underscore.js), but have the option of loading up to 16 other Javascript libraries from external sources. Limiting external libraries on the page can significantly reduce your page load times, which is a direct performance boost for your application.

有时，一个Javascript库也将包括CSS组件.或者，您甚至可能要包含特定于页面的CSS.外部样式表可以采用相同的方法.这些是上述Javascript库对应的特定于页面的样式表包含":

Sometimes, a Javascript library will include CSS components, as well. Or, you may even have page-specific CSS to include. The same approach can be taken with external stylesheet. These are the corresponding page-specific stylesheet "includes" for the above Javascript libraries:

<%- 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 -%>

这样，无论页面需要多少个(或几个)，我在项目中都有一个要点来管理库.我可能最终会在ApplicationController中创建一系列自定义before_action处理程序，以定义页面需要包含的库.像这样:

This way, I have a single point in the project to manage the libraries, regardless of how many (or few) are required for a page. I'll probably eventually create a series of custom before_action handlers in the ApplicationController to define which the libraries a page needs included. Something like this:

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

这将清理更多的控制器动作，并使识别依赖项更加容易.但是，考虑到我的代码库的大小和紧迫的任务，我还没有实现这一飞跃.也许会激发您这样做的灵感.

This would clean up the controller actions a bit more and make it easier to identify dependencies. However, given the size of my codebase and the pressing tasks remaining, I haven't taken this leap yet. Maybe it will inspire you to do so to start out.

这篇关于Rails-如何仅在某些页面上包含Javascript文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！