03 | Anwendungen modularisieren

In der dritten Woche beschäftigen wir uns mit ersten Ansätzen für gutes Software Design in JavaScript-Anwendungen. Sie lernen mehr über die besonderen Eigenschaften von Funktionen kennen und erfahren, wie Sie mit unterschiedlichen Modul-Konzepten Teilbereiche Ihrer Anwendung separieren und von einander lösen können. Sie vertiefen Ihre Kenntnisse über die Event-Verarbeitung und Callback-Funktionen in JavaScript um auf dieser Basis auch eine indirekte Kommunikation zwischen Bestandteilen Ihrer Anwendung zu ermöglichen.

Die Live-Sitzung zu dieser Lektion findet am 13. Mai ab 10:00 Uhr per Stream über Twitch.tv statt.

Ziele

Inhalte zum Durcharbeiten

Weitere Materialien im Mozilla Developer Network

Zusätzliche Tutorials und Hilfestellungen

Übungsaufgaben

Module erstellen

  1. Erstellen Sie ein Modul (revealing module pattern), das bei Konstruktion innerhalb eines übergebenen DOM-Elements ein leeres Kindelement (div) erzeugt und bei jedem Mausklick auf diesen Element die Hintergrundfarbe zufällig verändert.

  2. Erstellen Sie ein Modul (ES6), das eine Liste an Personen (auf der Basis eines einfachen Prototypen mit Namen und einer eindeutigen ID) verwaltet. Das Modul bietet öffentliche Methoden zur Suche nach bestimmten Personen anhand z.B. des Namens an. Befüllen Sie das Modul mit Informationen, die Sie über Eingabefelder vom Benutzer eingeben lassen.

  3. Prüfen Sie Ihre Lösung zur ersten Übungsaufgabe. Können Sie Ihren Code durch die bewusste Verwendung von Modulen optimieren?