Todays idea is inspired by the "YAHOO.namespace" Function of YUI. The concept is to have a method that creates your namespaces for you. In the YUI version, you pass in a String (or multiple strings) containing the new namespace(s) and they are attached to the YAHOO Object. If the namespace already exists, then you are simply returned that namespace.

Example 1: Single YUI Namespace

var myObject = YAHOO.namespace("example.mattsObject");

The example namespace is frequently used by the YUI team in their documentation. I have attached an Object (mattsObject;) to the the example namespace ("YAHOO.example.mattsObject"). If either the "YAHOO.example" or the "YAHOO.example.mattsObject" namespaces do not exist, they will be created and the latter namespace Object will be returned, and in Example 1, assigned to myObject .

If you wanted to setup all your namespaces in a single call, you might do something like the following:

Example 2: Multiple YUI Namespaces

var myWidget = YAHOO.namespace("myProject.lib", "myProject.util", "myProject.widget");

This works just like example 1, except this time we setup 3 namespaces, and return the last one ("YAHOO.myProject.widget") to set myWidget. Each namespace can be accessed directly from or you can continue to use YAHOO.namespace(myNamespace) to ensure that they always exist.

The YAHOO namespace method works great, especially, because it returns a reference to the desired namespace, but what if you do not use YUI or you want to use a different naming convention. Here is a modified version of the YAHOO namespace method that starts builds from window instead of the YAHOO Object.

Example 3: Modified Namespace Method

window.object_mes_namespace = function() {
	var a = arguments, 
		o = window,
		i = 0,
		j = 0,
		tok = null,
		name = null;
	
	// iterate on the arguments
	for (i = 0; i < a.length; i = i + 1) {
		tok = a[i].split(".");

		// iterate on the object tokens
		for (j = 0; j < tok.length; j = j + 1) {
			name = tok[j];			
			o[name] = o[name] || {};
			o = o[name];
		}
	}

	return o;
}

First we initialize all the variables that we will need, and create local variables to reference the Function arguments (a) and window (o). We iterate through each of the arguments and split them around period, setting that Array to tok. Then iterating on each of the tokens we see if that token exists yet on o, setting it to Object when it does not, then we update o to point to the new namespace. This keeps happening until o is pointing to the last namespace.

Using this Function allows you to safely create your own namespaces in global without overriding any existing objects. If we took the ImagePopout Object from Simple Image Popouts we might want to change its implementation and attach the Object to the Widget namespace instead of global.

Example 4: Using Namespace With ImagePopup

object_mes_namespace(Core.Widget).ImagePopout= function(bd, src, emap) {
…
};

This way we ensure that both Core and Core.Widget objects exist, before we set ImagePopout to the popout generation Function, without having to ensure namespace existence or accidentally overriding an already existing namespace.