Sunday, November 2, 2014

Implement namespace in JavaScript


JavaScript doesn't provide any language feature for creating and managing modules. Namespace is very important concept to prevent collisions. 

Namespace is very important specially when you are writing open source module or public APIs, There's lot of possibility that two modules define global properties with the same name, and module overrides the properties of another and one or both module do not work as expected.


Lets do some hands-on, we may create simple namespace like this

var myModule = {};

myModule.func1 = function() {
 // code goes here

But there could be possibility that any one define the same name for his/her modoule. Huh..:(

I would suggest we should follow the same convention as we do in other programming languages like Java and C#

var com = {};
com.companyName= {};
com.companyName.projectName= {};

Okay.. Looks fine. but what will happen if you include another JavaScript file which already define "com" namespace and some properties. Boom!!!. We already overwrites all the properties define under "com", which we really do not want. Let's avoid overriding the "com" namespace.

var com = com || {};
com.companyName= {};
com.companyName.projectName= {};

Still we are not in safe position, I am giving time to you think about it.

Any Idea? :)

Hmm. I hope you already got the clue and reached there. Yes, you are absolutely right. If we include two different libraries from the same company then we may override other libraries properties because it is also defines in the same namespace "companyName",

var com = com || {};
var com.companyName =  com.companyName || {};
var com.companyName.projectName = {};

Hmm. You might be thinking about check for "projectName" too. Don't worry, we are safe here for project name because two project with same name shouldn't run in the same company. If two projects are running with same name but definitely they won't be release in public domain. But Just to be on safe side, adding check for "projectName" won't create any problem in code. Please add it.

Now we are ready to add our new function in our module.

com.companyName.projectName.myFucntion = function() {
      // code goes here

So far so good, Let's wrap into a handy function so that anyone can use it.

function createNamespace(companyName, projectName) {
    var namespace = com;
    // project may define in some other script file
namespace[companyName] = namespace[companyName] || {};
    return namespace[companyName][projectName] = {};

This is the right way to use without overriding com object. Please define com object in your script and make sure check if it is exist or not.

var com = com || {};

var serachEngine = createNamespace("Google", "SearchEngine");

Now, it is easy to define your function = function() {
      // code goes here

Hope it will help you to organize your project in multiple files.

Thanks for your time, Please leave your comment for improvements.

No comments:

Post a Comment