Esiste un modo "conciso" per eseguire lo spazio dei nomi in JavaScript?

https://stackoverflow.com/questions/13021

08-06-2019
|

Domanda

Ho incontrato spesso siti che inseriscono tutto il loro JavaScript all'interno di un file namespace struttura sulla falsariga di:

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

Tuttavia, impostarlo in modo sicuro rispetto ad altri framework con spazio dei nomi sembra richiedere una quantità di codice relativamente elevata (definita come > 2 righe).Mi chiedevo se qualcuno conosce un modo conciso per farlo?Inoltre, esiste un modo relativamente standard/coerente per strutturarlo?Ad esempio, è il com spazio dei nomi direttamente collegato all'oggetto globale o è collegato tramite un oggetto spazio dei nomi?

[Modificare:ops, ovviamente {com = { ... } } non realizzerei nulla di simile a ciò che intendevo, grazie a Shog9 per averlo sottolineato.]

Soluzione

Javascript non ha spazi dei nomi autonomi.Dispone di funzioni che possono fornire l'ambito per la risoluzione di nomi e oggetti che possono contribuire a rendere accessibili i dati nominati in un determinato ambito.

Ecco il tuo esempio, corretto:

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

Questa è una variabile namespaces viene assegnato un oggetto letterale.L'oggetto contiene una proprietà: com, un oggetto con una proprietà: example, un oggetto che presumibilmente conterrebbe qualcosa di interessante.

Quindi, puoi digitare qualcosa del tipo namespaces.com.esempio.alcunePropertyOrFunctionOnExample e funzionerà tutto.Naturalmente è anche ridicolo.Non hai uno spazio dei nomi gerarchico, hai un oggetto che contiene un oggetto che contiene un oggetto con le cose che ti interessano veramente.

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

Funziona altrettanto bene, senza l’inutile gerarchia.

Ora, se in realtà Volere per costruire una gerarchia, puoi provare qualcosa del genere:

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() { /* ... */ }
       };
    })();

...che è, secondo me, ragionevolmente conciso.

Altri suggerimenti

Ecco un interessante articolo di Peter Michaux su Spaziatura dei nomi Javascript.Discute 3 diversi tipi di spazi dei nomi Javascript:

Spaziatura dei nomi del prefisso
Spaziatura dei nomi di un singolo oggetto
Spaziatura dei nomi degli oggetti nidificati

Non plagio ciò che ha detto qui, ma penso che il suo articolo sia molto istruttivo.

Peter è arrivato addirittura a sottolineare che per alcuni di essi ci sono considerazioni sulle prestazioni.Penso che sarebbe interessante parlare di questo argomento considerando che i nuovi piani ECMAScript Harmony hanno abbandonato i piani 4.0 per lo spazio dei nomi e il packaging.

Cerco di seguire la convenzione di Yahoo di creare un oggetto genitore singolo nell'ambito globale per contenere tutto;

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

Per assicurarti di non sovrascrivere un oggetto esistente, dovresti qualcosa del tipo:

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

var NameSpace = window.NameSpace || {};

In questo modo puoi inserirlo nella parte superiore di ogni file nella tua applicazione/sito Web senza preoccuparti di sovrascrivere l'oggetto namespace.Inoltre, ciò consentirebbe di scrivere unit test per ciascun file individualmente.

IL Biblioteca YUI La libreria ha un codice che gestisce lo spazio dei nomi utilizzando una funzione che potresti trovare preferibile.Anche altre biblioteche potrebbero farlo.

In alternativa al punto o al carattere di sottolineatura, potresti utilizzare il carattere del simbolo del dollaro:

var namespaces$com$example = "data";

Mi piace anche questo (fonte):

(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/>';

Utilizzare un oggetto letterale e the this oggetto o il nome esplicito per eseguire lo spazio dei nomi in base alle proprietà di pari livello della variabile locale che contiene la funzione.Per esempio:

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 senza l'esplicito name proprietà:

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

Usa il RegExp O Object funzioni di costruzione per aggiungere proprietà del nome alle variabili contatore e altri nomi comuni, quindi utilizzare a hasOwnProperty test da fare per verificare:

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

Il DOM utilizza la seguente convenzione per le definizioni dell'interfaccia degli elementi HTML e SVG degli spazi dei nomi:

ElementoTitoloHTML
Elemento Titolo SVG
SVGScriptElement
ElementoScriptHTML

Il core JavaScript utilizza i prototipi per lo spazio dei nomi toString metodo come una forma semplice di polimorfismo.

Riferimenti

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a StackOverflow