Learning Ext JS 3

Packages and namespace Más videos

Descripción del tema

It's important to remember that other developers or users could be using our code, that means we need to create code that can be run with other libraries without a problem. 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.

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso Learning Ext JS 3, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!

Si no gustas registrarte en este momento no es necesario! Aún así puedes recibir los nuevos tutoriales en tu correo! Jamás te enviaremos Spam y puedes cancelar tu suscripción en cualquier momento.

¿Olvidaste tu contraseña?

2Comentarios

  • Avatar-5 Danny 13/06/2010

    Thanks for the great posts. I was wondering how you can actually unset the namespace and objects when you are done with them? In php you have the unset function to release the memory and many other languages have such facility but I can't seem to find anything in javascript. Thanks

    • Avatar-12 Crysfel 14/06/2010

      You can use the "delete" method, here's an example: <pre name="code" class="javascript"> var x = 10; delete x; </pre> Have fun.

      Instructor del curso

      Crysfel3

      Autor: Crysfel Villa

      Software engineer with more than 7 years of experience in web development.

      Descarga Código Fuente

      Regístrate a este curso

      Este tutorial pertenece al curso Learning Ext JS 3, revisa todos los tutoriales que tenemos en este mismo curso ya que están en secuencia y van de lo más sencillo a lo más complicado.

      Tendrás acceso a descargar los videos, códigos y material adicional.

      Podrás resolver los ejercicios incluidos en el curso así como los Quizzes.

      Llevarás un registro de tu avance.