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

Question

我正在 Rails 5.0.2 中构建一个 Web 应用程序。我的项目有以下 JS 文件：

此外，我自己的每个 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有一个文件company.js，它将在第一页（例如/home）上执行。当我转到 /company 时，company.js 中编写的行将不会再次执行。因此，我必须使用 Turbolinks:load 事件侦听器，并将每个 UI 初始化和 UI 附加事件封装在一个方法中，以便在 Turbolinks:load 以及正常调用时调用。 （如代码片段所示）

那么，我想知道 Rails 开发人员对于 js 资产遵循什么实践，特别是使用 Rails 5 的人？如果您的回答解决了我上面提到的问题，那将会有很大的帮助。

Answer 1

回答您的问题：

1. 这要看情况。我建议首先尝试默认值 - 它只要求您遵守选择器和类名的规定。但是，如果您发现自己在每个页面上包含大量仅在一个后端页面上使用的 js，请参阅下面的其他可能性。
2. 是的，只需使用特定于您所定位的资源的类名，例如 .remarks_form，并且如果在页面上找不到该类名，每个函数中的 js 可以尽早退出（这样您就知道该页面不相关） 。
3. 您应该将 js 编写为仅在页面加载后触发，这样每次加载页面时都会触发一次 - 不需要两次 init() 调用，只需在加载文档时触发，或者在 Turbolinks 上的 Turbolinks 情况下触发：加载。即使不使用 Turbolinks 或 Rails，这实际上也是一个很好的做法，因为您希望在 js 开始触发之前加载并初始化页面。

您应该能够将其与 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 拆分为资产组，并仅在某些页面上导入某些组 - 请参阅此答案了解详细信息。