Question

Most of the javascript I work with is UI code – code that attaches additional functionality to the HTML framework of my pages and interacts with various HTML elements.

Overall, I’m in favor of breaking UI code into into modules.

For example, if I have code that attaches handlers to back/next buttons that implements carousel behavior, it makes sense to put that code in a ‘carousel’ module.

The question is, where should I put the boot strap code that runs on page load, and actually decides which modules will be loaded and for what elements?

Should it be in the JS file, and execute as soon as the JS file is included?

Or should it be in a script tag at the top (or bottom) of the HTML file?

Or should there be no particular code, but the JS file should determine which elements to attach handlers, etc to, based on a parent element’s ID/class?

Which method has worked best for you?

Answer 1

I usually separate each module in different .js files. Each file/module has its own $(document).ready() (a jQuery bootstrap function) to load properly. Then load that particular file/module by just adding the <script> appropriately.

This is similar to how plugins work for popular JavaScript libraries/frameworks, all you need to do is include them, and apply behavior.

EDIT

For example, the Carousel (carousel.js) model would look something like this:

(function(){

    function bindNext(){...}
    function bindPrev(){...}

    // jQuery bootstrap
    $(document).ready(function(){
        bindNext();
        bindPrev();
    });

})();

And maybe another module (foo.js):

(function(){

    function foo(){...}
    function bar(){...}

    // jQuery bootstrap
    $(document).ready(function(){
        foo();
        bar();
    });

})();

This way, all I have to do is add those files and the modules will just work. There’s no need of a central location to clobber up all the behaviors of different module, since each modules defines its behavior.