javascript - pattern - typescript namespace




Gibt es eine "prägnante" Möglichkeit, Namespacing in JavaScript durchzuführen? (6)

Ich bin häufig auf Websites gestoßen, die ihr gesamtes Javascript in eine "Namespace" -Struktur in Anlehnung an

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

Aber dies sicher in Bezug auf andere Namespaced-Frameworks einzurichten, erfordert eine relativ große Menge an Code (definiert als> 2 Zeilen). Ich frage mich, ob jemand einen prägnanten Weg kennt, dies zu tun? und ob es eine relativ einheitliche / konsistente Möglichkeit gibt, sie zu strukturieren? z.B. ist der Namespace "com" direkt an das globale Objekt gebunden oder wird er über ein Namespace-Objekt angefügt?

[Edit: whoops, offensichtlich {com = { ... } } würde nicht annähernd das erreichen, was ich beabsichtigt hatte, dank Shog9 dafür, dass er darauf hingewiesen hat. : D]


Als Alternative zu einem Punkt oder einem Unterstrich können Sie das Dollarzeichenzeichen verwenden:

var namespaces$com$example = "data"; 

Die YUI-Bibliotheksbibliothek hat einen Code, der den Namensraum unter Verwendung einer Funktion handhabt, die Sie möglicherweise vorziehen. Andere Bibliotheken können dies ebenfalls tun.


Ich mag auch das ( Quelle ):

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

Ich versuche, der Yahoo-Konvention zu folgen, ein einzelnes Elternobjekt im globalen Rahmen zu machen, um alles zu enthalten;

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

Um sicherzustellen, dass Sie ein vorhandenes Objekt nicht überschreiben, sollten Sie so etwas wie:

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

oder

var NameSpace = window.NameSpace || {};

Auf diese Weise können Sie dies oben in jeder Datei in Ihrer Anwendung / Website platzieren, ohne sich Gedanken über das Überschreiben des Namespace-Objekts machen zu müssen. Dies würde es Ihnen auch ermöglichen, Komponententests für jede Datei einzeln zu schreiben.


Verwenden Sie ein Objektliteral und entweder das this Objekt oder den expliziten Namen, um den Namespacing auf der Basis der gleichgeordneten Eigenschaften der lokalen Variablen auszuführen, die die Funktion enthält. Beispielsweise:

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

Oder ohne die explizite Eigenschaft name :

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

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

Oder ohne das zu verwenden:

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

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

Verwenden Sie die Konstruktorfunktionen RegExp oder Object , um hasOwnProperty zu hasOwnProperty und anderen allgemeinen Namen hinzuzufügen, und verwenden hasOwnProperty dann einen hasOwnProperty Test, um die Prüfung durchzuführen:

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

Das DOM verwendet die folgende Konvention, um HTML- und SVG-Element-Schnittstellendefinitionen zu benennen:

  • HTMLTitleElement
  • SVGTitleElement
  • SVGScriptElement
  • HTMLScriptElement

JavaScript-Kern verwendet Prototypen, um die toString Methode als eine einfache Form des Polymorphismus zu benennen.

Verweise







namespaces