Edit Question - KnowledgeHub

Title Body

I am starting up a new project and I am reviewing my best-practices to try to prevent any problems, and also to see what bad habits I have gotten into. I am not terribly pleased with how I am handling initialization sequences in Javascript using the module / submodule pattern. Let's say, my code ends up with something like FOO.init() FOO.module1.init() FOO.module2.init() FOO.module3.init() FOO.module4.init() at the global scope. I am essentially doing (error checking and details omittied for brevity): var FOO = (function (me) { me.init = function () { for (var i in me.inits) { me.inits[i](); } } return me; }(FOO || {})); var FOO = (function (parent) { var me = parent.module1 = parent.module1 || {}; me.init = function () { } parent.inits.push(me.init); return parent; }(FOO || {})); $(document).ready(FOO.init); for initialization. I know I have read up on this before, but I can't come up with the right search terms to find the articles now. Is there a well thought out and tested pattern that handles initialization in sitiation like this? Thanks. EDIT: Upon re-reading this, I think a little context will inform answers. In my case, each module / submodule is in its own file. The base module defines the basic functionality of the site, and sub-modules enable different features. For example, a sub-module may wire up auto-completion on a search box, and another may turn a static header image into a rotating banner. Sub-modules are enabled/disabled by the CMS, so I really do want to divorce explicit calls inside the base module so everything can be managed by the CMS. I also that there are CMS specific ways to accomplish this, but I looking for a generic Javascript pattern for doing this to provide consistency and resuablity between projects that may use a different CMS.

Tags (comma-separated) Cancel