Foros del Web » Programando para Internet » Javascript »

duda al ordenar código javascript

Estas en el tema de duda al ordenar código javascript en el foro de Javascript en Foros del Web. Hola lista. Tengo una duda. Quiero ordenar un poco mi código y he estado leyendo acerca del namespacing en Javascript, pero la verdad no me ...
  #1 (permalink)  
Antiguo 26/07/2011, 07:52
 
Fecha de Ingreso: agosto-2008
Mensajes: 198
Antigüedad: 13 años, 11 meses
Puntos: 27
duda al ordenar código javascript

Hola lista. Tengo una duda. Quiero ordenar un poco mi código y he estado leyendo acerca del namespacing en Javascript, pero la verdad no me queda muy claro.
Por ejemplo, con Mootools yo defino una clase de la siguiente forma:

Código:
Miclase = New Class({...});
Sin embargo esta no es una pregunta de Mootools, si no de Javascript. Viendo una función de un 3ero veo que el hizo esto:

Código:
(function(){
   Miclase = New Class({...});
})();
1) Mi pregunta es ¿que ventajas pudo haber tenido englobar la clase bajo una funcion ejecutada autoejecutada?

2) Si definiera varias clases y/o funciones en el namespace y quisiera interactuar entre ellas ¿debería llamarlas con this?

3) ¿Puedo declarar clases o funciones en distintos archivos js y hacerlos participes del mismo namespace?

En general son preguntas que con algo de lectura debiera resolver, pero la verdad es que, aunque investigo (googleo), no me queda del todo claro.

Saludos.
  #2 (permalink)  
Antiguo 26/07/2011, 08:40
 
Fecha de Ingreso: agosto-2008
Mensajes: 198
Antigüedad: 13 años, 11 meses
Puntos: 27
Respuesta: duda al ordenar código javascript

Creo que me va que dando algo más claro. Para pruebas hice esto:
Código:
var espacio = function () {
     var variable = 'variable_externa';
     var metodo = function() { return 'f:'+variable; }
     var Clase = new Class({
          initialize:function(parametro) {
               this.variable = 'variable_interna ' + parametro;
          },
          retornar_variable_externa:function() {
               return 'c:'+variable;
          },
          retornar_funcion_externa:function() {
               return 'c:'+metodo();
          },
          retornar_variable_interna:function() {
               return 'c:'+this.variable;
          },
          retornar_variables:function() {
               return this.retornar_variable_externa() + ' ' + this.retornar_variable_interna();
          }
     });
     return {
          metodo: metodo,
          Clase: Clase
     }
}();
La clase al interior de espacio está hecha con Mootools y si quiero llamar a metodo
Código:
espacio.metodo();
y si quiero crear un objeto del tipo Clase:
Código:
var objeto= new espacio.Clase('parametro');
Lo que aún no tengo claro es :si quiero nutrir a espacio con más funciones de otros archivos js, ¿como lo haría?
Saludos.
  #3 (permalink)  
Antiguo 26/07/2011, 08:54
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 12 años
Puntos: 310
Respuesta: duda al ordenar código javascript

Yo cambiaría el código de esta forma:
Código Javascript:
Ver original
  1. var espacio = (function(){
  2.  var variables = {
  3.   'a' : 'b',
  4.   'c' : 'd',
  5.   'e' : 'f'
  6.   // ...
  7.  };
  8.  
  9.  variables.extender = function(key, valor){ this[key] = valor; return this; };
  10.  
  11.  return variables;
  12. })();
  13.  
  14. espacio.a; // "b"
  15. espacio.extender('g', 'h');
  16. espacio.g; // "h"
