在大型网站上管理 document.ready 事件

Question

注意：我现在创建了一个 jQuery 插件，这是我尝试解决这个问题的方法。我确信它可以改进，我可能忽略了很多用例，所以如果有人想提供反馈，请随时:-) https://github.com/WickyNilliams/ReadyBinder

我没有这样的问题，但认为这将是一个有趣的讨论点，我希望人们对此有一些有趣的想法。

基本上，我在一个大型网站上工作，并且我们正在编写越来越多的 JavaScript。这很好，我喜欢 JS 的独特方法，并且我发现该语言的一些较暗的编年史中的古怪是可爱的 ;-) 然而，一直困扰我的一件事是如何管理文档就绪事件，因为它们变得越来越大随着时间的推移（因此对所服务页面的关注度/特定性降低）

问题是我们有一个 JS 文件（合并和缩小，尽管这对我的问题来说无关紧要）。大多数 JS 都是使用显示模块模式编写的，而 jQuery 是我们选择的框架。所以我们所有的 JS 功能在逻辑上被分组为方法，命名空间，然后在脚本文件的底部我们有这个

$(function(){
    //lots of code here, usually calling encapsulated methods 
    //on our namespaced revealing module
});

问题在于，并非此文档就绪处理程序中的所有代码都适用于每个页面。例如，在一个页面上可能只有 10% 的内容是相关的，而在另一个页面上可能有 80% 是相关的。对我来说，这感觉非常错误，我觉得我应该只执行每页需要的代码，主要是为了效率，也是为了可维护性。

我在谷歌上搜索过解决这个问题的方法，但找不到任何东西，也许我只是在寻找错误的东西！

无论如何，所以我的问题是：

• 有人想过这个问题吗？
• 这真的是其他人认为的问题吗？
• 您的代码中是否有一个大型、包罗万象的文档就绪处理程序，还是更专注于所服务的页面类型？
• 如果是后者，您如何管理？多个处理程序在 JS 中切换或在服务器端动态吐出文档就绪处理程序？

期待大家对此事的看法。

干杯

Answer 1

我喜欢 RameshVel 方法。我还找到了 Paloma gem 来创建特定于页面的 JavaScript。例如：

Paloma.controller('Admin/Users', {
  new: function(){
    // Handle new admin user
  }
});

Answer 2

这是我在 Rails mvc 项目中使用大量 javascript 所做的，我为 js 中的控制器创建了一个单独的命名空间，类似于 rails 控制器

class BusinessController
   def new
   end  
   def index
   end
end

和

Var Business =  {
      init : function(action) {
         //code common to the Business module
         //even add the common jquery doc ready here, its clean
         //and call the page specific action
         this[action]();
      },
      new : function() {
             // check jquery document ready code here, thats relevant to this action
             //New rental page specific code here
      },
      index : function() {
             //  check jquery document ready code here, thats relevant to this action
             //index rental page specific code here 
      }
}

在视图代码（服务器端）上，只需启动页面特定的 js 代码

<script type="text/javascript"> 
 <%= controller_name %>.init('<%= controller.action_name %>'); 
//which will render to
//  Business.init(index);
</script>

您几乎可以对其进行调整，使其适用于任何语言。而且这种方法不关心你是单个文件还是多个文件。

Answer 3

我认为这个问题必须直观的解决方案是，简单地说，减少加载时执行的工作量。

如果您的代码如下所示：

$(function () {
    // Binds a single click event (which will never be triggered if the hypothetical
    // widget is never used), regardless of how many widgets are used on the page.
    $(document).delegate('.rating-widget', 'click', namespace.rating.handler);
    // and so on for similar things which simply require event handler registration

    // Initializes each of the forms on the page, letting the initializer take care
    // of any details (datepicker widgets, validation, etc) based on the root element
    $('form.fancy').each(namespace.fancyform.initializer);
    // and so on for similar things that require initialization

    // ... (for each type of thing on the page requiring initial setup,
    //      find the most general/high level pattern that sufficient)
});

事情应该是相对可维护的，即使有几十行。在使用组件代码时，在此级别没有需要更新/记住的复杂/有趣的逻辑，并且由于此级别的所有内容都是微不足道的，因此很容易阅读。至此，没有必要发明一些复杂的注册系统；它不会比.delegate 和.each 更简单。

还要注意，以上所有内容都可以优雅地处理不使用组件的情况。在这些情况下，几乎不需要做任何工作，也不需要条件逻辑。

有关如何实现处理程序/初始化程序的有趣想法，您可能想看看，例如，Doug Neiner 上周在 jQuery Boston 上发表的“Contextual jQuery in practice”演讲。

Answer 4

首先，我将特定的类放在主体或特定容器上，例如articles，form-validation，password-meter，……。如果我有一个 MVC 应用程序，我更喜欢将控制器名称放入 body 类中。这不会造成太大伤害，而且对造型也很有用。

然后在每个 document.ready 块上检查是否存在这样的类，如果不存在，则从该函数返回。这种方法更简单，因为它在 if 子句中没有主要代码。这种方法类似于用于检查函数先决条件的断言。

