I’ll be honest, using the YAHOO namespace to store my own code makes my bunghole tighten just a little bit. What if I had written code stored under YAHOO.tool, which was unused prior to YUI 2.3.0? What would I do now? I’d have to rewrite my code, or never include any of the wonderful YAHOO.tool.TestCase, put together by Nicholas Zakas. As is traditional with most of my weblog posts, I try not to just complain about a problem without giving you a solution (but let’s be honest, only if it doesn’t take too much work).

Let’s rewrite the YAHOO.namespace function to work outside of the YAHOO Namespace, so we can do things like this:

namespace( 'zachsWorld.partyTime' );
zachsWorld.partyTime = function() {
	alert( 'Excellent.' );
}
zachsWorld.partyTime(); // obviously would alert: Excellent.

Here’s some code:

function namespace() {
    var a=arguments, o=null, i, j, d;
    for (i=0; i<a.length; i=i+1) {
        d=a[i].split(".");
        o=window;
        for (j=0; j<d.length; j=j+1) {
            o[d[j]]=o[d[j]] || {};
            o=o[d[j]];
        }
    }
    return o;
};

Obviously this is just a modification of the YAHOO.namespace function. I’d recommend putting this under your own namespace (I’m trying to put most of the code I write on this website under the Y2 namespace, but everyone should have their own parent namespace), like so (any namespaces you create using this function won’t use the parent namespace assigned here by default):

if (typeof Y2 == "undefined") {
    var Y2 = {};
}
Y2.namespace = function() { /* copy function contents from above. */ };

But you can do whatever you want. This is one of the functions that I think separates YUI from the other frameworks out there, giving an easy utility to organize your code. This is something I think jQuery seriously lacks, noting from the code inside the many jQuery plugins contributed by end users. Many jQuery contributors do not organize their code, putting multiple unnecessary top level functions into jQuery.fn as methods, or into the jQuery object itself as functions. People whine about polluting the global namespace… I suppose it might be considered nitpickey to whine about the jQuery namespace. Okay you whiney bastard, let’s help out and put this into jQuery!

// include jQuery first.
jQuery.namespace = function() {
    var a=arguments, o=null, i, j, d;
    for (i=0; i<a.length; i=i+1) {
        d=a[i].split(".");
        o=window;
        for (j=0; j<d.length; j=j+1) {
            o[d[j]]=o[d[j]] || {};
            o=o[d[j]];
        }
    }
    return o;
};

Please note, this method does NOT work using jQuery methods with an element context, such as jQuery(‘div’).myNamespace.myMethod(). Your element context won’t be carried through to myMethod().

However, you can use it for jQuery functions, such as this:

// definition
jQuery.namespace( 'jQuery.debug' );
jQuery.debug.test1 = function()
{
    alert( 'test1 function' );
};
jQuery.debug.test2 = function()
{
    alert( 'test2 function' );
};
// usage
jQuery.debug.test1();
jQuery.debug.test2();

For more information, you can read Global Domination, an article written by Douglas Crockford, or Best Practices for Writing jQuery plugins.

Updated: fixed some weird source parsing errors introduced by the code formatting plugin.

YAHOO.namespace. This is a great little utility function that gives you an easy way to encourage low coupling throughout your JavaScript code. Divide your functions into functional units! If you already know how to use this function, you can skip to the bottom to learn a few JavaScript tricks Yahoo has put in. If not, keep reading! Are you making a new package you want to put under the YAHOO namespace? Just declare it in a string argument passed into the YAHOO.namespace function:

YAHOO.namespace( 'myNamespace' );

This will create a YAHOO.myNamespace object that can be used many different ways. You can assign a single function to it:

YAHOO.myNamespace = function() {};
 
YAHOO.myNamespace();

Or you can assign multiple functions to it (with private variables included) using the amazing Module Pattern:

YAHOO.myNamespace = function() {
	var myPrivateVariable;
 
	return {
		myFirstFunction: function() { return myPrivateVariable; },
		mySecondFunction: function() {}
	}
}();
 
var hisOrHerPrivateVariable = YAHOO.myNamespace.myFirstFunction();
YAHOO.myNamespace.mySecondFunction();

Did you know that you can pass multiple arguments into YAHOO.namespace? I’ve been using YUI all this time and didn’t know about this feature. But the more I think about it, the more I doubt it’s usefulness. When are you going to declare two unrelated namespaces adjacently in code? For example, doing this is redundant in YUI:

YAHOO.namespace( 'myNamespace' );
YAHOO.namespace( 'myNamespace.myNestedNamespace' );

The second call to YAHOO.namespace will reuse ‘myNamespace’ if it exists, and create it if it doesn’t. But the point here is that you can do something like the following:

YAHOO.namespace( 'myNamespace', 'myOtherNamespace' );

which will create YAHOO.myNamespace and YAHOO.myOtherNamespace, and return a reference to the last one created, in this case YAHOO.myOtherNamespace.

Here’s the code from this nice little function:

YAHOO.namespace = function() {
    var a=arguments, o=null, i, j, d;
    for (i=0; i<a .length; i=i+1) {
        d=a[i].split(".");
        o=YAHOO;
 
        // YAHOO is implied, so it is ignored if it is included
        for (j=(d[0] == "YAHOO") ? 1 : 0; j<d.length; j=j+1) {
            o[d[j]]=o[d[j]] || {};
            o=o[d[j]];
        }
    }
 
    return o;
};

1. var a=arguments: They’re iterating over the arguments passed into the function to declare multiple simultaneously. Arguments is the variable passed into every function that you can use if you want to handle a variable number of arguments. You can also declare a few arguments in the function( myArg ) and use the arguments variable if you want.
2. j=(d[0] == "YAHOO") ? 1 : 0 They reuse the YAHOO top level object if not explicitly included into the declaration. Start the index at 1 if YAHOO was declared to skip defining it twice.
3. o[d[j]]=o[d[j]] || {}; They reuse existing namespaces if they have already been created. The OR || declaration means that Javascript will use {} (an empty object) if o[d[j]] is undefined.
]]> http://www.zachleat.com/web/yui-code-review-yahoonamespace/feed/ 4