Saludos (:
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red
  #4 (permalink)  
Antiguo 26/07/2011, 09:31
 
Fecha de Ingreso: agosto-2008
Mensajes: 198
Antigüedad: 13 años, 11 meses
Puntos: 27
Respuesta: duda al ordenar código javascript

Gracias por responder. Con respecto al código que pusiste ¿que ventajas tiene en comparación al que yo expuse?, es que el posteado por mí parece más ordenado y legible y me cuesta ver que mejoras propone el tuyo. Bueno, esta la función extender que me permite precisamente extender la variable "variables", pero mi pregunta no era esa. Si no más bien como añadir más funciones y/o clases a "espacio", que pudieran hacer cualquier operación (no sólo el return de una varible, pues eso sólo era un ejemplo).

Saludos.

P.D.: El código expuesto era sólo de ejemplo, realmente no me sirve de nada, por eso los métodos no parecen muy útiles.
  #5 (permalink)  
Antiguo 26/07/2011, 09:42
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 12 años
Puntos: 310
Respuesta: duda al ordenar código javascript

Igual no te estoy entendiendo del todo, pero creo que lo que quieres es poder extender un objeto dentro de un closure, con el código que he puesto puedes hacerlo.
Si a lo que quieres es poder hacerlo con variables sueltas en vez de tener que usar un objeto, yo no sé cómo hacerlo, porque las variables serían globales.
Saludos (:
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red
  #6 (permalink)  
Antiguo 26/07/2011, 10:00
 
Fecha de Ingreso: agosto-2008
Mensajes: 198
Antigüedad: 13 años, 11 meses
Puntos: 27
Respuesta: duda al ordenar código javascript

Mira mi duda no es acerca de un problema en particular. Más bien es teórica. Para ordenar de mejor manera mi código me gustaría emular la técnica de los namespaces o módulos, paquetes de lenguajes como C, Python y otros, evitando así problemas como el conflicto debido a los nombres, etc. Al interior de un paquete pueden haber varios módulos y en estos últimos varias clases, funciones, variables, etc.
Según he leído se puede lograr algo parecido en Javascript usando patrones como Módulo y otros (Aquí por ejemplo hablan del tema). Mi duda es que al parecer dichas declaraciones se hacen dentro de un archivo y de una vez:
Código:
espacio = function() {
     ....
     return {
          ... // lo que quiero que sea público
     }
}();
Y si yo eventualmente quiesiera tomar "espacio" y crear y agregar más funciones (privadas y públicas) más adelante (en el mismo fichero y/o en otro archivo js)¿cómo podría hacerlo?¿se puede?

Esa es más o menos mi duda; no se si habrá quedado más claro.
Saludos.

Edición
--------
Bueno, que uno quisiese editar un namespace quizás sería poco frecuente, tal vez mejor sería crear uno nuevo que usase el anterior, algo como:
Código:
var espacio2 = function() {
     var Clase = new Class({
          Extends: espacio1.Clase,
               retornar_abc:function() {
                    return 'abc';
               }
     });
     return {
          Clase:Clase
     }
}();

Última edición por refreegrata; 26/07/2011 a las 10:23
  #7 (permalink)  
Antiguo 26/07/2011, 10:24
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 12 años
Puntos: 310
Respuesta: duda al ordenar código javascript

Ah, vale, creo que ahora sí te he entendido. Volviendo al ejemplo anterior:
Código Javascript:
Ver original
  1. var espacio = (function(){
  2.  var variables = {
  3.   'a' : 'b',
  4.   'c' : 'd',
  5.   'e' : 'f'
  6.   // ...
  7.  };
  8.  
  9.  return {
  10.   'extender' : function(key, valor){ variables[key] = valor; return this; },
  11.   'verVariables' : function(){
  12.    for(var prop in variables){
  13.     variables.hasOwnProperty(prop) && console.log(prop, variables[prop]);
  14.    }
  15.    return this;
  16.   }
  17.   // ...
  18.  };
  19. })();
  20.  
  21. // Quiero añadir propiedades/métodos privados
  22.  
  23. espacio.extender('privado', [1, 2, 3, true, {}, 'abc']);
  24.  
  25. //  Quiero añadir propiedades/métodos públicos
  26.  
  27. espacio.verPrivado = function(){ this.verVariables(); }
Sin embargo, al añadir propiedades o métodos públicos, estos no tienen acceso directo al interior del closure, aunque se les podría dar.
Saludos (:
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red
  #8 (permalink)  
Antiguo 26/07/2011, 11:17
 
Fecha de Ingreso: agosto-2008
Mensajes: 198
Antigüedad: 13 años, 11 meses
Puntos: 27
Respuesta: duda al ordenar código javascript

OK, gracias, voy a estudiar un poco más a fondo tú código, para tratar de comprender la función "verVariables". Saludos.
  #9 (permalink)  
Antiguo 26/07/2011, 11:45
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 12 años
Puntos: 310
Respuesta: duda al ordenar código javascript

Realmente no tiene mucho misterio, muestra en la consola todas las variables. Quizás lo que te confunde es la línea 13: hasOwnProperty verifica que una propiedad es propia del objeto, y no viene desde el prototipo. Es decir,
Código Javascript:
Ver original
  1. var obj = { 'prop' : 'valor' };
  2. obj.hasOwnProperty('prop'); // true
  3. obj.hasOwnProperty('valueOf'); // false
Porque valueOf es parte del prototipo de Object.
El operador && es el operador lógico AND. Supongo que lo habrás visto dentro de condicionales:
Cita:
if(cond1 && cond2 && cond3 ...)
Sin embargo, también se puede usar para evitar el propio if:
Código:
if(cond){ alert('algo'); }

// se puede abreviar

cond && alert('algo');
Debido al shortcircuit. Esto es, cuando usamos el operador &&, nada más se encuentre un valor false (o falsy), se devolverá ese valor (igual que si se usa || parará al encontrar cualquier valor que se pueda dar por true).
Entonces, si cond es verdadero, continuará para ver si el próximo valor es falso, y se ejecutará el alert, pero si es falso se devolverá false y se detendrá la ejecución.

Espero haberme explicado bien
Saludos (:
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red
  #10 (permalink)  
Antiguo 26/07/2011, 11:55
Avatar de Aijoona
Colaborador
 
Fecha de Ingreso: mayo-2011
Ubicación: Buenos Aires
Mensajes: 779
Antigüedad: 11 años, 2 meses
Puntos: 343
Respuesta: duda al ordenar código javascript

Código en español....yuck!

La idea básica es siempre tratar de mantener el contexto global lo menos contaminado posible, es por esto que siempre se trata de usar namespaces o clousures.

Si estás interesado en la estructura del código más que la sintaxis de los modulos, te diría que le pegues un ojo a Backbone y Spine, que son frameworks "model-view" que brindan una estructura de organización segun responsabilidades.
__________________
blog | @aijoona
  #11 (permalink)  
Antiguo 08/08/2011, 10:30
 
Fecha de Ingreso: agosto-2008
Mensajes: 198
Antigüedad: 13 años, 11 meses
Puntos: 27
Respuesta: duda al ordenar código javascript

Hola, tengo una nueva duda con respecto al tema. Si tengo un código como este
Código:
var metodo_1 = function() { return '1'; }
var espacio = function () {
     var metodo_1 = function() { return '2'; }
     var metodo_2 = function() { return metodo_1();}
     return {
        metodo_2:metodo_2
     }
}
Al interior del espacio tengo una funcion llamada metodo_2 que llama a metodo_1. Al menos en Firefox este retorna '2'. Bueno, eso es lo que quiero. Mi duda es si este debiera ser el comportamiento normal?, ¿como sabe que debe llamar a metodo_1 del interior de espacio y no al del exterior?

Para evitar errores hay ¿alguna manera de explicitar el llamado al interior o exterior del espacio? (Obviamente desde el interior, ya que desde afuera del espacio basta con espacio1.metodo_1)

Saludos.
  #12 (permalink)  
Antiguo 08/08/2011, 11:12
Avatar de Aijoona
Colaborador
 
Fecha de Ingreso: mayo-2011
Ubicación: Buenos Aires
Mensajes: 779
Antigüedad: 11 años, 2 meses
Puntos: 343
Respuesta: duda al ordenar código javascript

Siempre va a llamar al metodo interno ya que tiene precedencia de ejecución por el scoping. Te recomiendo buscar y leer sobre clousures.
__________________
blog | @aijoona
  #13 (permalink)  
Antiguo 08/08/2011, 11:15
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 13 años, 2 meses
Puntos: 1485
Respuesta: duda al ordenar código javascript

buenas @refreegrata,
lo que sucede en metodo_2 dentro de espacio es que se crea un closure. esto sucede por tres razones principales: porque hay una referencia a un objeto, dicha referencia ocurre dentro de un scope, y el elemento que hace referencia al objeto es devuelto o asignado a un contexto externo. javascript tiene un mecanismo de resolución de conflicto donde va buscando los identificadores (tokens) por un orden en el scope. en tu caso particular, javascript primero busca si metodo_1 esta definido en el mismo scope (dentro de la función metodo_2) y luego continua ascendiendo (dentro de la función espacio). como esta definido en espacio, entonces hace referencia a este. notese que las referencias se basan de acuerdo al contexto en que se definen y no en el contexto en que se invoca.

algunos artículos que te pueden ayudar, http://robertnyman.com/2008/10/09/ex...-and-closures/, http://jibbering.com/faq/notes/closures/.

nota: no he leido todos los mensajes por lo que no se muy bien que se ha discutido.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #14 (permalink)  
Antiguo 08/08/2011, 11:44
 
Fecha de Ingreso: agosto-2008
Mensajes: 198
Antigüedad: 13 años, 11 meses
Puntos: 27
Respuesta: duda al ordenar código javascript

Ok, gracias, me queda mucho más claro. Esto quiere decir que si no hubiera definido metodo_1 al interior del espacio habría intentado buscarla afuera.
Me queda una pequeña duda. Si un método al interior del espacio quisiese llamar a metodo_1 pero del exterior ¿es aquello posible?, algo así como:
Código:
var metodo_1 = function() { return 1; }
var espacio = function () {
     var metodo_1 = function() { return metodo_1 +1 ;//del exterior }
     var metodo_2 = function() { return metodo_1();}
     return {
        metodo_2:metodo_2
     }
}
Saludos.

Última edición por refreegrata; 08/08/2011 a las 11:52
  #15 (permalink)  
Antiguo 08/08/2011, 12:36
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 13 años, 2 meses
Puntos: 1485
Respuesta: duda al ordenar código javascript

repuesta corta: si y no. obviamente requiere una explicación. en cierta medida no es posible porque javascript no provee al autor de alguna sentencia o mecanismo para referirse a un scope en particular. si bien recuerdo, por ejemplo en actionscript (lenguaje que utiliza flash) se define un token _parent aparentemente para hacer referencia al scope padre donde se invoque. (nota: que alguien me corrija si este no es el propósito.) en los lenguajes basado en clases (no se si en todos) se define un token similar para hacer referencia a una clase que hereda. en cambio, en javascript no existe nada de estos conceptos.

en cierta medida es posible siempre y cuando el objeto que quieras hacer referencia sea visible o alcanzable para el autor. para hacer referencia a un objeto que tiene el mismo token pero definido en otro contexto, tendrías que indicar el camino hacia este. en javascript, la visibilidad esta particularmente limitada por los scope de las funciones. por ejemplo, si tienes una variable definida en una función, no es posible hacer referencia a ella a no ser que este en el mismo scope.
Código:
function foo(){
var bar = 'candy';
function baz(){
// baz puede acceder a bar porque esta en el orden de scope;
return bar;
}
}
// fuera del scope de foo no se puede acceder a bar porque la variable es local y es solo visible dentro del scope de foo;

// referencia a un objeto particular mientras sea visible;
function bar(){return 'bar definido en contexto global';}
function foo(){
function bar(){return 'bar definido en contexto de foo';}
return self.bar(); // invocando bar del contexto global;
// notese que primero se debe indicar donde esta definido el objeto, en este caso self indica el contexto global (lo mismo que window);
}
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #16 (permalink)  
Antiguo 08/08/2011, 12:44
 
Fecha de Ingreso: agosto-2008
Mensajes: 198
Antigüedad: 13 años, 11 meses
Puntos: 27
Respuesta: duda al ordenar código javascript

ok, gracias, ahora si estoy un poco más claro. Obviamente este tema tengo que estudiarlo más a fondo, ya que el conocimiento que poseo acerca del forma de trabajo que tiene Javascript es muy pobre. Saludos.

Etiquetas: código, js
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:19.