Creating JavaScript Namespaces

24. September 2010 15:01

When using JavaScript these days, it is generally a good idea to namespace your javascript methods so that they don't polute the global namespace.

if (typeof mysite == 'undefined') var mysite = {};
mysite.section = mysite.section || {};
mysite.section.subNamespace = mysite.section.subNamespace || {};
mysite.section.subNamespace.component = (function(){ ... }());

This allows you to create a clean separation of your utilization. Although you may not want to go as deep as the example above, you can see how this could very well become cumbersome when you want to declare one or more namespaces. It would be nice to have a helper method that lets you simply declare namespaces.

//declare a single namespace
namespace('mysite.section.subNamespace.component');

//declare multiple namespaces at once
namespace('mysite.section2', 'mysite._utilities');

This works out much nicer, and is easier to repeate as-needed when creating your namespaces. The function I am using for this is below.

var namespace = (function(root){
	//regular expression to limit formatting of namespaces
	var nsre = /^([\$\_a-z][\$\_a-z\d]*\.?)+$/i

	//define returned function
	return function(ns) {
		var args = Array.prototype.slice.call(arguments);
		var ret = [];
		while (args.length) {
			ns = genNS(args.shift());
			if (ns) ret.push(ns);
		}
		if (ret.length == 0) return; //undefined, no valid input
		if (arguments.length == 1) return ret[0]; //only a single input, return that namespace
		return ret; //used overload for multiple namespaces, return the array/list
	}
	
	//private static method to generate a single namespace
	function genNS(ns) {
		if (!ns.match(nsre)) return;
		ns = ns.split('.');
		var base = root;
		for (var i=0; i<ns.length; i++) {
			base[ns[i]] = base[ns[i]] || {};
			base = base[ns[i]];
		}
		return base; //return resulting namespace object
	}
}(this));

This functionality is very useful, and is included in a number of API toolkits. You could replace the var namespace declaration and attach it to an existing object such as $.ns, which would attach it to an existing reference.

If you have suggestions for future topics, feel free to leave a comment or contact me via email.

The Data Czar

6. November 2008 00:04

Far too often in large organizations there is a disconnect between different DBAs, IT staff and application developers.  I think what would be a good thing to see in increasing use would be a small handful of people that understand the mapping of various database schemas for applications within a large organization, and provide a common database interface. More...

Tables vs. CSS

17. November 2007 18:07

After reviewing the following recent blog postings (Top 30 popular websites Using CSS and Using Tables), I just want to state my own opinions regarding Tables vs. CSS based design. More...

Tracker1

Michael J. Ryan aka Tracker1

My name is Michael J. Ryan and I've been developing web based applications since the mid 90's.

I am an advanced Web UX developer with a near expert knowledge of JavaScript.