Namespaces in JavaScript

Studenten, die PHP studiert haben, kennen alle das Konzept des Namespace. In einem komplexen System gibt es viele Funktionen und Objekte, die von der Sprache bereitgestellt und von der Architektur vordefiniert werden Da Programmierstandards aussagekräftige Namen erfordern, ist es unvermeidlich, dass es zu falschen Aufrufen mit demselben Namen kommt. Mit Namespaces können jedoch nicht nur Funktionen und Objekte klassifiziert und organisiert werden, sondern auch eine Isolation gebildet werden das Problem doppelter Namen.

Die Verwendung von JavaScript ist nicht so komfortabel. Welche Blöcke und Dateien werden alle als Namespace betrachtet? verwirrend und schwer zu debuggen und zu lösen.

Ein einfaches Beispiel

In diesem Beispiel gibt es unterschiedliche Leistungen in verschiedenen Browsern. Firefox wird sterben. . . Es wird trotzdem ein Fehler gemeldet. Es handelt sich um einen sehr einfachen Fehler. Die Funktion test2 wird in der Funktion „alert“ aufgerufen. Dies ist eine Schleife Vielleicht werden Sie sagen, dass es so offensichtlich ist, nachdem Sie es gelesen haben. Wer würde den Fehler machen, aber wenn die benutzerdefinierte Methode aufgerufen wird? Wenn Sie die Methode zum Schließen des Fensters verwenden, wird der Fehler häufig ausgeblendet.

