我应该整合多个DOMContentLoaded处理程序inito吗？

Question

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

任何帮助表示赞赏,谢谢.

Answer 1

恕我直言,你不需要为了性能而明白地创建任何这样的包装器.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听起来有点过分,那么你可以用简单的方法来管理你的活动.