Should I integrate multiple DOMContentLoaded handlers inito one?

Question

I have multiple JavaScript files and each of them have each DOMContentLoaded handler in order to initialize themselves.

Such as:

file A

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

file B

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

And I have to concatenate & minify these files, and a minified file have a bunch of DOMContentLoaded handlers.

I am wondering that if it is better to integrate these DOMContentLoaded handlers into one, or not.

I came up with a way of integration such as below.

some common file

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

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

file A

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

file B

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

Any help is appreciated, thanks.

Answer 1

IMHO you need not create any such wrappers plainly for performance sake. The only valid complaint the JavaScript developers have with the plain-old event model is management of the event handlers.

Consider this; every time you add listeners for the DOMContentLoaded event, the browser itself is maintaining a list synonomous to your window.pageInitializer.initPageFuncs object. The browser itself calls on all the event handlers when the event is triggered. You would not want to redo this from a performance point of view or plainly said based on the DRY principle. However managing event handlers is what forces the developers hand to repeat a structure like you have above. What do I mean by managing event handlers? Read on.

What if, based on a particular program condition or after performing a particular program operation you want to clear all event handlers of the DOMContentLoaded event? In the plain-old approach you will need to call document.removeEventListener for every instance of document.addEventListener that you had called. But if you have the structure that you have created above you can clear all listeners with just the following one line code:

window.pageInitializer.initPageFuncs = {};

All your listeners are cleared. Doing something like this is one of the main reasons the javascript developer is attracted to jQuery. Remember this?

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

From what I see in your question I am assuming you have no need to handle these events and therefore do not require to combine these event bindings into one. If you do and jQuery sounds overkill then you can go with your simple approach to manage your events.