So verstehen Sie die Modularität von JavaScript

1. Browserunterstützung

Die Verwendung von JavaScript-Modulen hängt vom Import und Export ab. Die Browserunterstützung für Import und Export wird von den neuesten Browserversionen unterstützt, jedoch nicht von IE und älteren Browserversionen. Wenn Sie also mit IE und älteren Browserversionen kompatibel sein möchten, können Sie es grundsätzlich nicht verwenden.

Export und Import kommen paarweise vor und arbeiten zusammen.

Die JS-Modularisierung ist die Voraussetzung für das Erlernen verschiedener JS-Frameworks

Mit den Import- und Exportanweisungen können Variablen oder Funktionen importiert/exportiert werden, die bestimmte Funktionen in einem Modul implementieren. Sie können damit auch Klassen importieren/exportieren.

2. Export-Exportmodul

Standardexport

Ein Modul kann nur einen Standardexport haben und es kann nur eine Standardexportvariable geben. Geschweifte Klammern {} dürfen nicht vorkommen.

Die Syntax lautet export default variable name

Modell.js

Funktion Test1(){
    console.log("Dies ist der Standardexport")
}
Funktion Test2(){
    console.log('Dies ist ein benannter Export')
}
Standard exportieren Test1

Stapelexport

Die Syntax lautet export {Variablenname, Variablenname...}

Funktion Test1(){
    console.log("Dies ist der Standardexport")
}
Funktion Test2(){
    console.log('Dies ist ein benannter Export')
}
exportiere {Test1, Test2}

3. Module importieren

Standardimport

Haupt-JS

importiere Test1 aus "./model.js"
Test1()

Umbenennung von Standardimporten

Haupt-JS

importiere x aus "./model.js" //x ist der Standardexport Test1
X()

Stapelimport

Haupt-JS

importiere {Test1, Test2} aus "./model.js"
Test1();
Test2();

Umbenennen im Batchimport

Dem Schlüsselwort as folgt ein neuer Name, um die Umbenennung zu implementieren

Haupt-JS

importiere {Test1 als x1, Test2 als x2} aus "./model.js"
x1();
x2();

Sie können es beim Exportieren auch mit dem Schlüsselwort as umbenennen

Modell.js

Funktion Test1(){
    console.log("Dies ist der Standardexport")
}
Funktion Test2(){
    console.log('Dies ist ein benannter Export')
}
exportiere {Test1 als x1, Test2 als x2}

Anwendungsmodul

html

<script src="main.js"></script>

4. Modulobjekt erstellen

Verwendung von Objekten, weitere Vereinfachung der Umbenennung basierend auf dem Schlüsselwort as

importiere * als Modell aus "./model.js"
Modell.x1();
Modell.x2();

5. Export- und Importumschlagstation

Manchmal können Sie mehrere Untermodule zu einem übergeordneten Modul kombinieren, und dann entscheidet das übergeordnete Modul, welches exportiert werden soll. Diese übergeordnete Moduldatei ist wie eine Transitstation zum Kombinieren verschiedener Module.

Die Syntax lautet export {Variablenname} aus Modulpfad

Aktuelle Verzeichnisstruktur

Quelle

Hauptseite

Haupt-JS

Umleitung.js

Modelle

Modell.js

model2.js

Modell.js

Funktion Test1(){
    console.log("Dies ist Untermodul 1")
}
exportieren {Test1}

model2.js

Funktion Test2(){
    console.log('Dies ist Untermodul 2')
}
exportiere {Test2}

Umleitung.js

exportiere {Test1} aus "./models/model.js"
exportiere {Test2} aus "./models/model2.js"

Haupt-JS

importiere * als Modell aus "./redirection.js"
Modell.Test1()
Modell.Test2()

html

<script src="./main.js"></script>

6. Module dynamisch laden

Dynamisch geladene Module werden zum Importieren von Modulen verwendet, ohne dass alle Module vorab geladen werden müssen. Sie können import() bei Bedarf als Funktionsaufruf verwenden, seine Parameter an den Pfad des Moduls übergeben und ein Promise zurückgeben. Verwenden Sie das Promise-Objekt, um mit dem Ladeergebnis des Moduls zu arbeiten.

Die Syntax lautet import (dynamisch geladener Modulpfad)

dynamisch.js

Funktion TestDy(){
    console.log("Dies ist ein dynamisches Modul")
}
Standard-TestDy exportieren

Haupt-JS

Dokument.querySelector('.load').onclick = Funktion(){
    importiere('./dynamic.js').then((Modell)=>{
        Modell.Standard()
    })
}

Oben finden Sie Einzelheiten zum Verständnis der JavaScript-Modularisierung. Weitere Informationen zur JavaScript-Modularisierung finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!