Lektion 9: JavaScript-Laufzeitgrundlagen: Architektur-Checkpoint

Konzepterklärung

"JavaScript-Laufzeitgrundlagen: Architektur-Checkpoint" ist eine Pause, um die Struktur zu betrachten, nicht nur die Ausgabe. Sie wissen bereits, wie man Code ausführt. Hier geht es darum, wie Sie ihn so anordnen, dass jedes Teil eine klare Aufgabe hat. Diese Lektion verwendet ein kleines Modulbeispiel, um zu zeigen, wie Formatierungslogik an einem Ort leben und an anderer Stelle wiederverwendet werden kann. Sie üben, Belange zu trennen, Grenzen klar zu benennen und zu überprüfen, dass eine Datei nicht zu viel über eine andere wissen muss. Ziel ist es, Ihnen zu helfen, Architektur als kleine Entscheidungen über Verantwortlichkeiten zu sehen, nicht als etwas, das großen Anwendungen vorbehalten ist.

Wo der Code hingehört

1. Beginnen Sie mit Variablen und Eingaben. Verwenden Sie die Syntax von Browser oder Node.js klar.
2. Fügen Sie die Verarbeitungslogik im mittleren Abschnitt hinzu.
3. Schließen Sie mit Ausgabe und schneller Validierung ab.

Befehlsreferenz

• Identifizieren Sie, welcher Teil des Beispiels für die Formatierung und welcher für die Präsentation verantwortlich ist.
• Verschieben Sie jede gemischte Verantwortlichkeit in die am besten geeignete Funktion oder das Modul.
• Erklären Sie, warum die Wiederverwendung eines Formatierers aus einer anderen Datei sauberer ist, als dieselbe Logik inline neu zu erstellen.
• Testen Sie das Modul mit einem zweiten Wert, um zu bestätigen, dass die Grenze tatsächlich wiederverwendbar ist.

Schritt-für-Schritt-Anleitung

1. Führen Sie das Beispiel aus und bestätigen Sie, dass beide Preise dieselbe Formatierungsregel verwenden.
2. Beschriften Sie den Code nach Verantwortlichkeit: importierter Helfer, lokale Anzeigelogik und endgültige Ausgabe.
3. Ändern Sie ein Detail in der Anzeigeschicht, ohne den Formatierungshelfer zu berühren.
4. Ändern Sie dann eine Formatierungsregel und beobachten Sie, wie beide Ausgaben vom gemeinsamen Modul profitieren.
5. Fassen Sie abschließend zusammen, wofür jede Datei oder Funktion verantwortlich ist und warum diese Aufteilung nützlich ist.

Übungsaufgaben

• Erstellen Sie ein zweites Hilfsmodul für eine verwandte Aufgabe, z. B. das Formatieren von Prozentwerten oder Daten, und halten Sie die Hauptdatei sauber.
• Refaktorieren Sie ein Inline-Formatierungsbeispiel, sodass die wiederverwendbare Regel in einem separaten Modul lebt.
• Fügen Sie einen weiteren ausgegebenen Wert hinzu und halten Sie die Struktur leicht lesbar.

Coding-Challenges

• Nehmen Sie ein kurzes Skript, das Formatierung, Datenverarbeitung und Ausgabe mischt, und teilen Sie es in sauberere Teile auf.
• Entwerfen Sie ein kleines Modul-Setup, bei dem ein Helfer in mindestens zwei verschiedenen Anzeigefunktionen wiederverwendet werden kann.

Kleine Übungsaufgaben

• Benennen Sie eine Funktion um, um ihre Verantwortlichkeit klarer widerzuspiegeln.
• Fügen Sie einen weiteren Beispielaufruf hinzu.
• Schreiben Sie einen Satz, der erklärt, warum diese Struktur leichter erweiterbar ist.