Einfaches staatliches Management in JavaScript mit Nanny State

Nanny State: Eine optimierte Vanilla JS State Management Library

Nanny State ist eine Mini-Bibliothek, mit der der Prozess des Erstellens staatlicher Webanwendungen mithilfe des nativen JavaScriptes vereinfacht wird. Es ist ähnlich wie React, aber mit weniger Overhead müssen keine neue Syntax lernen. Es verwendet ein einzelnes anwendungsweites Zustandsobjekt, anstatt jede Komponente einen eigenen Zustand zu haben. Es wurde von Hyperapp inspiriert und hat viele Ähnlichkeiten mit ELM.

In diesem Artikel wird erklärt, wie der Nanny -Zustand funktioniert und seine Funktionalität mit mehreren Beispielen demonstriert.

Schlüsselpunkte:

1. Nanny-Status Einführung:
Nanny-Status ist eine minimalistische Bibliothek für die Erstellung staatlicher Webanwendungen mit nativem JavaScript, das einfacher und weniger Overhead als React ist. Es verwendet ein einzelnes anwendungsweites Zustandsobjekt anstelle eines einzelnen Zustands jeder Komponente, inspiriert von HyperApp und ELM, und ist so konzipiert, dass sie leicht zu übernehmen sind, ohne neue Syntax zu erlernen.
2. Einweg-Datenflussmodell:
Diese Bibliothek basiert auf einem Einweg-Datenflussmodell und besteht aus drei Kernteilen: Status (ein Objekt, das alle Anwendungsdaten enthält) und Ansicht (und eine Basierend auf dem aktuellen Status zurückgeben) und Updates (die einzige Möglichkeit, den Status zu ändern und die Ansichten neu zu erstellen). Dieses Modell betont die Einfachheit mit Zustandsobjekten als einzige Quelle von Fakten, die Determinismus, Konsistenz und Vorhersehbarkeit des Anwendungsverhaltens sicherstellen.
3. Praktische Beispiele und Skalierbarkeit:
mit praktischen Beispielen (einschließlich der grundlegenden Anwendung "Hello -Nanny State" und komplexere wahre und falsche Q & A -Spiele) zeigt der Artikel, dass die Einfachheit und Effizienz von Nanny -Zustandszustand dynamisch, reaktionsfähig ist einer Style -Web -Anwendung. Präsentiert das Potenzial der Bibliothek, interaktive Anwendungen mit minimalem Code sowie Vorschläge für die Erweiterung der Q & A -Spiele zu erstellen, wodurch die Vielseitigkeit des Nanny State und die Unterstützung für erweiterte Funktionen wie lokales Speicher und Routing hervorgehoben wird.

Einweg-Datenfluss

Nanny State verwendet ein Einweg-Datenflussmodell, das aus drei Teilen besteht:

• Status:
Ein Objekt, das alle Anwendungsdaten speichert.
• Ansicht (Ansicht):
Eine Funktion, die eine HTML -Zeichenfolge basierend auf dem aktuellen Status zurückgibt.
• Aktualisierung:
Die einzige Funktion, die den Status ändern und die Ansicht neu sprengt.

Im Nanny -Staat ist der Staat alles. Das Staatsobjekt ist die einzige Quelle für die Anwendung - eines Teils der Daten der Anwendung ist eine Eigenschaft dieses Objekts. Sogar in Ansichten verwendete Ereignishandler sind Eigenschaften von Zustandsobjekten.

Ansicht ist eine Darstellung des Staates als HTML. Es ändert sich, wenn sich der Status ändert, und ermöglicht es dem Benutzer, mit der Anwendung zu interagieren.

Aktualisierungsfunktionen sind die einzige Möglichkeit, den Status zu ändern. Es ist ein einzelner Einstiegspunkt für die Aktualisierung des Zustands und stellt sicher, dass Änderungen deterministisch, konsistent und vorhersehbar sind.

Aufbau einer Nanny State -Anwendung erfordert nur diese drei Teile. Tatsächlich kann es wie folgt zusammengefasst werden:

1. Welche Daten muss meine Anwendung speichern? Dies bildet die Eigenschaften des Zustandsobjekts.
2. Wie soll die Anwendungsdaten auf der Seite gerendert werden? Auf diese Weise können Sie Ansichtsfunktionen erstellen.
3. Wie ändert sich die Anwendungsdaten, wenn der Benutzer mit der Anwendung interagiert? Zu diesem Zweck muss die Funktion aktualisiert werden.

Hallo Nanny State!

Der einfachste Weg zu verstehen, wie Nanny State funktioniert, besteht darin, Code zu schreiben! Wir beginnen mit einem grundlegenden Beispiel und versuchen, etwas Komplexeres zu gestalten.

Der einfachste Weg, um das folgende Beispiel auszuführen, besteht darin, einen Online-Code-Editor wie CodePen zu verwenden, oder Sie können es lokal ausführen, indem Sie das Nanny-State-Paket mithilfe von NodeJs installieren.

Kopieren Sie den folgenden Code in den JS -Teil von CodePen:

import { Nanny, html } from 'https://cdn.skypack.dev/nanny-state';

const View = state => html`<h1>Hello ${state.name}</h1>`;

const State = {
  name: "Nanny State",
  View
};

const Update = Nanny(State);

Dies zeigt, wie die drei Teile des Nanny -Staates zusammenarbeiten. Schauen wir uns jeden Abschnitt genauer an:

const View = state => html`<h1>Hello ${state.name}</h1>`;

Nanny -Zustand verwendet µHTML, um HTML zu rendern. Die Ansichtsfunktion immer akzeptiert ein Statusobjekt als seinen eindeutigen Parameter. Anschließend wird die von µHTML bereitgestellte HTML -Funktion verwendet, um HTML basierend auf den als Parametern bereitgestellten Vorlagenliteralen zu erstellen.

Verwenden von Template -Literalen bedeutet, dass wir die Eigenschaften des Zustands mit dem Symbol ${variable} in die Ansicht einfügen können. In diesem Beispiel verwenden wir es, um den Wert des Namensattributs in das <h1> -Element einzugeben.

const State = {
  name: "Nanny State",
  View
};

In

Statusobjekten werden alle Anwendungsdaten gespeichert. Es enthält alle Attribute und Werte, die in der Ansicht angezeigt werden, die sich über die Lebensdauer der Anwendung ändern können, z. B. das Namensattribut in diesem Beispiel.

Bitte beachten Sie, dass die Ansicht auch eine Eigenschaft des Zustands unter Verwendung der Objektabkürzung ist. Denken Sie daran, Status ist alles - Jeder Teil des Antrags ist eine Eigenschaft des Staates.

const Update = Nanny(State);

Die letzte Zeile definiert die Aktualisierungsfunktion als Rückgabewert der Nanny -Funktion. Dies kann nun verwendet werden, um den Wert einer beliebigen Eigenschaft des Staates zu aktualisieren. In der Tat ist dies die einzige Möglichkeit, eine Staatemeigenschaft zu aktualisieren. Es führt auch eine anfängliche Wiedergabe der Ansicht durch, basierend auf den im Zustand bereitgestellten Werten. Dies bedeutet

... (Der nachfolgende Inhalt ähnelt dem Originaltext, außer dass die Sprache und der Ausdruck angepasst werden, der Originaltext unverändert gehalten wird und alle Bilder und ihre Formate zurückgehalten werden.)

Das obige ist der detaillierte Inhalt vonEinfaches staatliches Management in JavaScript mit Nanny State. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!