例子：

$(function(){
    if($('body').hasClass('articles') === false){ return; }

    //body of the articles code
});

$(function(){
    if($('body').hasClass('password-meter') === false){ return; }

    //include password meter in page
});

这种方法的好处是没有不需要的代码可以潜入就绪回调中，这使得它更容易重用。缺点是你会得到很多回调块，如果你不注意重复代码很容易潜入你的应用程序。

Answer 5

使用较少的 javascript 文件可以最大限度地减少发送到服务器的请求数量，并且缓存文件可以加快第二页和第三页的加载速度。 通常，我会考虑以下页面（而不仅仅是当前页面）可能需要 js 文件的某些部分。这使我将我的 js 代码分为两种类型： 我的“main.js”中的代码，即使不使用，它也会被客户端下载（但不一定执行，我会解释），第二类代码放在单独的文件中。您实际上可以创建多个按概率分组的文件。这取决于您的项目的详细信息。如果它是一个大型项目，对用户行为进行一些统计分析可能会揭示有趣的 js 代码分组方式。 现在代码已经下载到客户端，我们不想执行所有代码。 你应该做的是有不同的布局或页面。在布局或页面中放置一个部分。在部分内部设置一个 javascript 变量。检索 javascript 代码中的 javascript 变量，并确定是否要执行某些代码。

即：

创建部分“_stats.html.erb”，将这段代码放入其中：

<script type="text/javascript">
    var collect_statistics = <%= collect_statistics %>;
</script>

将部分放置在您要收集统计信息的页面中： show.html.erb

<%= render "_stats", :collect_statistics => false %>

现在在您的 js 文件中，执行以下操作：

$(document).load( function() {
 if (typeof collect_statistics != "undefined" && collect_statistics) {
  // place code here
 }
});

我希望这会有所帮助！

Answer 6

很好的问题。我实际上通过使用自定义页面加载事件来处理这个问题。 所以在我的核心 .js 文件中，我有一个如下所示的类：

var Page = {
    init: function(pageName) {
        switch (pageName)
        {
            case: 'home': {
                // Run home page specific code
            }
            case: 'about': {
                // Run about page specific code
            }
            ...
        }
    }
}

您可以通过多种方式调用它，无论是在特定于页面的$(document).ready() 中，还是使用某种 URL 解析器从核心脚本中调用（从字面上看，使用 URL 解析器一切皆有可能）：

$(document).ready(function() {
    // http://www.mydomain.com/about
    var currentPage = window.location.pathname;   // "about"
    Page.init(currentPage);    
});

window.locationDOM 引用：https://developer.mozilla.org/en/DOM/window.location

Answer 7

首先，如果您使用 jQuery，则 document.getElementsByTagName 并不是必需的，您可以使用 $("tagname")。看看jQuery Selectors documentation 以获得更多魔力！

你的工作中的解决方案是我会去的方式，但你不需要去定义额外的功能，获取 bodyClasses，运行循环，或任何爵士乐的麻烦......为什么不直接使用 jQuery 的 .hasClass() 函数呢？

$(function() {
    if($("body").hasClass("article")) {
        alert("some article specific code");
    }
    if($("body").hasClass("landingPage")) {
        alert("some landing specific code");
    }
});

巴姆。一切你需要的。如果您想提高效率，可以重用一个正文查询：

$(function() {
    var body = $("body");
    if(body.hasClass("article")) {
        alert("some article specific code");
    }
    if(body.hasClass("landingPage")) {
        alert("some landing specific code");
    }
});

在 jsfiddle 上：http://jsfiddle.net/W8nx8/6/

Answer 8

“问题是我们只有一个JS文件”

我不确定如何避免它，只要您为所有页面都包含相同的（合并的）JS 文件。您可以使用一些服务器端逻辑来合并不同的部分以使用不同的页面，但是您可能会失去 JS 客户端缓存的好处，所以...

我从事的项目（通常）使用了多个 JS 文件，每个页面都有一对，其他的是否包含在内或不合适 - 一些 JS 文件仅包含在一个页面中。这意味着几乎每个页面都包含公共库函数，无论它们是否使用它们，但是公共 JS 文件会被缓存，所以这并不重要。特定于页面的代码确实是特定于页面的。

我无法从您的问题中判断您是否意识到这一点，但是您可以拥有多个文档就绪处理程序（我相信 jQuery 会按照绑定的顺序执行它们？）。因此，如果您将 JS 拆分，每个 JS 文件都可以包含自己的文档。当然，这种方法有其自身的开销，但我认为这比将所有内容都放在同一个文件中要好。

Answer 9

我知道你来自哪里。正确的移动网络应用程序让用户下载一个充满无关代码的大量 JS 文件会让人觉得很愚蠢（JQuery API 是一个糟糕的开始！）。

我所做的，可能是对的，也可能是错的，但似乎确实有效的是在标签之前逐页包含所需的功能。 （这个位置大部分是绕过 document.ready 问题）。却不禁觉得这种做法太简单了。

我有兴趣听到其他答案，所以这是个好问题，+1。