Question

Just wanted to know if it was a good JavaScript practice.

Let’s say I have many Web pages that all call an initialization function “init()”, would it be the right thing to use an IIFE inside my pattern to run the function everytime the script is loaded?

var foo = (function() {
    var bar = "something";

    (function init() {
        // Do something crazy that's gonna be the same across all my web pages
        // like adding an event listener or something
        // ...
        document.write('page init...');
    }());

    function privatePage1() {
        // This stuff is gonna be used only in page1.html via foo.privatePage1
        document.write('page 1' + bar);
    }

    function privatePage2() {
        // This stuff is gonna be used only in page2.html via foo.privatePage2
        document.write('page 2' + bar);
    }

    return {
        privatePage1: privatePage1,
        privatePage2: privatePage2
    }
}());

Answer 1

This is a pretty subjective area, but here’s my take:

• When you use the module pattern, you’re providing a contained set of functionality to the rest of your code. It’s essentially a mini-library.

• In general, I wouldn’t expect a library to do anything when I load it, other than initialization steps that are entirely internal to the library (e.g. setting up the configuration, instantiating a few necessary objects, etc) – nothing that actually affects the DOM or otherwise significantly alters the environment (which is why I’ve never been entirely comfortable with libraries like Date.js or Prototype that change the prototypes of basic objects).

• There are a couple of reasons for this, but the main one is that I don’t want to have to worry about the load order of my libraries/modules, other than simply managing dependencies. Independent modules shouldn’t affect each other at all. When you manipulate the DOM in your module at load time, sooner or later you’ll realize that another piece of your code is expecting the DOM to be in a certain state at a certain time, and that you now have to care about whether you load your module before or after that time. This is an extra bit of complexity that’s essentially hidden in the script tag that loads your module.

• The other issue here is portability and adaptability. Maybe you’ll want to use your module in another project with another DOM setup. Maybe you’ll want to pass a different DOM element or config variable to the init() function on a specific page. If you execute init() automagically, you lose the opportunity for configuration.

So what I generally do is to set the init() method as an attribute of the returned module object:

var foo = (function() {

    function init() {
        // Do something crazy that's gonna be the same across all my web pages
    }

    //...

    return {
        init: init,
        // etc
    }
}());

and then call it as needed elsewhere in my code:

foo.init();

Yes, this adds an extra line of redundant code to the initialization for all my pages (though this is probably just one other script anyway, so the added weight is all of 11 characters). But it allows me a more fine-grained control over when the module is initialized, and offers a hook for configuration arguments when I (inevitably) determine I need them later.