Erstellen Sie eine To-Do-Liste mit HyperApp, dem 1KB JS Micro-Framework

Dieses Tutorial führt Sie durch das Erstellen einer To-Do-List-Anwendung mit HyperApp, einem leichten JavaScript-Framework. Ideal für diejenigen, die funktionale Programmierprinzipien erforschen möchten, ohne sich in Komplexität zu verleihen.

HyperApps Popularität beruht auf seinem pragmatischen Ansatz und winzigen Größe (1,4 kb) und liefert die Leistung, die mit React und Redux vergleichbar ist.

Schlüsselkonzepte:

• HyperApps Triade: HyperApp -Zentren rund drei Kernkomponenten: Status (eine einzige, unveränderliche Datenquelle), Aktionen (reine Funktionen, die den Zustand aktualisieren) und Ansichten (Funktionen, die die Benutzeroberfläche basierend auf dem Status rendern) .
• virtuelles DOM: HyperApp nutzt ein virtuelles DOM für effiziente UI -Updates, ähnlich wie bei React.
• Statusverwaltung: Sein Zustandsmanagement ähnelt Redux und vereinfacht die Datenbearbeitung.
• Tutorial Focus: Dieses Tutorial umfasst das Erstellen, Ausfüllen und Löschen von Aufgabenelementen, um die Kernmechanik von HyperApp zu veranschaulichen.
• reine Aktionen: Wirkungen sind reine Funktionen, um vorhersehbare Zustandsübergänge und Unveränderlichkeit zu gewährleisten.
• Interaktive Web -Apps: Das Tutorial zeigt die Kapazität von HyperApp zum Erstellen interaktiver Webanwendungen.

Was ist Hyperapp?

HyperApp erstellt dynamische, einseitige Web-Apps, die ein virtuelles DOM für schnelle UI-Updates (wie React) und ein einzelnes Statusobjekt (wie Redux) für eine optimierte Statusverwaltung haben. Seine Grundlage ist von der ELM -Architektur inspiriert.

HyperApps drei Hauptteile:

• Status: Ein einzelner Objektbaum, der alle App -Daten speichert.
• Aktionen: Funktionen, die den Status ändern.
• Ansicht: Eine Funktion, die virtuelle Knoten zurückgibt (übersetzt auf HTML), unter Verwendung von JSX oder ähnlicher Vorlagen, Zugriff auf sowohl Status als auch Aktionen.

Erste Schritte (mit CodePen):

1. Setzen Sie den JavaScript -Präprozessor in Codepen auf Babel.
2. Hyperapp importieren: https://unpkg.com/hyperapp
3. import app und h: const { h, app } = hyperapp;
4. Aktivieren Sie JSX: /** @jsx h */
5. Initialisieren Sie die App: const main = app(state, actions, view, document.body);

Erstellen der Aufgabenlisten-App (Hyperlist):

Das Tutorial führt Sie dann Schritt für Schritt durch, indem Sie eine To-Do-List-App erstellen und:

• Ausgangszustand und Ansicht: Definieren des Ausgangszustands (items, input) und einer grundlegenden Ansichtsstruktur.
• Aufgaben hinzufügen: Erstellen einer Aktion (add) zum Hinzufügen neuer Aufgaben zur Liste, wodurch der Status unerbittlich aktualisiert wird.
• Aufgaben als vollständig: Implementieren einer Aktion (toggle), um den completed -Status von Aufgaben zu ändern.
• Aufgaben löschen: Hinzufügen einer Aktion (destroy) zum Entfernen einzelner Aufgaben.
• Löschen abgeschlossene Aufgaben: Erstellen einer Aktion (clearAllCompleted), um alle abgeschlossenen Aufgaben zu entfernen.

Das Tutorial enthält Codeausschnitte für jeden Schritt, einschließlich Komponenten zum Hinzufügen von Elementen (AddItem) und zum Anzeigen von Listenelementen (ListItem) sowie detaillierte Erklärungen der Aktionen und ihrer Funktionalität. Es betont die Verwendung von reinen Funktionen und unveränderlichen Zustandsaktualisierungen während des gesamten Prozesses.

Schlussfolgerung:

Das Tutorial schließt mit der Zusammenfassung des Prozesses und der Förderung einer weiteren Erforschung der Fähigkeiten und Ressourcen von HyperApp, einschließlich der Dokumentation, des Quellcode und der Unterstützung der Community, gefördert. Es schlägt auch zukünftige Verbesserungen der TO-Do-List-Anwendung vor. In einem letzten Abschnitt werden häufig gestellte Fragen zu HyperApp und deren Verwendung in der Erstellung einer To-Do-Liste gestellt.

Das obige ist der detaillierte Inhalt vonErstellen Sie eine To-Do-Liste mit HyperApp, dem 1KB JS Micro-Framework. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!