Heim  >  Artikel  >  Web-Frontend  >  JS-Modul-Nutzungsanleitung für Back-End-Programmierer

JS-Modul-Nutzungsanleitung für Back-End-Programmierer

php中世界最好的语言
php中世界最好的语言Original
2018-06-04 09:57:391260Durchsuche

Dieses Mal bringe ich Ihnen Anweisungen zur Verwendung der JS-Modularisierung für Back-End-Programmierer. Was sind die Vorsichtsmaßnahmen für Back-End-Programmierer, um die JS-Modularisierung zu verwenden?

Basismodus

Anonymer Abschluss

Anonymer Abschluss ist eine sehr verbreitete Code-Isolationsmethode, die anonyme Objekte deklariert und sofort ausführt.

Die in der anonymen Funktion deklarierten Variablen und Methoden und die anonyme Funktion selbst verschmutzen die Außenseite der Funktion nicht. Gleichzeitig bildet der Aufruf der anonymen Funktion einen Abschluss, sodass der Funktionskörper dies tun kann Verwenden Sie die außerhalb des Körpers deklarierte Funktion. Variablen und Methoden.

(function () {    // ... all vars and functions are in this scope only
    // still maintains access to all globals}());

Globaler Import

Wir wissen, dass

JavaScriptglobalerVariablenbereich durch die ganze Welt läuft und auch globale Variablen verwendet werden können oder sogar innerhalb von Funktionen deklariert, daher kann es leicht zu Code-Unordnung kommen, die schwer zu verwalten ist. Der globale Importmodus ist eine Variante des anonymen Abschlusses. Er fügt Parameter zum Importieren globaler Variablen hinzu. Es wird vereinbart, dass auf externe Module nur über importierte Parameter innerhalb der anonymen Funktion zugegriffen werden kann, wodurch die Abhängigkeiten zwischen Modulen klar und einfach zu verwalten sind .

(function ($, YAHOO) { // haben jetzt Zugriff auf die Globals jQuery (als $) und YAHOO in diesem Code}(jQuery, YAHOO));

Diese Konvention kann nicht erzwungen werden Um den Zugriff auf globale Variablen innerhalb des Funktionskörpers zu verhindern, besteht eine Lösung darin, alle Module auf diese Weise zu behandeln und nur das Modul selbst in globale Variablen zu exportieren, was die Verwendung globaler Variablen erheblich reduzieren kann.

Modulexport

Der Modulexport besteht darin, das Ergebnis der sofortigen Ausführung der anonymen Funktion zurückzugeben und es einer globalen Variablen zuzuweisen. Anonyme Funktionen geben nur offene Objekte zurück und ihre intern definierten Variablen und Funktionen sind für die Außenwelt weiterhin unsichtbar.

var MODULE = (function () {    var my = {},
        privateVariable = 1;    function privateMethod() {        // ...
    }
    my.moduleProperty = 1;
    my.moduleMethod = function () {        // ...
    };    return my;
}());

Erweiterter Modus

Erweiterungsmodus

JavaScript-Objekte unterstützen die Hot-Erweiterung. In Kombination mit dem globalen Importmodus können wir das Modul erweitern.

var MODULE = (function (my) {
    my.anotherMethod = function () {        // added method...
    };    return my;
}(MODULE));

Dieser Modus geht davon aus, dass das MODUL deklariert wurde, und es tritt ein Fehler auf, wenn es nicht deklariert wird.

Wide-Erweiterungsmodus

Der Wide-Erweiterungsmodus verwendet einen Trick, um eine anonyme Funktion aufzurufen und MODULE || {} als Parameter zu übergeben, um das Problem des Aufruffehlers zu lösen, wenn MODULE nicht im Voraus deklariert wird . Dieser Modus verbirgt auch eine wunderbare Sache: Mehrere Erweiterungsmodi können parallel aufgerufen werden, ohne blockiert zu werden.

var MODULE = (function (my) {    // add capabilities...
    return my;
}(MODULE || {}));

Enger Erweiterungsmodus

Der breite Erweiterungsmodus ist großartig, hat aber den Nachteil, dass er Methodenattribute überlastet, die nicht sicher gehandhabt werden können. Der enge Erweiterungsmodus behält Verweise auf alte Methoden bei und kann die Funktionen alter Methoden in neu definierten Methoden flexibel wiederverwenden.

var MODULE = (function (my) {    var old_moduleMethod = my.moduleMethod;
    my.moduleMethod = function () {        // method override, has access to old through old_moduleMethod...
    };    return my;
}(MODULE));

Klonen und Vererbung

var MODULE_TWO = (function (old) {    var my = {},
        key;    for (key in old) {        if (old.hasOwnProperty(key)) {
            my[key] = old[key];
        }
    }    var super_moduleMethod = old.moduleMethod;
    my.moduleMethod = function () {        // override method on the clone, access to super through super_moduleMethod
    };    return my;
}(MODULE));

Der Klon- und Vererbungsmodus ist fast die Modulwiederverwendungsmethode, die die geringsten Auswirkungen auf das Originalmodul hat. Dieser Modus wird durch das Klonen der alten Modulattribute wiederverwendet und kann kombiniert werden mit Der enge Erweiterungsmodus behandelt das Problem der

Methodenüberladung . Es ist zu beachten, dass dies eine Art flaches Klonen ist. Wenn das Attribut des alten Moduls ein Objekt ist, wirken sich Änderungen an diesem Objekt gegenseitig zwischen dem alten und dem neuen Modul aus.

Privater Status über Dateien hinweg

Wenn ein Modul in mehrere Dateien aufgeteilt ist, gibt es eine Einschränkung bei der Verwendung des breiten Erweiterungsmodus. Die Methoden in jeder Datei behalten ihren eigenen privaten Status und können dies nicht sein Wird im Modul in mehreren Dateien verwendet. Das folgende Beispiel zeigt, wie in diesem Fall der private Status im selben Modul geteilt wird.

var MODULE = (function (my) {    var _private = my._private = my._private || {},
        _seal = my._seal = my._seal || function () {            delete my._private;            delete my._seal;            delete my._unseal;
        },
        _unseal = my._unseal = my._unseal || function () {
            my._private = _private;
            my._seal = _seal;
            my._unseal = _unseal;
        };    // permanent access to _private, _seal, and _unseal
    return my;
}(MODULE || {}));

Jede Datei verwaltet eine lokale Variable _private zur gemeinsamen Nutzung mit anderen Modulen. Rufen Sie nach dem Laden des Moduls MODULE._seal auf, um das externe Zugriffsattribut der lokalen Variablen _private zu zerstören. Wenn das Modul erweitert werden muss, rufen Sie _unseal auf, bevor Sie die Datei laden, um die lokale Variable _private an die von außen zugänglichen Attribute auszugeben. Rufen Sie nach dem Laden _seal auf, um die von außen zugänglichen Attribute zu zerstören.

Submodule

Submodule definiert die Attribute des Moduls als Modul und kann die verschiedenen oben genannten Modi flexibel verwenden.

MODULE.sub = (function () {    var my = {};    // ...
    return my;
}());

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Verwendung von JS zum Implementieren von Verschlüsselungs- und Entschlüsselungsvorgängen

Wie man JS verwendet, um Referenzübertragungen durchzuführen und Wert Pass

Das obige ist der detaillierte Inhalt vonJS-Modul-Nutzungsanleitung für Back-End-Programmierer. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn