你如何在 Rails 3 中组织 javascript 文件？答案

【问题标题】：How do you organize javascript files in Rails 3?你如何在 Rails 3 中组织 javascript 文件？
【发布时间】：2011-10-05 17:15:13
【问题描述】：

我正在 Rails 3 中编写一个 Web 应用程序，并且我使用 JQuery 作为我的 Javascript 框架。我在应用程序中还没有大量的 javascript，但我开始在页面之间添加转换，我想知道是否有一种使用 [function].js.erb 文件来组织转换的好方法。例如，我有一个带有新和编辑功能的邀请控制器。有没有办法在文档准备好时使用 views/invitations/new.js.erb 和 views/invitations/edit.js.erb 来运行函数？现在我只是使用这些来处理 AJAX 调用后的页面操作。

谢谢！

【问题讨论】：

标签： javascript jquery ruby-on-rails ruby-on-rails-3 unobtrusive-javascript

【解决方案1】：

我同意 apneadiving.. 就个人而言，js.erb 调用增加了很多认知开销。我所做的是将我的 javvavscripts 加载到部分布局中

*app/views/layouts/_javascripts.html.haml

= javascript_include_tag "https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"
= javascript_include_tag 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js'
= javascript_include_tag "http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js" 
= include_javascripts :app
= hoptoad_javascript_notifier
= yield :javascripts

然后我使用Jammit gem 中的jammit 命令来缩小，并压缩我的 js 和 css 资产

config/assets.yml

javascripts:
  app:
    - public/javascripts/rail.js
    - public/javascripts/underscore-min.js
    - public/javascripts/jquery.dump.js
    - public/javascrippts/etc*.js

每个页面需要自定义页面级js，我在页面底部扔了一个content_for :javascripts块：

app/views/something/awesome.html.haml

%h1 cool page
Other cool stuff

- content_for :javascripts do
  :javascript
    $(document).ready(function(){
      console.log('This document is REaDY!! and, this page rocks');
      $.ajax({
         url: "#{new_item_path(@item)}",   //ruby is evaluated due to string interpolation
         success: function(data) {
           console.log('Loaded ' + data + ' from ' + #{new_item_path(@item)})
         } 
      });
    };

这让我可以在application.html.haml 布局的底部找到一个render 'layouts/javascripts'，并且我的所有javascript geets 都通过管道传输到页面底部，因此加快页面加载速度为suggested here by Yahoo 这也让我可以使用如果需要，erb 从 Rails 为页面级 js 生成变量

【讨论】：

谢谢诺丽。当我将它推向生产时，我将不得不检查 Jammit。在您的示例awesome.html.haml 中，您正在将一个javascript 调用放入您的html 中。这是一个好习惯吗？我认为“rails 方式”是将所有 javascript 放入一个单独的文件中以保持干净。但是，如果您可以通过 content_for 标签将变量从 ruby 传递到 javascript，我就被卖掉了。事实上，将变量从 ruby 传递到 javascript 将消除我需要单独文件的许多情况。你能举一个将变量从 ruby 传递给 js 的例子吗？谢谢！
嗯，我是这样想的。“铁轨方式”通常是说教的。唯一的“最佳实践”是思考。对于我的应用程序，代码旁边的 js 的存在在几个方面对我有帮助：1）如果它的 JS 根据我的数据而变化，我可以使用 ruby 变量来渲染它，正如你所说的，所以它是一个明确的优势为了那个原因。 2) 我经常发现自己想知道哪些 DOM 元素连接到 js 处理程序。如果相关的 js 代码就在我面前，它不会给我们的团队造成混乱（我编写代码，其他人来修改它，这都是明确的）。我正在改变我的
3) 对于可缓存的静态 JS，最好把它放在一个单独的页面中，缩小，缓存，压缩它。对于可能因页面而异的事情（例如，如果您想使用 ajax 提交到命名路由），这是使用 rails 命名路由而不是说 $.ajax('/search',.. . ) 结果，它确实略微增加了您的页面大小，但它也降低了该页面加载的 HTTP 请求数。因此，如果它是动态的、简短的 js sn-ps，它是一个很好的折衷方案

【解决方案2】：

js.erb 文件仅用于您之前的用途：ajax 或 js 调用。

我不推荐它：这应该仍然是客户端恕我直言。另外，它将在 3.1 中从 Rails 中移开（仍然作为 gem 保存）。

您应该简单地将您的 js 放入您在视图中加载的文件中：基本且整洁。

【讨论】：