代码之家  ›  专栏  ›  技术社区  ›  Simptive

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

  •  4
  • Simptive  · 技术社区  · 7 年前

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

    enter image description here

    $(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. 如果所有的js组合并链接到每个页面,我需要非常具体/谨慎地使用jQuery选择器作为选择$('div.custom input.no search')。如果我在另一个页面上有很多代码和限定标记,我不想在其中运行方法,那么一个页面可能会让我抓狂,前面提到的选择器正在选择。

    2. Rails 5使用ajax加载普通页面。如果有文件公司。对于页面/公司,它将在第一页上执行,比如说/主页。我什么时候去/公司,公司写的行。js不会再次执行。所以,我必须使用turbolinks:加载事件监听器,并将每个UI初始化和UI附加的事件封装在一个方法中,以便在turbolinks:load和普通调用中调用。(如代码段所示)

    所以,我想知道rails开发者对于js资产,特别是使用rails 5的开发者,会遵循什么实践?如果你的回答能解决我上面提到的问题,那将是非常有帮助的。

    1 回复  |  直到 7 年前
        1
  •  1
  •   Kenny Grant JimB    7 年前

    回答您的问题:

    1. 是的,只需使用特定于目标资源的类名,例如。rements\u form,如果在页面上找不到该类名,则每个函数中的js可以提前退出(因此您知道页面不相关)。
    2. 您应该编写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

    这里有一个权衡。您可以将特定于页面的js内联或包含在许多单独的文件中,但浏览器必须对其发出另一个请求,并且可能不会将其包含在缓存中。Rails选择保持简单,并假设每个页面缓存一个文件比站点上50个不同的js文件要好。YMMV但这似乎效果不错,所以我先试试Rails的方式。

    1. 将大部分js保留在主文件中,但将一些js内联放置在一个页面上,该页面仅与该页面相关
    2. details .