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

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

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

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

共收到 7 条回复

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

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

在js中先判断

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

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

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

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

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

http://viget.com/inspire/extending-paul-irishs-comprehensive-dom-ready-execution http://techblog.treenodes.com/index.php/2012/04/19/organize-javascript-and-jquery-events-dom-ready-execution/

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

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

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

body.getAttribute( "data-controller" )

参考 http://html5doctor.com/html5-custom-data-attributes/

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

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

另外给楼主一个另外提示,如何在相应页面也可以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 %>
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册