Approaches to modular client-side Javascript without namespace pollution

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.*

Answer 2

You should check out browserify, which will process a modular JavaScript project into a single file. You can use require in it as you do in node.

It even gives a bunch of the node.js libs like url, http and crypto.

ADDITION: In my opinion, the pro of browserify is that it is simply to use and requires no own code - you can even use your already written node.js code with it. There's no boilerplate code or code change necessary at all, and it's as CommonJS-compliant as node.js is. It outputs a single .js that allows you to use require in your website code, too.

There are two cons to this, IMHO: First is that two files that were compiled by browserify can override their require functions if they are included in the same website code, so you have to be careful there. Another is of course you have to run browserify every time to make change to the code. And of course, the module system code is always part of your compiled file.