# JS 13: ES Module & Clean Architecture 🧱 Willkommen zu **Modul 13** des JavaScript-Kurses! Große Softwareprojekte scheitern selten an einzelnen Algorithmen – sie scheitern an unΓΌbersichtlichem "Spaghetti-Code", bei dem alles mit allem verknΓΌpft ist. In diesem Modul lernst du das offizielle JavaScript-Modulsystem (**ES Modules**) sowie grundlegende Architekturprinzipien wie **Separation of Concerns (SoC)** und **Dependency Injection (DI)** kennen. --- ## πŸ’‘ 1. Das Wichtigste in KΓΌrze ### A. Named Exports vs. Default Exports In ES6+ teilst du Code in eigenstΓ€ndige Dateien auf: ```javascript // πŸ“ mathUtils.js (Named Exports) export const PI = 3.1415926535; export function addieren(a, b) { return a + b; } export function multiplizieren(a, b) { return a * b; } ``` ```javascript // πŸ“ RechnungsEngine.js (Default Export) export default class RechnungsEngine { constructor() { this.name = "Haupt-Engine"; } } ``` --- ### B. Module importieren Beim Importieren kannst du gezielte Teile oder das gesamte Modul einbinden: ```javascript // 1. Gezielter Named Import: import { addieren, PI } from "./mathUtils.js"; // 2. Default Import (freier Name wΓ€hlbar): import RechnungsEngine from "./RechnungsEngine.js"; // 3. Namespace Import (alles als Objekt bΓΌndeln): import * as MathUtils from "./mathUtils.js"; console.log(MathUtils.addieren(5, 3)); ``` --- ### C. Separation of Concerns (Trennung von Verantwortlichkeiten) Saubere Software trennt verschiedene Aufgabenbereiche strikt: ``` β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”‚ RechnungsEngine (Controller) β”‚ β”‚ - Steuert den Ablauf β”‚ β”‚ - Kennt keine direkten UI-/DOM-Details β”‚ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β”‚ nutzt β”‚ nutzt β–Ό β–Ό β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”‚ MathModule (Logik & Mathe) β”‚ β”‚ FormatterModule (View) β”‚ β”‚ - Reines Rechnen β”‚ β”‚ - WΓ€hrung ("1.250 €") β”‚ β”‚ - Keine Nebeneffekte β”‚ β”‚ - Datum ("2026-08-30") β”‚ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ ``` 1. **Logikschicht (`MathModule`):** Rechnet prΓ€zise und wirft bei unzulΓ€ssigen Werten (z.B. Division durch 0) kontrollierte Fehler. 2. **PrΓ€sentationsschicht (`FormatterModule`):** Bereitet Zahlen und Datumsangaben fΓΌr Menschen lesbar auf (z.B. deutsches WΓ€hrungsformat mit Komma und Tausendertrennzeichen). 3. **Orchestrierungsschicht (`RechnungsEngine`):** Verbindet Datenmodell und Schichten via **Dependency Injection** im Konstruktor. --- ## πŸ—οΈ Die didaktische Analogie: "Die modularen Legosteine & Container-Bauweise" - **Monolithischer Code ist wie eine Statue aus einem einzigen Steinblock:** Willst du einen Arm anpassen, bricht der ganze Steinblock auseinander. - **Modulare Software ist wie moderne Frachtcontainer & Legosteine:** - Jeder Container hat standardisierte EckbeschlΓ€ge (definierte Schnittstelle / Exports). - Was im Container transportiert wird (interne Implementierung), ist dem Kran (Controller) egal. - Du kannst den Motor (z.B. ein Mathe-Modul) jederzeit gegen einen Turbomotor (Mock-Objekt im Test) austauschen, solange die Stecker passen (**Dependency Injection**). --- ## 🎯 Aufgaben & Teilziele in `aufgabe.js` 1. **TODO 1:** `MathModule` Implementiere `addieren`, `subtrahieren`, `multiplizieren`, `dividieren` (mit Schutz vor Division durch 0) und `runden`. 2. **TODO 2:** `FormatterModule` Implementiere `formatiereWaehrung` (deutsches Format, z.B. `1.250,50 EUR`) und `formatiereDatumIso` (`YYYY-MM-DD`). 3. **TODO 3:** `RechnungsEngine.erstellePosition(bezeichnung, menge, einzelpreis)` Validiere Eingaben, berechne den Gesamtpreis ΓΌber `this.math` und gib die Position zurΓΌck. 4. **TODO 4:** `RechnungsEngine.berechneRechnung(positionen, steuersatzProzent)` Summiere Netto, berechne Steuer und Brutto, und formatiere alle Ausgaben ΓΌber `this.formatter`. --- ## πŸ§ͺ Tests ausfΓΌhren Γ–ffne die Web-IDE oder fΓΌhre die Unittests aus. Sobald alle 20 Tests grΓΌn sind, hast du Modul-Architektur und saubere Code-Strukturierung gemeistert!