Paquetes y namespace Más videos
Descripción del tema
//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.
Instructor del curso
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.
11Comentarios
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.
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 !!
Después de declarar el namespace ("paquete"), tienes que escribir tus objetos usando tu paquete que creaste.
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
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.
El objeto Person se creo en la linea 8 del primer ejemplo ;) Saludos
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
Lo que tienes que hacer es desarrollar modularmente, creando objetos y cargandolos dinámicamente bajo demanda.
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
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
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/