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

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 资产，我关注 reservations/question：

Rails 默认情况下附加（因此它们运行）相同布局的所有页面上的所有 js 文件。使用自定义模式或使用默认模式仅在特定 resources/pages 上添加相关 js 好吗？
如果所有 js 组合并链接到每个页面，我需要非常 specific/cautious 同时使用 jQuery 选择器作为选择 $('div.custom input.no-search') 一个页面可能运行如果我在另一个页面中有很多代码和限定标记，我不想运行一个方法，提到的选择器正在选择。
Rails 5 使用 ajax 加载普通页面。如果页面 /company 有一个文件 company.js，它将在第一页执行，比如 /home。当我转到 /company 时，写在 company.js 中的行将不会再次执行。因此，我必须使用 turbolinks:load 事件侦听器并将每个 UI 初始化和 UI 附加事件封装在一个方法中，以便在 turbolinks:load 以及正常调用时调用。（如代码片段所示）

所以，我想知道 rails 开发人员在使用 Rails 5 的 js 资源方面遵循什么做法？如果你的回答解决了我上面给出的问题，那将是很大的帮助。

Answer 1

回答您的问题：

视情况而定。我建议首先尝试默认值——它只需要您对选择器和类名有纪律。但是，如果您发现自己在每个页面上都包含大量仅在一个后端页面上使用的 js，请参阅下面的其他可能性。
是的，只需使用特定于您的目标资源的类名，例如 .remarks_form，如果在页面上找不到该类名，则每个函数中的 js 可以提前退出（因此您知道该页面不相关）。
您应该编写仅在页面加载后触发的 js，这样它会在每次页面加载时触发一次 - 不需要两次 init() 调用，只要在加载文档时或在 turbolinks 中始终触发turbolinks:load 上的案例。这实际上是一个很好的做法，即使不使用 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

这里有一个权衡。您可以内联或在许多单独的文件中包含 page-specific js，但是浏览器必须对其发出另一个请求，并且可能不会将其放入缓存中。 Rails 选择让事情保持简单，并假设为每个页面缓存一个文件优于整个站点的 50 个不同的 js 文件。 YMMV 但这似乎工作得很好，所以我会先尝试 Rails 方式。

您可以通过多种方式解决 Rails 设置，但如果您觉得这样做不方便。我建议将大部分 js 放在一个组中，但您也可以（按复杂程度排序）：

将大部分 js 保留在主文件中，但将一些 js 内嵌在仅与该页面相关的页面上
在页面的 header 中导入 page-specific 静态 js 文件（例如仅在后端屏幕上用于文本编辑器组件的 js）。
将您的 js 分成资产组，并仅在特定页面上导入一些组 - 请参阅 details 的答案。

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

Efficient way to manage javascript/coffeescript code for Rails 5?

javascript

jquery

ruby-on-rails

asset-pipeline

ruby-on-rails-5