JavaScript-Module

Inhaltsverzeichnis

Module

Mit JavaScript-Modulen können Sie Ihren Code in separate Dateien aufteilen.

Dies erleichtert die Pflege einer Codebasis.

Module werden aus externen Dateien mit der Anweisung import importiert.

Module basieren auch auf type="module" im <script>-Tag.

Beispiel

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Modules</h1>

<p id="demo"></p>

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

document.getElementById("demo").innerHTML = message();

</script>

</body>
</html>

Export

Module mit Funktionen oder Variablen können in jeder externen Datei gespeichert werden.

Es gibt zwei Arten von Exporten: Benannte Exporte und Standardexporte.

Benannte Exporte

Erstellen wir eine Datei mit dem Namen person.js und Füllen Sie es mit den Dingen, die wir exportieren möchten.

Sie können benannte Exporte auf zwei Arten erstellen. Einzeln in Reihe oder alle auf einmal unten.

Inline einzeln:

person.js

export const name = "Jesse";
export const age = 40;

Alles auf einmal ganz unten:

person.js

const name = "Jesse";
const age = 40;

export {name, age};

Standardexporte

Erstellen wir eine weitere Datei mit dem Namen message.js und Verwenden Sie es zur Demonstration des Standardexports.

Sie können in einer Datei nur einen Standardexport haben.

Beispiel

message.js

const message = () => {
  const name = "Jesse";
  const age = 40;
  return name + ' is ' + age + 'years old.';
};

export default message;

Importieren

Sie können Module auf zwei Arten in eine Datei importieren, je nachdem, ob sie benannt sind Exporte oder Standardexporte.

Benannte Exporte werden mit geschweiften Klammern erstellt. Standardexporte sind nicht verfügbar.

Import aus benannten Exporten

Benannte Exporte aus der Datei person.js importieren:

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Modules</h1>

<p id="demo"></p>

<script type="module">
import { name, age } from "./person.js";

let text = "My name is " + name + ", I am " + age + ".";

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Import aus Standardexporten

Importieren Sie einen Standardexport aus der Datei message.js:

import message from "./message.js";

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Modules</h1>

<p id="demo"></p>

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

document.getElementById("demo").innerHTML = message();

</script>

</body>
</html>

Notiz

Module funktionieren nur mit dem HTTP(s)-Protokoll.

Eine über das Protokoll „file://“ geöffnete Webseite kann keinen Import/Export verwenden.