duda al ordenar código javascript

[refreegrata]

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.

[refreegrata]

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.

[_cronos2]

Yo cambiaría el código de esta forma:

Código Javascript:

var espacio = (function(){
 var variables = {
  'a' : 'b',
  'c' : 'd',
  'e' : 'f'
  // ...
 };
 
 variables.extender = function(key, valor){ this[key] = valor; return this; };
 
 return variables;
})();
 
espacio.a; // "b"
espacio.extender('g', 'h');
espacio.g; // "h"
 

Saludos (:

[refreegrata]

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.

[_cronos2]

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 (:

[refreegrata]

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
     }
}();

[_cronos2]

Ah, vale, creo que ahora sí te he entendido. Volviendo al ejemplo anterior:

Código Javascript:

var espacio = (function(){
 var variables = {
  'a' : 'b',
  'c' : 'd',
  'e' : 'f'
  // ...
 };
 
 return {
  'extender' : function(key, valor){ variables[key] = valor; return this; },
  'verVariables' : function(){
   for(var prop in variables){
    variables.hasOwnProperty(prop) && console.log(prop, variables[prop]);
   }
   return this;
  }
  // ...
 };
})();
 
// Quiero añadir propiedades/métodos privados
 
espacio.extender('privado', [1, 2, 3, true, {}, 'abc']);
 
//  Quiero añadir propiedades/métodos públicos
 
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 (:

[refreegrata]

OK, gracias, voy a estudiar un poco más a fondo tú código, para tratar de comprender la función "verVariables". Saludos.

[_cronos2]

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:

var obj = { 'prop' : 'valor' };
obj.hasOwnProperty('prop'); // true
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:

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 (:

[Aijoona]

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.

[refreegrata]

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.

[Aijoona]

Siempre va a llamar al metodo interno ya que tiene precedencia de ejecución por el scoping. Te recomiendo buscar y leer sobre clousures.

[zerokilled]

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.

[refreegrata]

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.

[zerokilled]

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);
}

[refreegrata]

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.