admin 管理员组文章数量: 1086019
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 and 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 mon 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,
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 and 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 mon 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,
Share Improve this question edited Feb 21, 2023 at 7:43 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Dec 20, 2012 at 8:16 yshrsmzyshrsmz 1,1792 gold badges15 silver badges34 bronze badges1 Answer
Reset to default 8IMHO you need not create any such wrappers plainly for performance sake. The only valid plaint 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 bine these event bindings into one. If you do and jQuery sounds overkill then you can go with your simple approach to manage your events.
本文标签： javascriptShould I integrate multiple DOMContentLoaded handlers inito oneStack Overflow
版权声明：本文标题：javascript - Should I integrate multiple DOMContentLoaded handlers inito one? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744010081a2517988.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论