Module
Module teilen Code in Dateien mit klaren Schnittstellen: export bietet an, import holt herein.
Ansicht
01
Verstehen
Lies die Kernidee und das Beispiel.
02
Prüfen
Beantworte die Aktiv-Checks.
03
Anwenden
Setze die Transferaufgabe um.
Lerninhalt
Verstehen & anwenden
export
Benannte Exports exportieren mehrere Dinge pro Datei.
Ein Default-Export ist der Hauptexport einer Datei — pro Datei nur einer.
export function sum(a, b) {
return a + b;
}
export const PI = 3.14159;import
Benannte Imports stehen in geschweiften Klammern und muessen dem Exportnamen entsprechen.
Default-Imports bekommen einen frei wählbaren Namen.
import { sum, PI } from './mathe.js';
console.log(sum(PI, 1));Module im Browser
type="module" aktiviert Module im script-Tag.
Module laufen automatisch im Strict Mode und haben ihren eigenen Gültigkeitsbereich.
<script type="module" src="app.js"></script>Vertiefung
Module sind abgeschottet
Jede Moduldatei hat einen eigenen Gültigkeitsbereich. Nur was exportiert wird, ist von außen sichtbar. Das verhindert globale Namenskonflikte.
Benannte Exports eignen sich für mehrere Funktionen; ein Default-Export ist der Hauptexport einer Datei. Im Browser braucht das script-Tag type="module".
// mathe.js
export const PI = 3.14159;
export function sum(a, b) { return a + b; }
// app.js
import { PI, sum } from "./mathe.js";
console.log(sum(PI, 1));Merksatz: Module machen Abhängigkeiten sichtbar. Exportiere nur, was andere wirklich brauchen.
Übungsaufgabe
Mathe-Modul
Lege ein Modul mathe.js mit sum und PI an. Importiere beides in app.js und berechne eine Summe. Binde app.js als Modul ein.
Das soll dein Programm können
- Benannter Export für sum und PI
- Import in einer zweiten Datei
- type="module" im script-Tag
- Eine berechnete Ausgabe
Schreibe den Code hier oder in deiner IDE und vergleiche ihn dann mit der Lösung.
Dein Code wird automatisch auf diesem Gerät gespeichert.
Hinweis anzeigen
Der Importpfad muss die Dateiendung enthalten: import { sum } from "./mathe.js".
Lösung anzeigen
// mathe.js
export const PI = 3.14159;
export function sum(a, b) {
return a + b;
}
// app.js
import { PI, sum } from "./mathe.js";
console.log(sum(PI, 1));
// index.html
<script type="module" src="app.js"></script>Warum funktioniert das?
Benannte Exports werden mit denselben Namen importiert. type="module" aktiviert die Modulauflösung im Browser.
Aktiv-Check
Teste dein Verständnis
Erkennen: Welcher Abschnitt passt?
Welcher Abschnitt passt zu diesen Begriffen?
Transfer
Mini-Projekt: Der Lernzähler
Baue einen kleinen Zähler, der bei jedem Klick hochzählt und den Wert im DOM anzeigt. Erweitere ihn um einen Reset-Button.
Selbstcheck
Kann ich das schon?
Hake ab, was du wirklich erklären oder selbst bauen könntest.
Fortschritt
Bereit zum Abschließen?
Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.