在Rails中实现每页JavaScript的好方法是什么?

问题描述:

在Ruby中尝试新事物 - 在每个页面上我正在用jQuery做非常丰富的东西。很明显,如果我把所有的jquery放到application.js中,它将会非常快速地增长。在Rails中实现每页JavaScript的好方法是什么?

它是在最后一个好方法懒加载特定页面的js文件?例如:

<script> 

$(document).ready(function() { 

    $.getScript("/javascripts/this_pages_scripts.js"); 

}); 
</script> 

有没有一种轨道方式做到这一点?我知道new.js.erb等文件和ujs,但我仍在谈论更多特定于页面的js - 你知道,拖放初始化程序,对话创建者等。

非常感谢。

+1

当你说“非常快”时,你可能会夸大其词。 20-30KB的JavaScript是很多,但它不是“大”,因为它可以被发送到约3KB的浏览器,并且如果你的服务器配置正确,它将在请求之间被缓存。只有像jQuery-UI或Google Maps这样的大型图书馆应该关注你,而不是在没有使用它们的页面上加载这些图书馆可以提供帮助。 – tadman 2011-04-08 15:20:41

有,我用两种方式:

对于细小的,琐碎的脚本,只是平添几分养眼的,我经常有他们的内联模板,他们修改(就像你已经证明) ,因为我更容易跟踪这种方式。

对于任何一个以上的两个小行我保持低调,但加载它使用content_for

我的应用程序布局看起来像这样(在HAML):

= javascript_include_tag 'jquery.144.min','rails','jquery.tools','application' 
= yield :scripts 

的重要组成部分,是yield :scripts。然后,在一个网页,我需要一些javascript我做的:

- content_for :scripts do 
    = javascript_include_tag 'photo_form' 

这将加载在标题中的JavaScript,但只有当给定的模板中。 content_for使用相应的名称将内容发送到yield方法。

你可以坚持一个这样的产量块 - 我还有一个就在结束标签之前。 Yield/content_for真的很方便。

注意,正如tadman在评论中指出的那样,任何不必在头部加载的东西都应该在页面的最后加载。

最后一件事是知道的,如果你有更复杂的东西,你也可以用你的模板和应用程序视图之间的实例变量。例如,我在应用程序布局中有一个菜单栏。所以,有时候我只想在某些页面上触发一个特定于上下文的按钮或附加的按钮行。

在我的应用程序布局我叫偏这使得菜单,菜单的代码如下所示:

#menubar (normal menu stuff) 
    - if @special_menu 
    #special_menu 

这样,那么在任何模板,你可以这样做:

- @special_menu = true 

...并为该页面显示给定的菜单。你也可以在控制器动作中做到这一点,我有一个控制器,我添加了一个之前的过滤器,将其中一个菜单标志设置为true。对于任何可能需要有条件地包含的JavaScript复杂集合,您都可以做同样的事情。

大多数的这些想法我观看这部railscast有:http://railscasts.com/episodes/30-pretty-page-title

你应该看一看!

+0

只要有可能,JavaScript文件应该在文档中加载得非常晚,以避免它们阻止页面呈现。例如,分析应该是'

'标签关闭之前的最后一件事情。 jQuery需要尽早加载,其他任何使用'$(document).ready(...)'的原因都很明显。 – tadman 2011-04-08 15:18:37
+0

好的提示Tadman,谢谢! – Andrew 2011-04-08 15:31:50

设置一个符号来表示的文件名在你的头,并调用它的控制器

@script = "prototype" 

然后在视图:

<%= javascript_include_tag @script %> 

或者加载多个

@scripts = ["prototype", "dropdown"] 

然后

<% @scripts.each do |s| %> 
    <%= javascript_include_tag s %> 
<% end &> 
+0

然后在每个控制器中使它变得不同 – 2011-04-08 14:27:33

+0

这并不真正回答有关Rails约定用于跨文件构造JavaScript的大部分问题。顺便说一句,您可以使用splat运算符将数组展开为la'js =%w {foo bar}; javascript_include_tag * js'。 – coreyward 2011-04-08 14:31:20

我个人使用requireJS和一个自定义特征检测库来处理这个问题。

然后我有一行将requirejs脚本及其data-main属性包含在我的布局/主/共享视图页面中。 (我对rails并不熟悉,但对于任何其他MVC都是如此)。

我已经写了一个很好的回答关于这个地方。您可能能够找到它。