Blog

In my experience I’ve had the chance to work in projects where the variables were declared in the “global scope” which caused really weird and hard-to-track issues, this is the moment when you realize how important it is to package your applications.

JavaScript doesn’t have a keyword that allows us to package objects like Java or C#, but since the objects can store other objects then we can solve this problem by writing the following code:

//Creating the object com
var com = {};
//Adding it to the object quizzpot
com.quizzpot = {};
//Creating the "package"
com.quizzpot.tutorial = {};
//Adding a constructor
com.quizzpot.tutorial.Person = function(options){
	this.name = options.name;
}
//Creating an instance
var p = new com.quizzpot.tutorial.Person({name:'John'});
//Displaying it in the console
console.debug(p);

The previous example shows how we can create a strong namespace, if we “package” our objects we will avoid future complications like someone else creating an object “Person” and overwriting our object.

If every time we create a constructor we create the whole package we can overwrite existing packages, so in order to avoid that we will verify if the package already exists, if this is the case then we will use it and add what we need in that package.

//Verifying if the variable "com" exists in order to use it,
//if it doesn't exists we create an empty object
var com = com || {};
//and add it to the object "quizzpot"
com.quizzpot = com.quizzpot || {};
com.quizzpot.tutorial = com.quizzpot.tutorial || {};

//Creating the constructor of the object
com.quizzpot.tutorial.User = function(options){
	this.nickname = options.nickname;
}

//Creating an instance
var p = new com.quizzpot.tutorial.Person({name:'John'});
var u = new com.quizzpot.tutorial.User({nickname:'stock'});
//displaying it in the console
console.debug(u);
console.debug(p);

To avoid the whole process of comparing the existence of the objects when we form the packages, we can use a tool that Ext JS has:

Ext.namespace('com.quizzpot.tutorial');
//or you can use the shortcut
Ext.ns('com.quizzpot.tutorial');

In this way we are creating the package we need and if it exists it won’t be overwritten because we’ll be using the existing one.

Conclusions

Although there is not a keyword to create packages in JavaScript, like the other languages, we can still use this technique because it allows us to store an object inside of another object. It is important to remember that when you define the name of the “package”, you need to verify if it exists so you won’t overwrite it.

As always, if you have any questions or suggestions don’t forget to leave them in the comment’s section and if you like this post vote for us in Digg or you favorite social network.