Question

I’m writing client-side code and would like to write multiple, modular JS files that can interact while preventing global namespace pollution.

index.html

<script src="util.js"></script>
<script src="index.js"></script>

util.js

(function() {
    var helper() {
        // Performs some useful utility operation
    }
});

index.js

(function () {
    console.log("Loaded index.js script");
    helper();
    console.log("Done with execution.");
})

This code nicely keeps utility functions in a separate file and does not pollute the global namespace. However, the helper utility function will not be executed because ‘helper’ exists inside a separate anonymous function namespace.

One alternative approach involves placing all JS code inside one file or using a single variable in the global namespace like so:

var util_ns = {
    helper: function() {
        // Performs some useful utility operation.        
    },
    etc.
}

Both these approaches have cons in terms of modularity and clean namespacing.

I’m used to working (server-side) in Node.js land where I can ‘require’ one Javascript file inside another, effectively injecting the util.js bindings into the index.js namespace.

I’d like to do something similar here (but client-side) that would allow code to be written in separate modular files while not creating any variables in the global namespace while allowing access to other modules (i.e. like a utility module).

Is this doable in a simple way (without libraries, etc)?

If not, in the realm of making client-side JS behave more like Node and npm, I’m aware of the existence of requireJS, browserify, AMD, and commonJS standardization attempts. However, I’m not sure of the pros and cons and actual usage of each.

Answer 1

I would strongly recommend you to go ahead with RequireJS.

---

The modules support approach (without requires/dependencies):

// moduleA.js

var MyApplication = (function(app) {

    app.util = app.util || {};

    app.util.hypotenuse = function(a, b) {
        return Math.sqrt(a * a + b * b);
    };

    return app;
})(MyApplication || {});

// ----------

// moduleB.js

var MyApplication = (function(app) {

    app.util = app.util || {};

    app.util.area = function(a, b) {
        return a * b / 2;
    };

    return app;
})(MyApplication || {});

// ----------

// index.js - here you have to include both moduleA and moduleB manually
// or write some loader

var a = 3,
    b = 4;
console.log('Hypotenuse: ', MyApplication.util.hypotenuse(a, b));
console.log('Area: ', MyApplication.util.area(a, b));

Here you’re creating only one global variable (namespace) MyApplication, all other stuff is “nested” into it.

Fiddle – http://jsfiddle.net/f0t0n/hmbb7/

---

**One more approach that I used earlier in my projects – https://gist.github.com/4133310
But anyway I threw out all that stuff when started to use RequireJS.*