<input type="button" value="test" onclick="alert();"/>
        <script type="text/javascript">
            function alert(){
                //.......
                test2();
                //.......
            }
            function test2(){
                alert(&#39;test2&#39;)
            }
        </script>

Einfache NamespacesDa JavaScript keinen Dateibereich hat, sind verschiedene Funktionen in verschiedenen Dateien verstreut oder werden sogar von verschiedenen Personen geschrieben Die Wahrscheinlichkeit doppelter Namen ist stark erhöht. Reicht es, vorsichtig genug zu sein? Es gibt auch einige unerwartete Situationen. Beispielsweise wird häufig die Funktion „extend“ verwendet. Unerwarteterweise wurde die Funktion „extend“ zu EcmaScript5 hinzugefügt und die Notwendigkeit von Namespaces berücksichtigt.

JavaScript hat einen Funktionsumfang. Sie können damit benutzerdefinierte Funktionen in einen Funktionskörper schreiben, sodass die Variablen, Objekte und Funktionen in der Funktion genauso von außen isoliert sind wie in einem Namespace.

Auf diese Weise kommt es nicht zu Konflikten zwischen der benutzerdefinierten Warnmethode und der Fensterwarnung.

<input type="button" value="test" onclick="(new namespace()).alert();"/>
        
        <script type="text/javascript">
            function namespace(){
                this.alert=function(){
                    console.log(&#39;test&#39;);
                }
            }
        </script>

Einfache EntwicklungDas ist möglich, aber es gibt Probleme. Das größte Problem ist, dass die Aufrufmethode kompliziert und hässlich ist! Das Objekt muss bei jedem Aufruf instanziiert werden, und dann müssen seine Methoden aufgerufen werden. Ändern Sie einfach den Code, um eine automatische Instanziierung zu erreichen.

Um den obigen Code zu verstehen, müssen Sie zunächst die Technik der „Sofortausführungsfunktion“ verstehen (so nennen die Jianghu-Leute sie). Die Struktur ähnelt dieser

<input type="button" value="test" onclick="NS.alert();"/>
        <script type="text/javascript">
            (function namespace(){
                this.alert=function(){
                    console.log(&#39;test&#39;);
                }
                window.NS=this;
            })();
        </script>

Schreiben Sie die xxx-Funktion so. Sie kann nach der Definition automatisch ausgeführt werden. Sie sieht tatsächlich wie folgt aus:

(function xxx(){
       //function body 
 })();

bedeutet

function xxx(){
       //function body 
 }
xxx();

eine Funktion definieren

und rufen Sie es dann mit der Klammersyntax und außerhalb der Funktionsdefinition auf. Eine Klammerschicht konvertiert nur eine Funktionsdeklaration in einen Funktionsdefinitionsausdruck, da nur Ausdrücke mit Klammern aufgerufen werden können. Nachdem Sie diese Monster verstanden haben, ist der obige Code einfach. Weisen Sie ihn am Ende der benutzerdefinierten Namespace-Funktion dem NS-Attribut des Fensters zu und verwenden Sie beim Aufruf einfach NS.xx. Sieht viel besser aus.

Verschönern Sie esDie obige Schreibmethode sieht gut aus, aber der Funktionsnamen-Namespace scheint überflüssig zu sein, er kann verschönert werden

ist zu einer sofort ausgeführten

(function (){
                this.alert=function(){
                    console.log('test');
                }
                window.NS=this;
            })();

anonymen Funktion

geworden, die etwas verschönert ist, aber immer noch seltsam aussieht. Ja, es ist offensichtlich eine instanziierte Funktion. Warum ist sie also nicht in der Methode enthalten? Definition? Wie schreibe ich im Prototyp einen Prototyp für eine anonyme Funktion? . . , Sie müssen Ihr Gehirn benutzen

(function(){
                var _NS=function(){
                }
                _NS.prototype.alert=function(){
                    console.log('test');
                }
                window.NS=new _NS();
            })();

Schreiben Sie ein paar nützliche FunktionenquerySelector und querySelectorAll sind neue Abfrageschnittstellen, die von W3C bereitgestellt werden. Aber der Name ist zu lang, deshalb habe ich selbst ein einfaches innerHTML-Attribut geschrieben, das die HTML-Methode von jQuery imitiert. Der Namespace verhindert effektiv Konflikte zwischen Funktionsnamen /Klassennamen und andere Wenn Sie mehrere Frameworks oder Klassenbibliotheken von Drittanbietern verwenden, können Sie bei einem Konflikt nur eines davon aufgeben.

Bei der Webentwicklung ist es unvermeidlich, mit JavaScript in Berührung zu kommen. Die neueste Version von JavaScript unterstützt daher zweifellos das Problem von Namenskonflikten. Stellen Sie sich vor, Sie hätten nur auf zwei JS-Dateien verwiesen Dass man einen davon aufgeben und viel zusätzlichen Code schreiben musste, ist zweifellos sehr frustrierend. Bevor die neue Version von JavaScript das Konzept der Namespaces einführt, ist es die grundlegende Verpflichtung von uns Programmierern, den Geist der Eigenständigkeit und Kreativität voranzutreiben

(function () {
            var _NS = function () {
            }
            _NS.prototype.select = function (selector,context) {
                var context = context || document;
                return context.querySelectorAll(selector);
            }
            _NS.prototype.isArrayLike=function(obj){
                if(obj instanceof Array){
                    return true;
                }

                var length=obj.length;
                if ( obj.nodeType === 1 && length ) {
                    return true;
                }
                return false;
            }
            _NS.prototype.html = function (obj,value) {
                var isArray=this.isArrayLike(obj), i=0;
                if (typeof value == 'string') {
                    if (!isArray) {
                        obj.innerHTML = value;
                    } else {
                        var length = obj.length;
                        while (i < length) {
                            obj[i].innerHTML = value;
                            i += 1;
                        }
                    }
                } else {
                    if (!isArray) {
                        return obj.innerHTML;
                    } else {
                        return obj[0].innerHTML;
                    }
                }
            }
            window.NS = new _NS();
        })();

Verwandte Artikel:

Detaillierte Verwendung des PHP-Namespace

JS-Namespace-Schreibbeispielcode

Das obige ist der detaillierte Inhalt vonNamespaces in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!