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

2023年1月6日 258次阅读

我正在使用Rails 5.0.2构建Web应用程序.我有我的项目的JS文件：

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

此外,我对每个自己的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资产我有以下保留/问题：

>默认情况下,Rails附加(并因此运行)所有页面上的所有js文件以进行相同的布局.通过使用自定义模式在默认情况下仅在特定资源/页面上添加相关js是不错的？
>如果所有js组合并链接到每个页面,我需要非常具体/谨慎使用jQuery选择器作为选择$(‘div.custom input.no-search’)对于一个页面可能会让我疯狂如果我有很多在我不想运行方法的另一个页面中的代码和限定标记,提到的选择器正在选择.
> Rails 5使用ajax加载正常页面.如果页面/公司有一个文件company.js,它将在第一页/ / home上执行.当我去/ company时,用company.js写的行不会再执行.所以,我必须使用turbolinks：加载事件监听器并封装在turbolinks中调用的方法中的每个UI初始化和UI附加事件：加载以及正常调用. (如代码段所示)

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

最佳答案 在回答你的问题时：

>这取决于.我建议先尝试默认 – 它只需要你对选择器和类名遵守纪律.但是,如果您发现自己在每个仅在一个后端页面上使用的页面上包含大量js,请参阅下面的其他可能性.
>是的只使用特定于您所定位资源的类名,例如.remarks_form,如果在页面上找不到该类名,则每个函数中的js可以提前纾困(因此您知道该页面不相关) .
>你应该只在页面加载后编写你的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保存在一个组中,但您也可以(按复杂程度排序)：

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

点赞