It is a good practice to not pollute the global “namespace” (ie window in browsers) when creating JavaScript code, especially if it is to be reusable, to avoid collisions with other bits of code that may be used on a page. It is common to use objects as namespaces. You can say window.myLibrary = {} and then add whatever you want to that object with confidence of no collisions with other libraries as long as myLibrary isn’t taken. Larger libraries will often have a namespacing function that will manage the creation of these namespaces, allowing them to be accessed if they already exist or created and then accesed if not, and easily handling multiple levels of depth. A simple example may look like the following:
namespace = function(_namespace, _scope){
if(!_scope){
_scope = window;
}
var _currentScope = _scope;
var _identifiers = _namespace.split('.');
for(var _i = 0; _i < _identifiers.length; ++_i){
var _identifier = _identifiers[_i];
if(!_currentScope[_identifier]){
_currentScope[_identifier] = {};
}
_currentScope = _currentScope[_identifier];
}
return _currentScope;
}
Then you can do something like:
ns = namespace('myLibrary.mySubNameSpace');
jQuery.extend(ns, {
'component1': function(){}
,'component2': function(){}
});
I’ve been doing the more manual approach for my library, but have been desiring for a while to get more organized and streamline repetition by adding my own namespace function. I got to thinking about doing more with the namespace objects, so that they can perform operations on themselves once created. For example, they might be able to create and return sub-namespaces as well as easily extend themselves.
Continue reading post "JavaScript: Callable namespaces and other namespacing options"