Rails 中每个视图的 JavaScript 文件答案

【问题标题】：JavaScript file per view in RailsRails 中每个视图的 JavaScript 文件
【发布时间】：2010-10-10 18:29:18
【问题描述】：

根据“不显眼的 JavaScript”建议，我想将我的 JavaScript 逻辑分成
单独的文件。但是我不知道如何组织它们。

我应该：

只是将所有应用程序 javascript 放入 Application.js 文件中并与布局页面一起加载？这是一种简单的方法，但我最终会得到一个臃肿的 Application.js。一些用户可能只想访问几个页面，但是会预先加载整个文件，这并不好。
或者我应该为每个视图创建一个单独的 JavaScript 文件并独立加载它们？这会产生一组问题。如何将每个js文件链接到对应的视图？
谢谢。

【问题讨论】：

【解决方案1】：

我建议将它们全部放入一个文件中，然后您可以对其进行压缩和 gzip。客户端只需下载一次，因为它将被缓存在所有后续请求中。

您可能感兴趣的另一件事是 sprockets，这是一个 javascript 依赖项管理器，您可以使用 gem 安装它。您可以从网站 (http://getsprockets.org/) 或 github 页面 (https://github.com/rails/sprockets) 获取有关 sprocket 的更多信息。它使编写大型 javascript 应用程序更易于管理。

【讨论】：

【解决方案2】：

也许你想使用 application_helper

def javascript(*files)
  content_for(:head) { javascript_include_tag(*files) }
end

def stylesheet(*files)
  content_for(:head) { stylesheet_link_tag(*files) }
end

【讨论】：

【解决方案3】：

随着 Rails 3.1 和资产管道的改变！！！

如您所指，最好使用单独的文件。关于如何引用它们并链接它们的问题在 rails 3.1 中消失了，它旨在将它们全部编译成单个文件以用于生产。

【讨论】：

【解决方案4】：

可以使用 Jammit 来包含 css 和 javascripts 文件

详情：http://documentcloud.github.com/jammit/

用途：

第一步：

在 assets.yml 中添加 js 文件（见下面的代码）

javascripts：

footer:

- app/javascripts/lib/*.js
- app/javascripts/jquery-plugins/*.js
- app/javascripts/custom/*.js
- app/javascripts/application.js

标题：

- app/javascripts/core/*.js
- app/javascripts/head/*.js

第 2 步：

在应用布局中添加简单代码：

<%= include_javascripts :header %>
<%= include_javascripts :footer %>

【讨论】：

【解决方案5】：

每次都在 application.js 中加载主 JavaScript。现在为不同的需求创建文件。创建一个 form.js 文件、一个 myfancypart.js 文件等。不要在 application.html.erb 布局中加载它们。在需要时动态加载它们：

application.html.erb：

<%= javascript_include_tag "application" %>
<%= yield :javascript_includes %>

view.html.erb 的顶部：

<% content_for :javascript_includes do %>
  <%= javascript_include_tag "forms.js" %>
<% end %>

content_for 块中的所有内容都将在 yield :javascript_includes 处加载。

【讨论】：

这对开发来说很好，但在生产中你希望尽可能少的 HTTP 请求。在一个缓存的请求中预先加载所有 js 可能会带来更好的性能。
rails3 修复了生产资产管道的问题。
那么，这里选择的答案是否符合这个 Rails 3 资产管道模型？
@MattSlay 看到这个：railsapps.github.com/… 阅读页面特定部分，然后再往下阅读更多关于如何让你的 js 只在正确的页面上执行的信息。