草庐IT

javascript - 我应该将多个 DOMContentLoaded 处理程序集成到一个中吗？

coder 2025-03-18 原文

我有多个 JavaScript 文件，每个文件都有每个 DOMContentLoaded 处理程序来初始化它们。

如:

文件A

document.addEventListener('DOMContentLoaded', function(){
  console.log('init file A');
});

文件B

document.addEventListener('DOMContentLoaded', function(){
  console.log('init file B');
});

我必须连接并缩小这些文件，一个缩小的文件有一堆 DOMContentLoaded 处理程序。

我想知道将这些 DOMContentLoaded 处理程序集成到一个中是否更好。

我想到了一种集成方式，如下所示。

一些常用文件

window.pageInitializer = {
  initPageFuncs: {},
  do: function(){
    for (var key in this.initPageFuncs) {
      this.initPageFuncs[key]();
    }
  }
}

document.addEventListener('DOMContentLoaded', window.pageInitializer.do);

文件A

(function(){
  var initPage = function(){
    console.log('init file A');
  };
  window.pageInitializer.initPageFuncs.fileA = initPage;
})();

文件B

(function(){
  var initPage = function(){
    console.log('init file B');
  };
  window.pageInitializer.initPageFuncs.fileB = initPage;
})();

感谢任何帮助， 谢谢。

最佳答案

恕我直言，您不需要为了性能而创建任何此类包装器。 JavaScript 开发人员对普通事件模型唯一有效的提示是事件处理程序的管理。

考虑一下；每次您为 DOMContentLoaded 事件添加监听器时，浏览器本身都会维护一个与您的 window.pageInitializer.initPageFuncs 对象同义的列表。当事件被触发时，浏览器本身会调用所有的事件处理程序。从性能 Angular 或基于 DRY 原则明确地说，您不想重做此操作。但是，管理 事件处理程序会迫使开发人员手动重复上面的结构。管理事件处理程序是什么意思？继续阅读。

如果基于特定的程序条件或在执行特定的程序操作后您想要清除 DOMContentLoaded 事件的所有事件处理程序，该怎么办？在普通的旧方法中，您需要为调用的每个 document.addEventListener 实例调用 document.removeEventListener。但是，如果您具有上面创建的结构，则只需使用以下一行代码即可清除所有监听器:

window.pageInitializer.initPageFuncs = {};

您的所有听众都已清除。做这样的事情是 javascript 开发人员被 jQuery 吸引的主要原因之一。还记得这个吗？

var selectedObject = $({selector});

// add event listeners to the selected object
selectedObject.bind("click", function1);
selectedObject.bind("click", function2);
selectedObject.bind("click", function3);

// remove event listeners for the "click" event for the selected object
selectedObject.unbind("click");

// remove all event listeners for the selected object
selectedObject.unbind();

根据我在您的问题中看到的内容，我假设您不需要处理这些事件，因此不需要将这些事件绑定(bind)合并为一个。如果您这样做并且 jQuery 听起来有些过分，那么您可以使用简单的方法来管理您的事件。

关于javascript - 我应该将多个 DOMContentLoaded 处理程序集成到一个中吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13967830/

个中DOMContentLoadedcodefunctionjavascriptjavascript-events

有关javascript - 我应该将多个 DOMContentLoaded 处理程序集成到一个中吗？的更多相关文章

  1. ruby - 在 Ruby 程序执行时阻止 Windows 7 PC 进入休眠状态 - 2

    我需要在客户计算机上运行Ruby应用程序。通常需要几天才能完成(复制大备份文件)。问题是如果启用sleep，它会中断应用程序。否则，计算机将持续运行数周，直到我下次访问为止。有什么方法可以防止执行期间休眠并让Windows在执行后休眠吗？欢迎任何疯狂的想法;-) 最佳答案 Here建议使用SetThreadExecutionStateWinAPI函数，使应用程序能够通知系统它正在使用中，从而防止系统在应用程序运行时进入休眠状态或关闭显示。像这样的东西:require'Win32API'ES_AWAYMODE_REQUIRED=0x0

  2. ruby-on-rails - Rails 3 中的多个路由文件 - 2

    Rails2.3可以选择随时使用RouteSet#add_configuration_file添加更多路由。是否可以在Rails3项目中做同样的事情？ 最佳答案 在config/application.rb中:config.paths.config.routes在Rails3.2(也可能是Rails3.1)中，使用:config.paths["config/routes"] 关于ruby-on-rails-Rails3中的多个路由文件，我们在StackOverflow上找到一个类似的问题

  3. ruby-on-rails - 在 Ruby 中循环遍历多个数组 - 2

    我有多个ActiveRecord子类Item的实例数组，我需要根据最早的事件循环打印。在这种情况下，我需要打印付款和维护日期，如下所示:ItemAmaintenancerequiredin5daysItemBpaymentrequiredin6daysItemApaymentrequiredin7daysItemBmaintenancerequiredin8days我目前有两个查询，用于查找maintenance和payment项目(非排他性查询)，并输出如下内容:paymentrequiredin...maintenancerequiredin...有什么方法可以改善上述(丑陋的)代

  4. ruby - 如何指定 Rack 处理程序 - 2

    Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时，rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack

  5. ruby-on-rails - Rails - 一个 View 中的多个模型 - 2

    我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何

  6. ruby - 在 Ruby 中编写命令行实用程序 - 2

    我想用ruby​​编写一个小的命令行实用程序并将其作为gem分发。我知道安装后，Guard、Sass和Thor等某些gem可以从命令行自行运行。为了让gem像二进制文件一样可用，我需要在我的gemspec中指定什么。 最佳答案 Gem::Specification.newdo|s|...s.executable='name_of_executable'...endhttp://docs.rubygems.org/read/chapter/20 关于ruby-在Ruby中编写命令行实用程序

  7. ruby - 检查 "command"的输出应该包含 NilClass 的意外崩溃 - 2

    为了将Cucumber用于命令行脚本，我按照提供的说明安装了arubagem。它在我的Gemfile中，我可以验证是否安装了正确的版本并且我已经包含了require'aruba/cucumber'在'features/env.rb'中为了确保它能正常工作，我写了以下场景:@announceScenario:Testingcucumber/arubaGivenablankslateThentheoutputfrom"ls-la"shouldcontain"drw"假设事情应该失败。它确实失败了，但失败的原因是错误的:@announceScenario:Testingcucumber/ar

  8. ruby-on-rails - Rails 应用程序之间的通信 - 2

    我构建了两个需要相互通信和发送文件的Rails应用程序。例如，一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情，所以我什至不知道从哪里开始。任何帮助，将不胜感激。谢谢! 最佳答案 无论Rails是什么，几乎所有Web应用程序都有您的要求，大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去，网站不应直接访问彼此

  9. ruby - 无法运行 Rails 2.x 应用程序 - 2

    我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby​​:$rvmuseree-1.8.7-head我尝试运行服务器，然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r

  10. ruby-on-rails - Rails 应用程序中的 Rails : How are you using application_controller. rb 是新手吗？ - 2

    刚入门rails，开始慢慢理解。有人可以解释或给我一些关于在application_controller中编码的好处或时间和原因的想法吗？有哪些用例。您如何为Rails应用程序使用应用程序Controller？我不想在那里放太多代码，因为据我了解，每个请求都会调用此Controller。这是真的？ 最佳答案 ApplicationController实际上是您应用程序中的每个其他Controller都将从中继承的类(尽管这不是强制性的)。我同意不要用太多代码弄乱它并保持干净整洁的态度，尽管在某些情况下ApplicationContr

随机推荐