Detaillierte Erklärung des JavaScript ES6-Moduls

0. Was ist ein Modul

Historisch gesehen verfügte JavaScript nicht über ein Modulsystem. Daher war es nicht möglich, ein großes Programm in kleine, voneinander abhängige Dateien aufzuteilen und diese dann auf einfache Weise zusammenzusetzen. Andere Sprachen verfügen über diese Funktion, wie etwa „require“ von Ruby, „import“ von Python und sogar CSS hat „@import“, aber JavaScript bietet diesbezüglich keinerlei Unterstützung, was zu einem großen Hindernis bei der Entwicklung großer und komplexer Projekte geworden ist.

Vor ES6 entwickelte die Community einige Lösungen zum Laden von Modulen, die wichtigsten davon waren CommonJS und AMD. Die Designidee von ES6-Modulen besteht darin, so statisch wie möglich zu sein, sodass die Modulabhängigkeiten sowie die Eingabe- und Ausgabevariablen zur Kompilierungszeit bestimmt werden können. ES6-Module sind keine Objekte, sondern Code, der durch den Exportbefehl explizit zur Ausgabe angegeben und dann durch den Importbefehl importiert wird.

Die wichtigsten Probleme, die durch das Modulsystem gelöst werden, sind:

• Das Problem mit der Modularität
• Eliminieren Sie globale Variablen
• Verwalten der Ladereihenfolge

1.Modul laden

Wenn Sie das <script>-Tag zum Laden eines Moduls verwenden, müssen Sie type="module" hinzufügen.

1.1 Methode 1

<Skripttyp="Modul">
    Modul aus "./module.js" importieren;
</Skript>

1.2 Methode 2

<script src="./module.js" type="module"></script>

2. Export und Import

2.1 Die Exporte eines Moduls können von anderen Modulen importiert und abgerufen werden.

Beispiel 1: Mittels About.js das Base-Objekt in Base.js aufrufen und auf der Startseite ausdrucken.

Hauptseite

<Skripttyp="Modul">
    importiere About aus "./js/About.js";
    console.log(Über);
</Skript>

Base.js

const Basis = {
    Spitzname: "Administrator",
    Alter: 19
}
Standardbasis exportieren;

Über.js

importiere Base aus „../js/Base.js“;
const src = `Spitzname:${Base.nick},Alter:${Base.age}.`;
Standardquelle exportieren;

Ausgabe:

Spitzname: Admin, Alter: 19.

2.2 Sie können es importieren, auch wenn es nicht exportiert wird

Beispiel 2: About.js wird nicht exportiert und auf der Homepage importiert.

Hauptseite

<Skripttyp="Modul">
    importiere "./js/About.js";
</Skript>

Über.js

const src = 'Hallo Welt!';
konsole.log(quelle);

Ausgabe:

Hallo Welt!

2.3 Der importierte Code wird nur einmal ausgeführt

Beispiel 3: Importieren Sie About.js dreimal und beobachten Sie die Exportergebnisse.

Hauptseite

<Skripttyp="Modul">
    importiere "./js/About.js";
    importiere "./js/About.js";
    importiere "./js/About.js";
</Skript>

Über.js

const src = 'Hallo Welt!';
konsole.log(quelle);

Ausgabe:

Hallo Welt!

3. Exportvorgabe und entsprechender Import

Mit „export default“ wird ein Standardwert exportiert. Ein Modul kann nur einen haben.

Wenn Sie zum Exportieren die Exportvorgabe verwenden, kann der Importname beliebig sein.

Beispiel 4: Verwenden Sie zum Exportieren die Exportvorgabe und geben Sie zum Importieren einen beliebigen Namen ein.

Hauptseite

<Skripttyp="Modul">
    importiere bbb aus "./js/About.js";
    konsole.log(bbb);
</Skript>

Über.js

const src = 'Hallo Welt!';
Standardquelle exportieren;

Ausgabe:

Hallo Welt!

4. Export und entsprechender Import

Bei der Verwendung von Export zum Export darf der Name des Imports nicht beliebig sein.

Beispiel 5: Verwenden Sie zum Exportieren „Export“.

Hauptseite

<Skripttyp="Modul">
    importiere { Alter, Spitzname } aus "./js/About.js";
    console.log(Spitzname, Alter);
</Skript>

Über.js

konstantes Alter = 18;
exportiere {Alter};
// Alter exportieren; ×
// exportiere const Alter = 18; √
exportiere const nick = "admin";

Ausgabe:

Administrator 18

5. Hinweise zum Modul

1. Im Modul zeigt die oberste Ebene auf „undefined“.

2import hat einen Beförderungseffekt, der an den Kopf des gesamten Moduls befördert und zuerst ausgeführt wird.

3. Wenn der Import ausgeführt wird, wurde der Code noch nicht ausgeführt;

4. Import und Export können nur auf der obersten Ebene eines Moduls ausgeführt werden, nicht in einem Codeblock;

5.import() kann bedingt importiert werden;

6. Die zusammengesetzte Schreibmethode wird exportiert und kann im aktuellen Modul nicht verwendet werden

Zusammengesetztes Schreiben, Importieren und anschließend Exportieren:

exportiere About aus „./js/About.js“;

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalten auf 123WORDPRESS.COM mehr Aufmerksamkeit schenken können!