Javascript de espacio de nombres

Deseo hacer que mi javascript sea más modular al dividirlo en diferentes archivos y dar a cada archivo un espacio de nombres ‘sub’ como tal.

subA.js

if(typeof ex == "undefined") { var ex = {}; } ex.subA = function() { //all functions of subA here } 

Y lo mismo para subB etc.

En este momento tengo 1 archivo, ex.js

 var ex = (function() { //private vars/funcs return { //public vars/funcs } })(); 

Parece que debería mover la mayoría de mis funciones a subA.js y subB.js pero aún así incluir ex.js al principio, con subA.js y subB.js después.

Tengo un número de preguntas.

  1. Me está costando mucho recordar cómo hice el archivo de espacio de nombre inicial, ej.js. Parece que la función anónima está ahí para hacer que todo sea privado inicialmente, pero no puedo recordar por qué debe estar entre paréntesis y luego ejecutarse de inmediato con el (); al final.

  2. Siguiendo con q1, ¿deberían estar mis subarchivos en el mismo formato que ex.js, es decir, tener la función anon envuelta entre paréntesis y ejecutada de inmediato?

  3. Parece que los subarchivos solo tendrán acceso a las funciones públicas de ex , ¿es esto cierto? Si es así, ¿cómo puedo permitir que mis subarchivos accedan también a las funciones privadas?

  4. En mi archivo HTML, en mi función document.ready (jQuery), debería estar inicializando una variable o puedo llamar a cada función individualmente yendo

  $ (documento) .ready (función () {
     ex.doAlgo ();
     ex.doSomethingElse ();
 } 

¿Hay diferencia entre los dos? Creo que cuando se incluye ex.js, se crea una variable global ex de inmediato (debido a que la función anónima se ejecuta de inmediato), por lo que no debería necesitar volver a definirla en document.ready.

  1. Es la primera sentencia if en subA.js diferente de var ex = ex || {}; var ex = ex || {}; ¿Cual es mejor?

  2. ¿Qué estándares de estilo de código js usas?

Si lees todo esto, ya mereces un voto positivo, saludos.

1. La function(){ return{}} es un cierre para agregar “privacidad” a las variables y funciones a las que no desea que se pueda acceder en ningún otro lugar, pero dentro del scope de esa función. Los paréntesis alrededor de la función (function(){}) crean una expresión de función. Se utilizan, porque el analizador se quejará cuando intente ejecutar una función inmediatamente function(){}() sin pasar ningún argumento a () .

2. Si desea que subA o cualquier otro objeto que se extienda tenga sus propias subfunciones, entonces sí, tiene que declararlo así, pero no necesariamente un cierre.

Tu puedes hacer

 ex.subA = function(x, y){ return x+y; } 

que puede llamarse var sum = ex.subA(2, 3);

O puedes hacer

 ex.subA = (function(){ return { add: function(x, y){ return x+y; }, multiply: function(x, y){ return x*y; } } })(); 

Luego llámalo var sum = ex.subA.add(2, 3); var multiplication = ex.subA.multiply(2,3); var sum = ex.subA.add(2, 3); var multiplication = ex.subA.multiply(2,3);

Hay muchas maneras de hacer esto.

3. Sí, es cierto. Puedes hacer públicas las funciones privadas. El cierre no permitirá ninguna otra forma de hacerlo.

4. Si desea un alias, sí, puede asignarlo a una variable. Sin embargo, no hay necesidad de hacerlo. Funcionará bien de la manera en que lo estás describiendo.

Lea los Patrones Esenciales de Espacios de Nombres de JavaScript para entender algunos fundamentos y patrones en el espacio de nombres de JavaScript.


Es la primera sentencia if en subA.js diferente de var ex = ex || {}; ¿Cual es mejor?

Primero, la instrucción if debe ser if(typeof ex == 'undefined') , el typeof devuelve una cadena. No hay ninguna necesidad de comprobar si ex es falso.

Sí, es diferente. La instrucción if no realizará ninguna asignación de variable si la variable ex ya está definida. Por lo tanto, la sentencia if es mejor.

¿Qué estándares de estilo de código js usas?

Depende del scope del proyecto, pero la mayoría de los objetos profundos se extienden con una función auxiliar.

En su diseño, no tendrá acceso a vars / funcs privados definidos en esa función lambda, ya que solo devuelve un objeto o quiere usar un new ?

1.Sin el () , ex es una función, no el objeto que devuelve la función.

2.no es necesario, excepto que desea pasar algunos parámetros para la inicialización. p.ej

 ex.my = (function(name) {var my_name = name;})('bar'); 

3. Creo que te refieres a este método privado.

 ex = (function() { var foo = 'bar'; return { show: function() {alert(foo);} } })(); 

En el caso anterior, solo ex puede acceder a foo.

4.no es necesario, se llama a $(document).ready() cuando todo está listo, si ya cargó ex.js, la inicialización ha finalizado.

Todo lo que contiene se cargará tan pronto como se cargue el DOM y antes de que se cargue el contenido de la página

Para las preguntas 1 y 3:

Una definición de estilo de cierre en el ex.js permitirá esas funciones públicas y vars / expuestas.

Mi pensamiento es que es mejor devolver “ex” de la función anómala con las funciones y vars que necesitamos exponer.

para Q3. Esas variables (privadas) definidas y utilizadas en la función devuelta todavía están disponibles para la función y se pueden usar a través de la función expuesta (propiedad de cierre).

Si el script externo incluido está en la sección o en la parte superior del archivo, el ex debería estar disponible antes de document.ready y debería poder utilizarse de inmediato.

Me estás haciendo pensar 🙂 Actualizaré la publicación a medida que profundizo en esto. Muy buenas preguntas. 🙂

Intereting Posts