JavaScript Modules

import, export, Dateistruktur und moderne Projektorganisation. Diese Seite ist als Lernunterlage, Nachschlagewerk und Prüfungsvorbereitung für die CAP-Ausbildung gedacht.

Lernziele

• Code in Dateien aufteilen
• export und import verwenden
• Module für größere Projekte begründen

Erklärung

Module helfen, Code nach Aufgaben zu trennen. Eine Datei kann Funktionen, Konstanten oder Klassen exportieren. Andere Dateien importieren nur, was sie brauchen.

Im Browser brauchen Module type="module". Moderne Build-Tools nutzen Module ebenfalls als Grundlage.

Beispiele

// math.js
export function add(a, b) {
  return a + b;
}

// app.js
import { add } from "./math.js";
console.log(add(2, 3));

Benannte Exporte machen sichtbar, welche Funktion importiert wird.

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

Module werden automatisch verzögert ausgeführt und haben eigenen Scope.

Typische Fehler

• Alles in eine riesige Datei schreiben.
• Zyklische Abhängigkeiten erzeugen.
• Dateipfade beim Import ohne genaue Endung im Browser falsch setzen.

Best Practices

• Trenne DOM-Code, Datenlogik und Hilfsfunktionen.
• Exportiere nur, was andere Dateien brauchen.
• Halte Module klein und fachlich zusammenhängend.

Kleine Übung

Teile eine Todo-App in tasks.js für Datenfunktionen und app.js für DOM-Logik auf.

Zusammenfassung

JavaScript ergänzt Webseiten um Verhalten. Robuster Code arbeitet mit klaren Daten, kleinen Funktionen, sicheren DOM-Operationen, guter Fehlerbehandlung und nachvollziehbarer Struktur.

Weiterführende Seiten

• Vorherige Seite: Asynchrones JavaScript
• Nächste Seite: JavaScript Fehlerbehandlung und Debugging
• Zur Übersicht
• Funktionen
• Best Practices