Eine ausführliche Einführung in Namespaces in JavaScript

Globale Variablen sollten für Objekte mit systemweiten Abhängigkeiten reserviert sein, und ihre Benennung sollte Mehrdeutigkeiten vermeiden und das Risiko von Namenskonflikten minimieren. In der Praxis bedeutet dies, dass Sie das Erstellen globaler Objekte vermeiden sollten, es sei denn, dies ist unbedingt erforderlich.

Aber nun ja, das wussten Sie schon...

Was haben Sie also dagegen unternommen? Traditionelle Ansätze zeigen uns, dass die beste Strategie zur Eliminierung von Globals darin besteht, eine kleine Anzahl globaler Objekte zu erstellen, die als tatsächliche Namespaces für zugrunde liegende Module und Subsysteme dienen. Ich werde verschiedene Ansätze für Namespaces untersuchen und mit einer eleganten, sicheren und flexiblen Lösung abschließen, die ich basierend auf einem kürzlich erschienenen Artikel von James Edwards entwickelt habe.

Statische Namespaces

Ich verwende 静态命名空间 als Überbegriff für jene Lösungen, bei denen die Namespace-Tags tatsächlich fest codiert sind. Ja, Sie können einen Namespace einem anderen zuweisen, aber der neue Namespace verweist auf dieselben Objekte wie der alte.

1. Durch direkte Zuordnung

Die einfachste Methode. Das ist sehr ausführlich, und wenn Sie diese Namespaces umbenennen möchten, müssen Sie einiges tun. Aber es ist sicher und klar.

var myApp = {}
myApp.id = 0;
myApp.next = function() {
    return myApp.id++;  
}
myApp.reset = function() {
    myApp.id = 0;   
}
window.console && console.log(
    myApp.next(),
    myApp.next(),
    myApp.reset(),
    myApp.next()
); //0, 1, undefined, 0

Sie können die zukünftige Wartung auch vereinfachen, indem Sie this verwenden, um auf Geschwistereigenschaften zu verweisen. Dies ist jedoch etwas riskant, da nichts einer Neuzuweisung Ihrer Namespace-Methoden im Wege steht.

var myApp = {}
myApp.id = 0;
myApp.next = function() {
    return this.id++;   
}
myApp.reset = function() {
    this.id = 0;    
}
myApp.next(); //0
myApp.next(); //1
var getNextId = myApp.next;
getNextId(); //NaN whoops!

2. Objektliterale verwenden

Jetzt müssen wir den Namespace-Namen nur einmal referenzieren, sodass es später einfacher ist, den Namen zu ändern (vorausgesetzt, Sie haben den Namespace nicht wiederholt referenziert). ). Es besteht immer noch die Gefahr, dass der Wert von this eine „Überraschung“ hervorruft – es ist jedoch sicherer anzunehmen, dass das in einer Objektliteralstruktur definierte Objekt nicht neu zugewiesen wird.

var myApp = {
    id: 0,
    next: function() {
        return this.id++;   
    },
    reset: function() {
        this.id = 0;    
    }
}
window.console && console.log(
    myApp.next(),
    myApp.next(),
    myApp.reset(),
    myApp.next()
) //0, 1, undefined, 0

3. Modulmodus

Ich verwende 模块模式 in letzter Zeit. Die Logik wird vom globalen Bereich durch einen Methoden-Wrapper (normalerweise selbstaufrufend) isoliert, der ein Objekt zurückgibt, das die öffentliche Schnittstelle des Moduls darstellt. Indem wir diese Methode sofort aufrufen und das Ergebnis einer Namespace-Variablen zuweisen, sperren wir die API des Moduls in dieser benannten Variablen. Darüber hinaus bleiben alle Variablen, die nicht im Rückgabewert enthalten sind, immer privat und nur für die öffentlichen Methoden sichtbar, die auf sie verweisen.

var myApp = (function() {
    var id= 0;
    return {
        next: function() {
            return id++;    
        },
        reset: function() {
            id = 0;     
        }
    };  
})();   
window.console && console.log(
    myApp.next(),
    myApp.next(),
    myApp.reset(),
    myApp.next()
) //0, 1, undefined, 0

Wie beim obigen Beispiel für ein Objektliteral kann der Namespace-Name leicht geändert werden, aber es gibt einen zusätzlichen Vorteil: Objektliterale sind Klasse 4 – es geht nur um die Attributzuweisung, es gibt keinen Platz für unterstützende Logik. Darüber hinaus müssen alle Eigenschaften initialisiert werden und Eigenschaftswerte können nicht einfach objektübergreifend referenziert werden (so sind beispielsweise innere -Abschlüsse nicht möglich). Das Modulmuster weist keine der oben genannten Einschränkungen auf und bietet uns zusätzliche Vorteile für den Datenschutz.

Dynamischer Namespace

Wir können diesen Abschnitt auch 命名空间注入 nennen. Der Namespace wird durch einen Proxy dargestellt, der direkt auf den Methoden-Wrapper 内部 verweist – das bedeutet, dass wir den dem Namespace zugewiesenen Rückgabewert nicht mehr umschließen müssen. Dies macht Namespace-Definitionen flexibler und ermöglicht die Existenz mehrerer unabhängiger Instanzen des Moduls, die in unabhängigen Namespaces (oder sogar im globalen Kontext) existieren. Dynamische Namespaces unterstützen alle Funktionen des Modulmusters mit dem zusätzlichen Vorteil, dass sie intuitiv und lesbar sind.

4. Geben Sie Namespace-Parameter an

Hier übergeben wir einfach den Namespace als Parameter an die selbstaufrufende Methode. Die Variable id ist privat, da sie nicht context zugewiesen ist.

var myApp = {};
(function(context) { 
    var id = 0;
    context.next = function() {
        return id++;    
    };
    context.reset = function() {
        id = 0;     
    }
})(myApp);  
window.console && console.log(
    myApp.next(),
    myApp.next(),
    myApp.reset(),
    myApp.next()
) //0, 1, undefined, 0

Wir können context sogar auf ein globales Objekt setzen (mit einer einzigen Wortänderung!). Dies ist ein großer Vorteil für Bibliotheksbesitzer – sie können ihre Funktionen in eine selbstaufrufende Funktion einschließen und den Benutzer entscheiden lassen, ob sie global sind oder nicht (John Resig war einer der ersten Anwender dieser Theorie, als er JQuery schrieb).

var myApp = {};
(function(context) { 
    var id = 0;
    context.next = function() {
        return id++;    
    };
    context.reset = function() {
        id = 0;     
    }
})(this);   
window.console && console.log(
    next(),
    next(),
    reset(),
    next()
) //0, 1, undefined, 0

5. Verwenden Sie this als Namespace-Proxy

Ein kürzlich erschienener Artikel von James Edwads hat mein Interesse geweckt. „Mein Lieblings-JavaScript-Designmuster“ wurde offenbar von vielen Kommentatoren missverstanden, die glauben, dass es möglicherweise auch auf dem Modulmuster beruht. Dieser Artikel fördert eine Vielzahl von Techniken (was den Leser wahrscheinlich verwirrt), aber im Kern steckt etwas Geniales, das ich modifiziert und als Namespace-Tool präsentiert habe.

Das Schöne an diesem Muster ist, dass es einfach so verwendet wird, wie die Sprache entworfen wurde – nicht mehr und nicht weniger, kein Opportunismus, kein Betrug. Da der Namespace außerdem über das Schlüsselwort this eingefügt wird (das innerhalb eines bestimmten Ausführungskontexts unveränderlich ist), kann er außerdem nicht versehentlich geändert werden.

var myApp = {};
(function() {
    var id = 0;

    this.next = function() {
        return id++;    
    };

    this.reset = function() {
        id = 0;     
    }
}).apply(myApp);    

window.console && console.log(
    myApp.next(),
    myApp.next(),
    myApp.reset(),
    myApp.next()
); //0, 1, undefined, 0

Noch besser ist, dass die apply (und call) API eine natürliche Isolierung von Kontext und Parametern bietet – sodass die Übergabe zusätzlicher Parameter an den Modulersteller sehr sauber ist. Das folgende Beispiel veranschaulicht dies und zeigt, wie Module unabhängig von mehreren Namespaces ausgeführt werden.

var subsys1 = {}, subsys2 = {};
var nextIdMod = function(startId) {
    var id = startId || 0;
    this.next = function() {
        return id++;    
    };
    this.reset = function() {
        id = 0;     
    }
};
nextIdMod.call(subsys1);    
nextIdMod.call(subsys2,1000);   
window.console && console.log(
    subsys1.next(),
    subsys1.next(),
    subsys2.next(),
    subsys1.reset(),
    subsys2.next(),
    subsys1.next()
) //0, 1, 1000, undefined, 1001, 0

Wenn wir einen globalen ID-Generator benötigen, ist das natürlich ganz einfach...

nextIdMod();    
window.console && console.log(
    next(),
    next(),
    reset(),
    next()
) //0, 1, undefined, 0

这个我们作为例子使用的 id 生成器工具并没有表现出这个模式的全部潜力。通过包裹一整个库和使用this关键字作为命名空间的替身，我们使得用户在任何他们选择的上下文中运行这个库很轻松（包括全局上下文）。

//library code
var protoQueryMooJo = function() {  
    //everything
}
//user code
var thirdParty = {};
protoQueryMooJo.apply(thirdParty);

其他的考虑

我希望避免命名空间嵌套。它们很难追踪（对人和电脑都是）并且它们会让你的代码因为一些乱七八糟的东西变得很多。如 Peter Michaux 指出的，深度嵌套的命名空间可能是那些视图重新创建他们熟悉和热爱的长包链的老派 Java 开发者的遗产。

通过 .js 文件来固定一个单独的命名空间也是可以的（虽然只能通过命名空间注入或者直接分配每一个变量），不过你应该对依赖谨慎些。此外将命名空间绑定到文件上可以帮助读者更轻易弄清整个代码。

因为 JavaScript 并没有正式的命名空间结构，所以有很多自然形成的方法。这个调查只详细说明了其中的一部分，可能有更好的技术我没有发现。我很乐意知道它们。

 以上就是JavaScript 中的命名空间详细介绍的内容，更多相关内容请关注PHP中文网（www.php.cn）！