Rails 中每个视图的 JavaScript 文件

IT技术 javascript ruby-on-rails ruby
2021-01-28 22:13:00

根据'unobtrusive JavaScript' 建议,我想将我的 JavaScript 逻辑
分离单独的文件中。但是我不知道如何组织它们。

我是不是该:

  1. 只需将所有应用程序 javascript 放入 Application.js 文件并使用布局页面加载它?这是一个简单的方法,但我最终会得到一个臃肿的 Application.js。一些用户可能只想访问几个页面,但会预加载整个文件,这并不好。
  2. 或者我应该为每个视图创建一个单独的 javaScript 文件并独立加载它们?这会产生一系列问题。如何将每个js文件链接到相应的视图?
    谢谢。
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 加载。

那么,这里选择的答案是否符合这个 Rails 3 资产管道模型?
2021-03-23 22:13:00
这对开发来说很好,但在生产中你需要尽可能少的 HTTP 请求。在一个被缓存的请求中预先加载所有 js 可能会导致更好的性能。
2021-03-24 22:13:00
@MattSlay 看到这个:railsapps.github.com/...通读特定页面的部分,然后往下走一点点来阅读更多关于如何让你的 js 只在正确的页面上执行的信息。
2021-03-27 22:13:00
rails3 修复了用于生产的资产管道的问题。
2021-04-06 22:13:00

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

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

这随着 Rails 3.1 和资产管道发生变化!!!

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

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

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

利用:

步骤1:

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

javascript:

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

也许你想使用 application_helper

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

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