¿Existe una forma "concisa" de establecer espacios de nombres en JavaScript?

https://stackoverflow.com/questions/13021

08-06-2019
|

Pregunta

Con frecuencia me he encontrado con sitios que ponen todo su JavaScript dentro de un namespace estructura a lo largo de las líneas de:

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

Sin embargo, configurar esto de forma segura con respecto a otros marcos con espacios de nombres parece requerir una cantidad relativamente considerable de código (definido como > 2 líneas).Me preguntaba si alguien conoce una forma concisa de hacer esto.Además, ¿existe una forma relativamente estándar/consistente de estructurarlo?Por ejemplo, es el com ¿Espacio de nombres adjunto directamente al objeto global o está adjunto a través de un objeto de espacio de nombres?

[Editar:Ups, obviamente {com = { ... } } no lograría nada parecido a lo que pretendía, gracias a Shog9 por señalarlo.]

Solución

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

Aquí está su ejemplo, corregido:

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

Esta es una variable namespaces siendo asignado un objeto literal.El objeto contiene una propiedad: com, un objeto con una propiedad: example, un objeto que presumiblemente contendría algo interesante.

Entonces, puedes escribir algo como espacios de nombres.com.ejemplo.algunaPropiedadOFunciónEnEjemplo y todo funcionará.Por supuesto, también es ridículo.No tienes un espacio de nombres jerárquico, tienes un objeto que contiene un objeto que contiene un objeto con las cosas que realmente te interesan.

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

Eso funciona igual de bien, sin jerarquías inútiles.

Ahora, si realmente desear Para construir una jerarquía, puedes probar 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.

Otros consejos

Aquí había un interesante artículo de Peter Michaux sobre Espacio de nombres de Javascript.Analiza 3 tipos diferentes de espacios de nombres de Javascript:

Espacio de nombres de prefijo
Espacio de nombres de objeto único
Espacio de nombres de objetos anidados

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

Peter incluso llegó a señalar que existen consideraciones de rendimiento con algunos de ellos.Creo que sería interesante hablar de este tema considerando que los nuevos planes ECMAScript Harmony han eliminado los planes 4.0 para el espacio de nombres y el empaquetado.

Intento seguir la convención de Yahoo de crear un objeto principal único en el ámbito global para contener todo;

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

Para asegurarse de no sobrescribir un objeto existente, debería hacer algo como:

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

var NameSpace = window.NameSpace || {};

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

El Biblioteca YUI La biblioteca tiene un código que maneja el espacio de nombres mediante una función que puede resultarle preferible.Otras bibliotecas también pueden hacer esto.

Como alternativa a un punto o un guión bajo, puedes utilizar el carácter del signo de dólar:

var namespaces$com$example = "data";

También me gusta 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/>';

Utilice un objeto literal y el this objeto o el nombre explícito para hacer espacios de nombres basados en las propiedades hermanas 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 lo explícito name propiedad:

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

Utilizar el RegExp o Object funciones constructoras para agregar propiedades de nombre a variables de contador y otros nombres comunes, luego use un hasOwnProperty prueba para hacer la verificació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 definir espacios de nombres de interfaz de elementos HTML y SVG:

Elemento de título HTML
Elemento de título SVG
ElementoSVGScript
Elemento HTMLScript

El núcleo de JavaScript utiliza prototipos para crear espacios de nombres toString método como una forma simple de polimorfismo.

Referencias

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow