namespace - ¿Hay una forma "concisa" de hacer espacios de nombres en JavaScript?

javascript this

Question

Frecuentemente he encontrado sitios que ponen todos sus javascript dentro de una estructura de "espacio de nombres" a lo largo de las líneas de

namespaces = { com : { example: { example.com''s data} }

Pero configurarlo de forma segura con respecto a otros marcos de espacio de nombres parece requerir una cantidad relativamente considerable de código (definido como> 2 líneas). Me preguntaba si alguien sabe de una forma concisa de hacer esto. y si hay una forma relativamente estándar / consistente para estructurarlo? p.ej. ¿El espacio de nombres "com" está directamente conectado al objeto global, o está conectado a través de un objeto de espacio de nombres?

[Editar: whoops, obviamente {com = { ... } } no lograría nada cerca de lo que pretendía, gracias a Shog9 por señalar eso. :RE]

Answer 1

Aquí hay un interesante artículo de Peter Michaux sobre el Espacio de nombres de JavaScript . Discute tres tipos diferentes de espacios de nombres de JavaScript:

1. Prefijo de espacios de nombres
2. Espaciado de nombres de un solo objeto
3. Espacio de nombres de objetos anidados

No voy a plagiar lo que dijo aquí, pero creo que su artículo es muy informativo.

Peter llegó incluso a señalar que hay consideraciones de rendimiento con algunos de ellos. Creo que sería interesante hablar sobre este tema al considerar que los nuevos planes ECMAScript Harmony han dejado de lado los planes 4.0 para el espaciado y el empaquetado de nombres.

Answer 2

Como alternativa a un punto o un carácter de subrayado, puede usar el carácter de signo de dólar:

var namespaces$com$example = "data"; 

Answer 3

Intento seguir la convención de Yahoo de incluir un objeto monoparental en el alcance global para contener todo;

var FP = {};
FP.module = {};
FP.module.property = ''foo'';

Answer 4

Javascript no tiene espacios de nombres independientes. Tiene funciones que pueden proporcionar el alcance para resolver nombres y objetos, que pueden contribuir a los datos nombrados accesibles en un ámbito determinado.

Aquí está su ejemplo, corregido:

var namespaces = { com: { example: { /* example.com''s data */ } } }

Este es un namespaces variables a los que se les asigna un objeto literal. El objeto contiene una propiedad: com , un objeto con una propiedad: example , un objeto que presumiblemente contendría algo interesante.

Por lo tanto, puede escribir algo como namespaces.com.example. somePropertyOrFunctionOnExample y todo funcionará. Por supuesto, también es ridículo. No tiene un espacio de nombre jerárquico, tiene un objeto que contiene un objeto que contiene un objeto con las cosas que realmente le interesan.

var com_example_data = { /* example.com''s data */ };

Eso funciona igual de bien, sin la jerarquía inútil.

Ahora , si realmente desea construir una jerarquía, puede intentar algo como esto:

com_example = com_example || {};
com_example.flags = com_example.flags || { active: false, restricted: true};

com_example.ops = com_example.ops || (function()
    {
       var launchCodes = "38925491753824"; // hidden / private
       return {
         activate: function() { /* ... */ },
         destroyTheWorld: function() { /* ... */ }
       };
    })();

... que es, en mi humilde opinión, razonablemente conciso.

Answer 5

La biblioteca de la biblioteca YUI tiene un código que maneja el espacio de nombres usando una función que puede ser preferible. Otras bibliotecas pueden hacer esto también.

Answer 6

Me gusta también esto ( fuente ):

(function() {
    var a = ''Invisible outside of anonymous function'';
    function invisibleOutside() {
    }

    function visibleOutside() {
    }
    window.visibleOutside = visibleOutside;

    var html = ''--INSIDE Anonymous--'';
    html += ''<br/> typeof invisibleOutside: '' + typeof invisibleOutside;
    html += ''<br/> typeof visibleOutside: '' + typeof visibleOutside;
    contentDiv.innerHTML = html + ''<br/><br/>'';
})();

var html = ''--OUTSIDE Anonymous--'';
html += ''<br/> typeof invisibleOutside: '' + typeof invisibleOutside;
html += ''<br/> typeof visibleOutside: '' + typeof visibleOutside;
contentDiv.innerHTML += html + ''<br/>'';​

Answer 7

Para asegurarse de que no sobrescribe un objeto existente, debe hacer algo así como:

if(!window.NameSpace) {
    NameSpace = {};
}

o

var NameSpace = window.NameSpace || {};

De esta forma, puede poner esto en la parte superior de cada archivo en su aplicación / sitio web sin preocuparse por sobrescribir el objeto de espacio de nombres. Además, esto le permitirá escribir pruebas unitarias para cada archivo individualmente.

Answer 8

Utilice un literal de objeto y el objeto this o el nombre explícito para hacer el espacio de nombres basado en las propiedades de hermanos de la variable local que contiene la función. Por ejemplo:

var foo = { bar: function(){return this.name; }, name: "rodimus" }
var baz = { bar: function(){return this.name; }, name: "optimus" }

console.log(foo.bar());
console.log(baz.bar());

O sin la propiedad de name explícito:

var foo = { bar: function rodimus(){return this; } }
var baz = { bar: function optimus(){return this; } }

console.log(foo.bar.name);
console.log(baz.bar.name);

O sin usar this :

var foo = { bar: function rodimus(){return rodimus; } }
var baz = { bar: function optimus(){return optimus; } }

console.log(foo.bar.name);
console.log(baz.bar.name);

Utilice las funciones del constructor RegExp o Object para agregar propiedades de nombre a variables de contador y otros nombres comunes, luego use una prueba hasOwnProperty para realizar la comprobación:

 var foo = RegExp(/bar/);
 
/* Add property */
foo.name = "alpha";

document.body.innerHTML = String("<pre>" + ["name", "value", "namespace"] + "</pre>").replace(/,/g, "&#09;");

/* Check type */
if (foo.hasOwnProperty("name")) 
  {
  document.body.innerHTML += String("<pre>" + ["foo", String(foo.exec(foo)), foo.name] + "</pre>").replace(/,/g, "&#09;");
  }

/* Fallback to atomic value */
else 
  {
  foo = "baz";
  }

var counter = Object(1);

/* Add property */
counter.name = "beta";

if (counter.hasOwnProperty("name")) 
  {
  document.body.innerHTML += String("<pre>" + ["counter", Number(counter), counter.name] + "</pre>").replace(/,/g, "&#09;");
  } 
else 
  {
  /* Fallback to atomic value */
  counter = 0;
  }

El DOM utiliza la siguiente convención para el espacio de nombres de definiciones de interfaz de elementos HTML y SVG:

• HTMLTitleElement
• SVGTitleElement
• SVGScriptElement
• HTMLScriptElement

El núcleo de JavaScript usa prototipos para el espacio de nombres del método toString como una forma simple de polimorfismo.

Referencias

• ¿Javascript autobox?
• Obtener el valor de hermanos de la clave en un objeto de JavaScript literal
• MDN: operadores de JavaScript: esto como un método de objeto
• Lua: nota técnica 7 - Módulos y paquetes
• HTMLTitleElement.webidl
• SVGTitleElement.webidl
• SVGScriptElement.webidl
• HTMLScriptElement.webidl
• Los nombres de las funciones en ES6
• Especificación de idioma de ECMAScript 2015 - 19.2.4.2 Instancias de función: nombre | ECMA-262 6ª edición