📂 Dateien dieser Einheit:
1. 📦 ES6 Modules: Exportieren & Importieren
In modernem JavaScript teilst du komplexen Code in wiederverwendbare, isolierte Module auf:
// 📁 utils/math.js (Named Exports)
export const PI = 3.14159;
export function addieren(a, b) { return a + b; }
// 📁 models/Rechner.js (Default Export)
export default class Rechner { ... }
// 📁 app.js (Gezielter & Default Import)
import Rechner from "./models/Rechner.js";
import { addieren, PI } from "./utils/math.js";
import * as Formatters from "./utils/format.js";🧱 Didaktische Analogie: Modulare Legosteine & Container
Monolithischer Code gleicht einer in Stein gemeißelten Statue: Ändert man einen Arm, bricht die gesamte Skulptur. Modulare Software ist wie ein Container-Hafen: Jeder Container hat genormte Maße (Exports/Imports), arbeitet innen autark und kann beliebig ausgetauscht oder transportiert werden.
2. 🏗️ Separation of Concerns (SoC)
Jedes Modul hat genau eine Verantwortung. Das verhindert Nebeneffekte und macht Unittests zum Kinderspiel:
🏛️ Schichten-Architektur: Rechnungs-System
1. Controller / Orchestrator (
RechnungsEngine): Steuert den Ablauf, kennt aber keine Formatierungsdetails.
2. Business Logic (
MathModule): Rechnet mathematisch exakt, wirft Fehler bei 0-Division.
3. Presentation Layer (
FormatterModule): Bereitet Zahlen als "1.250,50 EUR" und Datumsangaben für Menschen auf.
📑 3. Cheat-Sheet: Modul-Syntax & Konzepte
| Konstrukt | Syntax-Beispiel | Bedeutung |
|---|---|---|
Named Export |
export function add() {} |
Exportiert mehrere benannte Elemente |
Default Export |
export default class App {} |
Hauptexport eines Moduls (1x pro Datei) |
Named Import |
import { add } from './math.js' |
Gezieltes Importieren einzelner Funktionen |
Namespace Import |
import * as M from './math.js' |
Bündelt alle Exporte als Objekt |
Dependency Injection |
new Engine(mathMod, fmtMod) |
Abhängigkeiten von außen übergeben (Testbarkeit) |
🧠 Diagnostischer Selbst-Check
Überprüfe dein Verständnis der Kernkonzepte und typischen Denkfallen, bevor du den Code in der Web-IDE schreibst.