Detaillierte Erläuterung des Funktionsprinzips und der Lösung der Js-Modularisierung

1. Modulares Konzept

Kapseln Sie ein komplexes Programm nach bestimmten Regeln (Spezifikationen) in mehrere Blöcke (Dateien) und kombinieren Sie diese miteinander. Die internen Daten und die Implementierung des Blocks sind privat und nur einige Schnittstellen (Methoden) werden nach außen zugänglich gemacht, um mit anderen externen Modulen zu kommunizieren.

2. Modularisierung

Warum modulares JavaScript verwenden?

Denn im eigentlichen Entwicklungsprozess treten häufig Konflikte bei den Namen von Variablen, Funktionen, Objekten usw. auf, die leicht zu Konflikten führen und globale Variablen verunreinigen können.
Gleichzeitig muss bei komplexen Programmen viel Code geschrieben und es müssen viele Bibliotheken eingeführt werden, was, wenn Sie nicht aufpassen, leicht zu Verwirrung bei den Dateiabhängigkeiten führen kann.
Um die oben genannten Probleme zu lösen, haben wir begonnen, modulares JS zu verwenden. Die Rolle der Modularisierung lautet also:

• Vermeiden Sie die Verunreinigung globaler Variablen
• Einfaches Schreiben und Warten von Code

3. Modularisierungsprozess

1. Normales Schreiben (globale Funktionen und Variablen)

Tatsächlich handelt es sich, solange verschiedene Funktionen oder Variablen zusammengesetzt werden, um ein einfaches Modul. Der Nachteil dabei liegt auf der Hand: Die Variablen können leicht verschmutzt werden.

var name = "Kaka";
Funktion cat1(){
    Name = 'Jahr für Jahr';
}
Funktion cat2(){
    Name = 'Es gibt Fisch';
}

2. Objektkapselung

Platzieren Sie das gesamte Modul in einem Objekt und rufen Sie die Eigenschaften oder Methoden des Objekts direkt auf, wenn Sie von außen darauf zugreifen.

var Katze = {
    Name:'Kaka',
    Katze1:Funktion(){
        var name = 'Jahr für Jahr';
        konsole.log(Name);
    },
    cat2:Funktion(){
        var name = 'Es gibt Fische';
        konsole.log(Name);
    }
}
cat.name;// Kakacat.cat1();// Nian Niancat.cat2();// Es gibt Fische

Obwohl diese Methode das Variablenkonfliktproblem löst, kann sie von externen Parteien leicht nach Belieben geändert werden:

Katzenname = "Lou Lou";

3. Anonyme Funktionsmethode

var cat = (Funktion () {
    // Lokaler Variablenname der anonymen Funktion
    var name = "Kaka";
    // Lokale Funktion cat1 der anonymen Funktion
    var cat1 = Funktion () {
        var name = 'Jahr für Jahr';
        konsole.log(Name);
    };
    // Lokale Funktion cat2 der anonymen Funktion
    var cat2 = Funktion () {
        var name = 'Es gibt Fische';
        konsole.log(Name);
    };
    //Stellen Sie einen externen Port über das Fenster bereit. Wenn Sie von außen darauf zugreifen möchten, können Sie ihn hier einfügen window.myModule = {
        Katze1: Katze1,
        Katze2: Katze2,
        Name:Name,
    };
})();
console.log(myModule.name);// Die Variable name wird im Exposure-Port platziert und kann ausgegeben werden. Das Ergebnis ist: KakamyModule.cat1();// Die Funktion cat1 wird im Exposure-Port platziert und kann ausgegeben werden. Das Ergebnis ist: Nian NianmyModule.cat2();// Die Funktion cat2 wird im Exposure-Port platziert und kann ausgegeben werden. Das Ergebnis ist: Es gibt Fische

Wenn der Variablenname entfernt wird, kann zu diesem Zeitpunkt nicht darauf zugegriffen werden und das Ergebnis ist undefiniert. Dies löst das Problem, dass Variablen nicht beliebig geändert werden können, d. h.:

window.myModule = {
    Katze1: Katze1,
    Katze2: Katze2,
};
console.log(myModule.name); // undefiniert

Die anonyme Funktionsmethode löst grundsätzlich das Problem der Funktionsverschmutzung und der willkürlichen Änderung von Variablen, was auch der Eckpfeiler modularer Spezifikationen ist!

4. Modulare Lösung

Basierend auf der Art und Weise, wie anonyme Funktionen sich selbst aufrufen und um Codeabhängigkeiten zu verbessern, verfügen die meisten JavaScript-Laufzeitumgebungen jetzt über ihre eigenen modularen Spezifikationen.

Es kann in vier Kategorien unterteilt werden: Commonjs, AMD, CMD und ES6-Modul

1. GemeinsamesJS

①Verwendung in Knotenumgebung, unterstützt keine Browserumgebung②NodeJS folgt der Spezifikation③Verwende require(), um Abhängigkeiten einzuführen④Verwende Exporte, um Module verfügbar zu machen

2. AMD

①Asynchrones Laden von Modulen in der Browserumgebung ②Spezifikationen, denen RequireJS folgt ③Abhängig von der Toolbibliothek für die Modulverwaltung require.js ④AMD befürwortet Abhängigkeitspräposition

3. CMD

①In der Browserumgebung unterstützt es sowohl asynchrones als auch synchrones Laden ②SeaJS folgt den Spezifikationen ③CMD-Befürworter verlassen sich auf das nächste

4. ES6-Module

Die modulare Syntax von ES6 kann die Abhängigkeiten von Modulen zur Kompilierungszeit bestimmen und kann auch die Variablendeklarationen von Eingabe und Ausgabe bestimmen. Sie ist nicht mehr nur eine Modulspezifikation, sondern wird jetzt als Standardsyntax der JS-Sprache verwendet und bietet die folgenden Funktionen:

① Wird sowohl von Browser- als auch von Serverumgebungen unterstützt. ② Die Modulabhängigkeiten und -variablen können zur Kompilierungszeit bestimmt werden, andere Modulspezifikationen werden zur Laufzeit bestimmt. ③ Der Exportbefehl wird verwendet, um die externe Schnittstelle des Moduls anzugeben. ④ Der Importbefehl wird verwendet, um Funktionen einzugeben, die von anderen Modulen bereitgestellt werden.

Hier muss noch etwas hinzugefügt werden: Die Modularisierungslösung der ES5-Version realisiert die Modularisierung nur auf Sprachebene. Der Nachteil besteht darin, dass sie in den meisten JavaScript-Betriebsumgebungen nicht direkt ausgeführt werden kann. Sie muss über ein Build-Tool in Standard-ES5 konvertiert werden, bevor sie normal ausgeführt werden kann. Hier müssen wir das automatisierte Build-Tool Webpack verwenden.

Oben finden Sie eine ausführliche Erläuterung der Arbeitsprinzipien und Lösungen der Js-Modularisierung. Weitere Informationen zur Js-Modularisierung finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!