新手问题 Rails 合并 JS 成一个文件, 如何组织和编写 JS 代码来适用不同页面？

tangmonk · 2015年01月22日 · 最后由 qige023 回复于 2015年01月30日 · 2605 次阅读

以前写网页都是一个页面功能载入对应的 js，很散乱，而且增加了 HTTP 的请求次数

合并成一个当然很好，但是如何做到 one js file for multiple page 呢。

1 个赞

共收到 7 条回复

heylonj #1 · 2015年01月22日 1 个赞

这种情况我个人是这样解决的，供参考：在 layout 中

<body data-controller="<%= controller.controller_name %>" data-action="<%= controller.action_name %>">

在 js 中先判断

if ($('body').data('controller') == "yourController" && $('body').data('action') == "yourAction"){
  //to do 
}

tangmonk #2 · 2015年01月22日

#1 楼 @heylonj 谢谢，看了下 ruby china 的代码，懂了。

我再去看下 bitbucket 的 backbone 的代码组织，谢谢

Rei #3 · 2015年01月22日 1 个赞

代码主体打包到一起。
通用的功能抽取成 ujs，例如 data-behaviours='pickdate'，绑定到 $(document).on 'click', '[data-behaviour~=pickdate]', -> pickdate。
页面特殊的功能写到页面 body，例如 <script>FileManager.init();</script>

Peter #4 · 2015年01月22日

#1 楼 @heylonj 谢谢，搜索了一下，发现很多好文章：

另外问一下，下面这种方式

$('body').data('controller')

是不是不如下面的稳妥呢？

body.getAttribute( "data-controller" )

heylonj #5 · 2015年01月22日

#4 楼 @Peter 文章很好。 data 方法是jQuery提供的啊，长期使用还没遇过坑。

xlaok #6 · 2015年01月22日

做好按需加载，全在一起没什么问题

qige023 #7 · 2015年01月30日 2 个赞

另外给楼主一个另外提示，如何在相应页面也可以 include 该只有该页面自己所需的 js

如果是 Backbone 的话，建议使用 backbone marionette 的 Module 来组织代码

比如我的 upload.erb 需要用到 jcrop 和 backbone 的 User.Show Module 那可以在页面的末尾加入下面的代码

<% content_for :page_javascript do %>
    <%= javascript_include_tag "jquery.jcrop" %>
    <%= javascript_include_tag "users.show" %>
<% end %>

在 layout 中加入

<%= yield :page_javascript %>

需要登录后方可回复, 如果你还没有账号请点击这里注册。