Aprendiendo Ext JS 3

Paquetes y namespace Más videos

Descripción del tema

Es importante tener en cuenta que otros desarrolladores o usuarios pueden utilizar nuestro código, además de que necesitamos crear código que pueda ejecutarse con alguna otra librería sin tener ningún problema. En mi experiencia me ha tocado trabajar en proyectos donde las variables están declaradas en el “global scope” generando problemas realmente extraños y difíciles de rastrear, es en esos momentos cuando te das cuenta de la importancia de empaquetar nuestras aplicaciones. JavaScript no tiene un palabra reservada que nos permita empaquetar nuestros objetos como en lenguajes Java o C#, pero tomando en cuenta que los objetos pueden alojar otros objetos podemos solucionar este problema de la siguiente manera.
//Se crea el objeto com
var com = {};
//se le agrega el objeto quizzpot
com.quizzpot = {};
//se crea el "paquete" 
com.quizzpot.tutorial = {};
//Se agrega un constructor de objetos
com.quizzpot.tutorial.Person = function(options){
	this.name = options.name;
}
//se crea una instancia
var p = new com.quizzpot.tutorial.Person({name:'John'});
//se imprime en consola
console.debug(p);
De esta manera se crea un espacio robusto de nombres, con esto nos evitaremos que alguien más cree un objeto “Person” y sobrescriba el nuestro. Si cada vez que creamos una función constructora creamos todo el paquete podemos sobrescribir paquetes existentes, para evitar esto debemos verificar si el paquete ya existe, de ser así utilizar el existente y agregar los que sean necesarios, eso lo hacemos de la siguiente manera:
//verificamos si existe la variable "com" para usarla, 
//si no existe creamos un objeto vacío
var com = com || {};
//hacemos el mismo procedimiento
com.quizzpot = com.quizzpot || {}; 
com.quizzpot.tutorial = com.quizzpot.tutorial || {};

//creamos el constructor del objeto
com.quizzpot.tutorial.User = function(options){
	this.nickname = options.nickname;
}

//se crea una instancia
var p = new com.quizzpot.tutorial.Person({name:'John'});
var u = new com.quizzpot.tutorial.User({nickname:'stock'});
//se imprime en consola
console.debug(u);
console.debug(p);
Para evitar todo el proceso de comparar la existencia de los objetos a la hora de formar los paquetes, podemos utilizar una herramienta de Ext JS, de la siguiente manera:
Ext.namespace('com.quizzpot.tutorial');
//o bien el siguiente atajo
Ext.ns('com.quizzpot.tutorial');
De esta manera creamos el paquete deseado y si existe no lo sobrescribe, simplemente utiliza el anterior.

Conclusiones

Aunque en JavaScript no exista una palabra reservada para crear paquetes, como es el caso de otros lenguajes, si podemos implementar esta técnica ya que sí se puede alojar un objeto dentro de otro objeto. Es importante recordar que al definir el nombre de los "paquetes", debemos verificar si existen para no sobreescribirlos. Cualquier sugerencia, duda o comentario es bienvenido y por supuesto los votos en Digg o en tu red social favorita.

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

Este tutorial pertenece al curso Aprendiendo 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?

11Comentarios

  • Avatar-8 jairo 23/09/2009

    Es muy importante, para cuando se esta empezando, uno ve los ejemplos y se pregunta para que es la instrucción Ext.ns('com.quizzpot.tutorial'); . Saludos y gracias.

    • Avatar-1 José 31/10/2009

      Hola Esta super chido esta web ... siguiendo con el tema me perguntaba que codigo seguiria despues de hacer la declaracion del paquete Ext.namespace('com.quizzpot.tutorial'); tendria que ir el constructor me imagino !!

      • Avatar-8 Crysfel 02/11/2009

        Después de declarar el namespace ("paquete"), tienes que escribir tus objetos usando tu paquete que creaste.

        • Avatar-8 Rodrigo 12/01/2010

          Estimado, tengo una duda, resulta que estoy desarrollando una aplicacion y esta esta repartida en varios archivos, ahora lo que necesito es saber como dejar todos esos objetos que estan en distintos archivos integrados en el mismo namespace. de antemano muchas gracias y felicitaciones por el aporte que haces a la comunidad

          • Avatar-6 Croston 16/04/2010

            Hola estimado Crysfel, yo queria saber si no falta el constructor en el anteúltimo ejemplo, para crear una instancia con el objeto com.quizzpot.tutorial.Person. Saludos y gracias.

            • Avatar-5 Crysfel 16/04/2010

              El objeto Person se creo en la linea 8 del primer ejemplo ;) Saludos

              • Avatar-9 Michael 29/09/2010

                Hola Crisfel, mira tengo una duda, estoy desarrollando una pagina la cual contiene varios grids y cada grid cuenta con su mantenimiento, pero el codigo ya se me esta haciendo algo tedioso de entenderlo, lo que me gustaria es tener por separado (en diferentes archivos) cada uno de los grids con su mantenimiento, pero no se si despues sera posible llamarlos o como hacerlo. Gracias de antemano por tu ayuda Saludos

                • Avatar-2 Crysfel 04/10/2010

                  Lo que tienes que hacer es desarrollar modularmente, creando objetos y cargandolos dinámicamente bajo demanda.

                  • Avatar-9 yesica 23/01/2012

                    hola, son buenos tus tutoriales , pero tengo un problema al visualizarlos, el codigo de ejemplo no se ve completo, solo puedo ver las palabras function, this, new,var, no se si sea mi navegador, pero con ese problema no pude entender la informacion de los tutoriales ya que no se ve el codigo

                    • Avatar-3 Yenci 28/06/2012

                      Hola Crysfel, me estoy iniciando con extjs y te felicito por tan excelente pagina y muy didactico tutorial , la verdad en el poco tiempo que estado leyendolo me ha ayudado muchisimo a aprender, ahora de casualidad tendras un link de algun ejemplo donde pueda observar claramente lo de cargar los objetos dinamicamente bajo demanada

                      • Avatar-5 Crysfel 29/06/2012

                        Aquí tienes un tuto de como realizar la carga dinámica con Ext4 http://www.quizzpot.com/2011/10/carga-de-clases-dinamicamente-con-extjs-4/

                        Instructor del curso

                        Crysfel3

                        Autor: Crysfel Villa

                        Es ingeniero de software con más de 7 años de experiencia en desarrollo web.

                        Descarga Código Fuente

                        Regístrate a este curso

                        Este tutorial pertenece al curso Aprendiendo 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.