管理Rails 5的javascript / coffeescript代码的有效方法?

时间:2017-08-07 17:45:32

标签: javascript jquery ruby-on-rails ruby-on-rails-5 asset-pipeline

我正在使用Rails 5.0.2构建Web应用程序。我有以下项目的JS文件:

enter image description here

此外,我对每个自己的JS文件都有类似的模式,如下所示:

$(function () {
    var init = function () {
        // my code, I want to run on specific page load i.e. /remarks
        $('form#cf_remarks_form').validate(validate_options);
    };
    init();
    document.addEventListener("turbolinks:load", function () {
        init();
    });
});

我对使用JS资产有以下保留/问题:

  1. 默认情况下,Rails附加(并因此运行)所有页面上的所有js文件以进行相同的布局。通过使用自定义模式在默认情况下仅在特定资源/页面上添加相关js是好的吗?

  2. 如果所有js组合并链接到每个页面,我需要非常具体/谨慎使用jQuery选择器作为选择$('div.custom input.no-search')对于一个页面可能会让我疯狂如果我在另一个我不想运行方法的页面中有很多代码和限定标记,则提到的选择器正在选择。

  3. Rails 5使用ajax加载普通页面。如果页面/公司有一个文件company.js,它将在第一页/ / home上执行。当我去/ company时,用company.js写的行不会再执行。所以,我必须使用turbolinks:加载事件监听器并封装在turbolinks中调用的方法中的每个UI初始化和UI附加事件:加载以及正常调用。 (如代码段所示)

  4. 所以,我想知道rails开发人员对js资产特别是谁使用Rails 5的做法?如果您的答案解决了上述问题,那将会很有帮助。

1 个答案:

答案 0 :(得分:1)

回答你的问题:

  1. 这取决于。我建议先尝试默认 - 它只需要你对选择器和类名遵守纪律。但是,如果您发现自己在每个仅在一个后端页面上使用的页面上包含大量js,请参阅下面的其他可能性。
  2. 是的只是使用特定于您所定位资源的类名,例如.remarks_form,如果在页面上找不到该类名,则每个函数中的js可以提前纾困(因此您知道页面不是&#39相关的)。
  3. 你应该只在页面加载后编写你的js,这样每次页面加载都会触发一次 - 不需要两次init()调用,只需要在文档加载时触发,或者在turbolinks情况下触发turbolinks:负载。即使不使用turbolinks或rails,这实际上也是很好的做法,因为您希望在js开始触发之前加载和初始化页面。
  4. 你应该可以使用rails 5:

    document.addEventListener("turbolinks:load", function() {
        console.log('Loads each time');
    });
    

    参见文档:

    http://guides.rubyonrails.org/working_with_javascript_in_rails.html#turbolinks

    这里有一个权衡。您可以在内联或许多单独的文件中包含特定于页面的js,但是浏览器必须再次请求它,并且可能不会在缓存中使用它。 Rails选择保持简单,并假设为每个页面缓存一个文件比整个站点上的50个不同的js文件更好。 YMMV但这似乎运作良好,所以我首先尝试Rails方式。

    如果您觉得不方便,可以通过各种方式解决Rails设置问题。我建议将大多数js保存在一个组中,但您也可以(按复杂程度排列):

    1. 将大多数js保留在主文件中,但将一些js内联放在只与该页面相关的页面上
    2. 在页面标题中导入特定于页面的静态js文件(例如,仅在后端屏幕上显示文本编辑器组件的js)。
    3. 将您的js拆分为资产组并仅在某些页面上导入某些组 - 请参阅details的答案。