6

我有多个 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;
})();

任何帮助表示赞赏，谢谢。

4

1 回答 1

8

恕我直言，出于性能考虑，您无需简单地创建任何此类包装器。JavaScript 开发人员对普通事件模型的唯一有效抱怨是事件处理程序的管理。

考虑一下；每次为DOMContentLoaded事件添加侦听器时，浏览器本身都会维护一个与您的window.pageInitializer.initPageFuncs对象同义的列表。当事件被触发时，浏览器本身会调用所有的事件处理程序。您不会希望从性能的角度重做此操作，或者根据 DRY 原则明确表示。然而，管理事件处理程序是迫使开发人员重复上述结构的原因。管理事件处理程序是什么意思？继续阅读。

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

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();

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

于 2012-12-20T10:04:10.693 回答