javascript - 在页面之间共享 document.ready javascript

Question

我有很多$(function () {}); (document.ready) javascript 函数在我的不同网页中都是相同的。但是我不知道如何“共享”它们，以便我可以将它们全部保存在一个地方，而不必每次都复制+粘贴它们。

即在 Rails 中，我尝试将一些共享代码放入我的 javascript 资源管道中，但它不会运行(除非我在加载后刷新页面一次)。不过，当前页面特有的 javascript 确实会运行。

有什么想法吗？

更新

Saiqul 的答案有效，但我最终所做的以及我发现最好的做法是这样做:https://stackoverflow.com/a/18834209/3776339

Answer 1

你使用什么版本的rails？如果 Rails 4+，您需要更多文档事件监听器，例如 $(document).on('page:change', function(){}) 因为 Rails 4+ 使用 turbolinks gem 使加载页面更快，因此您的 jQuery.ready() 监听器仅在第一页加载时执行，而不在其他页面中工作。

turbolinks 提供了一些事件:

• page:before-change
• page:fetch starting to fetch a new target page
• page:receive the page has been fetched from the server, but not yet parsed
• page:change the page has been parsed and changed to the new version and on DOMContentLoaded
• page:update is triggered whenever page:change is PLUS on jQuery's ajaxSucess, if jQuery is available (otherwise you can manually trigger it when calling XMLHttpRequest in your own code)
• page:load is fired at the end of the loading process.

或者您可以使用jquery.turbolinks当 Turbolinks 触发 page:load 事件时，gem 会触发 jQuery.ready()。

更新

这是我在my rails app中的js代码

我将必须在每个页面上运行的js代码封装在单个函数中

var ready = function(){
  $('somEl').on('change', function(){ 
    .... 
  });
  $('otherEl').on('click', function(){ 
    .... 
  });
});

然后在三个事件监听器上执行

$(document).ready(ready) // jquery event

$(document).on("page:fetch", function(){ // turbolinks event
  ready();

  // you can add more code here, which will be fired when turbolinks starting fecth new page
}
$(document).on("page:change", function(){  // turbolinks event
  ready();

  // you can add more code here too
}