Making the most of Javascript namespacing

👉 Whoa! Please note that this post is 14 years old. The views expressed within might have become outdated.

Today's article by Robert Nyman about Javascript namespacing remembered me about my own approach, which I've been using for quite a few projects now.

If you have no clue about Javascript namespacing, go and read Robert's article. I'll wait.


Back? Good :)

The Javascript single namespace approach is, in my opinion, a great thing. I have used it quite a lot and have even set up a code snippet in Textmate which I use as a spring board for every single script I've written over the past months.
After reading Robert's article, I realized more people might benefit from the way I approach this design pattern. Here goes...

Automatically initializing your namespace

My script files always look a little something like this:

// when developing for the XYZ Corporation:
var XYZCorp = {
	// modules go here
};

XYZCorp.init ();

Every module used on the website resides inside the global XYZCorp object. After defining the XYZCorp object, I execute its init function. This init function looks a little something like this:

// when developing for the XYZ Corporation:
var XYZCorp = {
	init: function () {
		for (var i in this) {
			if (typeof this[i].init == 'function') {
				this[i].init ();
			}
		}
	}
};

XYZCorp.init ();

That's it! I loop through all members of the global XYZCorp object, and if a member contains an init method, I execute it, successfully firing up the module.

This is a very easy approach, which can be reused over and over and over again, and if you ever wish to append a new module to the site, just stuff it inside the global namespace and give it an init method. Here's an example:

// ...
myModule: {
	init: function () {
		this.say ('myModule initiated!');
	},
	say: function (msg) {
		alert (msg);
	}
},
// ...

If you would like to use my template in Textmate, just copy the following code into a new snippet inside the Bundle Editor:

/**
* ---------------------------
* Client: ${1:client-name}
* URL: ${2:client-url}
* Author: ${3:author-name}
*
* ---------------------------
*/

/**
* General namespace
*/
var ${4:global-namespace} = {
	/**
	 * Initialize all objects
	 */
	init: function () {
		for (var i in this) {
			if (typeof this[i].init == 'function') {
				this[i].init ();
			}
		}
	},
	$5
};

/**
* Initialize general namespace
*/
$4.init ();

Then assign it to a Tab Trigger and make sure you point the Scope Selector to source.js.