JavaScript-Module

Module (Modules)

JavaScript-Module erlauben es Ihnen, den Code in separate Dateien zu zerlegen.

Das macht die Wartung der Codebibliothek einfacher.

Module werden mit import Anweisungen von externen Dateien importieren.

Module sind abhängig von <script>-Tags, die type="module".

Beispiel

<script type="module">
import message from "./message.js";
</script>

Versuchen Sie es selbst

Export

mitFunktionenoderVariablenModule können in jeder externen Datei gespeichert werden.

Es gibt zwei Arten von Exporten:benannte ExporteundStandard Export.

Benannte Exporte (Named Exports)

Lassen Sie uns eine Datei namens person.js erstellen und den Inhalt füllen, den wir exportieren möchten.

Es gibt zwei Möglichkeiten, benannte Exporte zu erstellen. Eine Möglichkeit ist das nacheinander inline Erstellen, die andere ist das einmalige Erstellen am Ende der Datei.

Erstellen wir nacheinander inline:

person.js

export const name = "Bill";
export const age = 19;

Erstellen wir am Ende der Datei einmalig:

person.js

const name = "Bill";
const age = 19;
export {name, age};

Standard Export (Default Exports)

Lassen Sie uns eine weitere Datei namens message.js erstellen und die Standardausgabe daran demonstrieren.

Eine Datei kann nur einen Standardausgang haben.

Beispiel

message.js

const message = () => {
const name = "Bill";
const age = 19;
return name + ' ist ' + age + ' Jahre alt.';
};
export default message;

Import

Module können auf zwei Weisen in eine Datei importiert werden, je nachdem, ob sie namentliche oder standardmäßige Ausgänge sind.

Namentliche Ausgänge werden durch Klammern konstruiert. Standardausgänge nicht.

Import aus namentlichem Ausgang

Namentliche Ausgang aus der Datei person.js importieren:

import { name, age } from "./person.js";

Versuchen Sie es selbst

Import aus Standardausgang

Standardausgang aus dem Datei message.js importieren:

import message from "./message.js";

Versuchen Sie es selbst

Achtung

Module sind nur für das HTTP(s)-Protokoll geeignet.

Webseiten, die über das file://-Protokoll geöffnet werden, können Import/Export nicht verwenden.