JavaScript-Module
Module teilen JavaScript-Code auf Dateien auf. export stellt Werte bereit, import verwendet sie. Die sichtbare Beispielzeile lautet lida / tea / mint.
Benannte Exporte
Benannte Exporte behalten ihren Namen und können mehrere Werte aus einem Modul anbieten.
// math.js
export const drink = "tea";
export function label(name) {
return `${name} / ${drink} / mint`;
}
drink und label sind verfügbar, weil sie exportiert werden. Nicht exportierter Code bleibt in math.js.
Benannte Werte importieren
Benannte Imports stehen in geschweiften Klammern und verwenden dieselben Namen.
// app.js
import { drink, label } from "./math.js";
console.log(drink);
console.log(label("lida"));
Der Import verbindet sich mit den Exporten und kopiert keine unabhängige Definition. Im Browser müssen die Dateien über HTTP oder HTTPS geliefert werden.
Standardexport
Ein Standardexport ist meist der Hauptwert eines Moduls. Beim Import wählst du den lokalen Namen ohne Klammern.
// greeting.js
export default function greet(name) {
return `Hello, ${name}!`;
}
// app.js
import greet from "./greeting.js";
console.log(greet("lida"));
Benannte Imports nutzen { drink, label }; ein Standardimport nutzt greet ohne Klammern. Ein Modul darf nur einen Standardexport haben.
Modul-Scope und dynamischer Import
Top-Level-Deklarationen eines Moduls werden keine Eigenschaften von window. import() lädt später und liefert ein Promise.
// menu.js
const secret = "not global";
export const items = ["tea", "mint"];
// app.js
import("./menu.js").then((menu) => {
console.log(menu.items.join(" / "));
});
console.log(window.secret); // undefined
Nur items überschreitet die Modulgrenze. Das Ergebnis des dynamischen Imports ist ein Namespace-Objekt; seine Exporte liest man als Eigenschaften.
Modulverhalten auf einer Seite sehen
Diese eigenständige Demo erstellt den Modultext im Speicher, erzeugt eine Blob-URL und importiert sie. So werden keine Projektdateien benötigt.
<p id="result"></p>
<script type="module">
const source = `
export const drink = "tea";
export function label(name) { return name + " / " + drink + " / mint"; }
`;
const url = URL.createObjectURL(new Blob([source], { type: "text/javascript" }));
const module = await import(url);
document.querySelector("#result").textContent = module.label("lida");
URL.revokeObjectURL(url);
</script>
Die Seite zeigt genau lida / tea / mint. type="module" aktiviert die Syntax; die Blob-URL liefert den Modultext ohne Netzwerkanfrage.
In einem echten Projekt liegen math.js und app.js getrennt. Lade den Einstieg mit <script type="module" src="./app.js"></script>. file:// ist für Browsermodule unzuverlässig; verwende einen HTTP-Server.
📊 Modulvarianten
| Syntax | Zweck | Beispiel |
|---|---|---|
| Benannter Export/Import | Bestimmte Namen teilen | export const drink = "tea" / import { drink } ... |
| Standardexport/-import | Hauptwert teilen | export default function greet() / import greet ... |
| Dynamischer Import | Später laden und Promise erhalten | import("./menu.js").then(...) |
| Modul-Scope | Top-Level-Deklarationen privat halten | const secret = "not global" |
Praktische Übung
Erstelle math.js mit drink und label, importiere beide in app.js, ergänze den Standardexport greet und zeige lida / tea / mint.
Häufige Fehler
Vergiss die Klammern bei benannten Imports nicht, verwende keinen zweiten Standardexport und erwarte nicht, dass ein nicht exportierter Wert global wird. Browsermodule brauchen HTTP(S).
Kernaussage
export gibt ausgewählte Bindings frei, import verwendet sie, Standardimports wählen ihren Namen selbst und der Modul-Scope schützt private Deklarationen.
Halte Module übersichtlich, benenne Imports klar und gib temporäre Blob-URLs nach der Demo frei.
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt