JavaScript 10 — Module & Struktur

In dieser Lektion lernst du, wie man JavaScript-Code strukturiert und in Module aufteilt. Ab einer bestimmten Projektgröße ist sauber organisierter Code kein Luxus mehr, sondern Voraussetzung für Wartbarkeit, Lesbarkeit und Teamarbeit.

1. Das Problem ohne Struktur

Definition.
Unstrukturierter Code entsteht, wenn alle Funktionen, Variablen und Logik in einer einzigen Datei oder im globalen Namensraum liegen.

// alles in einer Datei
function login() { }
function logout() { }
function fetchUsers() { }
function renderUsers() { }

Solcher Code wird schnell unübersichtlich, schwer testbar und fehleranfällig.

2. Was ist ein Modul?

Ein Modul ist eine JavaScript-Datei mit eigenem Gültigkeitsbereich, die explizit festlegt, was sie exportiert und was sie importiert.

Module ermöglichen:

klare Verantwortlichkeiten
vermeiden globaler Variablen
Wiederverwendbarkeit
bessere Testbarkeit

3. ES Modules (Standard)

Der moderne JavaScript-Standard verwendet ES Modules mit import und export.

Jede Datei ist ein eigenes Modul.

4. Exportieren aus einem Modul

4.1 Named Exports

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

export function multiply(a, b) {
  return a * b;
}

Ein Modul kann mehrere named exports besitzen.

4.2 Default Export

// logger.js
export default function log(message) {
  console.log(message);
}

Pro Modul ist nur ein Default Export erlaubt.

5. Importieren von Modulen

5.1 Named Imports

// app.js
import { add, multiply } from "./math.js";

console.log(add(2, 3));

5.2 Default Import

import log from "./logger.js";

log("Hallo Module");

5.3 Kombination

import log, { add } from "./utils.js";

6. Module im Browser verwenden

Damit Module im Browser funktionieren, muss das Script als type="module" eingebunden werden.

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

Module werden automatisch mit defer geladen und haben einen eigenen Scope.

7. Relative Pfade verstehen

Imports verwenden immer relative oder absolute Pfade.

import { helper } from "./utils/helper.js";
import api from "../api/api.js";

Ohne ./ oder ../ sucht der Browser kein lokales Modul.

8. Struktur eines kleinen Projekts

Eine sinnvolle Ordnerstruktur macht Projekte übersichtlich.

project/
  index.html
  js/
    app.js
    api.js
    dom.js
    utils.js

Beispielhafte Verantwortlichkeiten:

api.js — Fetch / HTTP
dom.js — DOM-Manipulation
utils.js — Hilfsfunktionen
app.js — Einstiegspunkt

9. Keine globalen Variablen

Module verhindern automatisch das Verschmutzen des globalen Namensraums.

// global.js (schlecht)
window.count = 0;

// module.js (gut)
let count = 0;
export function inc() {
  count++;
}

10. Zirkuläre Abhängigkeiten vermeiden

Zwei Module sollten sich nicht gegenseitig importieren.

Zirkuläre Abhängigkeiten führen zu schwer auffindbaren Fehlern und undefinierten Werten.

11. Gute Praxis

Ein Modul = ein klarer Zweck
Kurze, sprechende Dateinamen
Exports bewusst wählen
Keine Logik im globalen Scope

Gut:

// dom.js
export function renderUser(user) {
  /* ... */
}

12. Übungen

Übung 1.
Erstelle ein Modul math.js mit Funktionen für Addition und Subtraktion und importiere sie in app.js.

Übung 2.
Lagere DOM-Manipulationen in ein eigenes Modul aus.

Übung 3.
Strukturiere ein kleines Projekt in mindestens drei Module.

13. Zusammenfassung

Module strukturieren JavaScript-Code
import / export sind Standard
type="module" ist im Browser Pflicht
Saubere Struktur skaliert mit dem Projekt

Wer Module beherrscht, schreibt JavaScript auf professionellem Niveau.