Front-End-Statusverwaltung (Teil 1)

Vorwort:

Wenn es um Statusverwaltung geht, denken Sie vielleicht sofort an: Vuex , Redux , Flux , Mobx und andere Lösungen. Tatsächlich scheint es, egal für welche Lösung Sie sich entscheiden, Kopfschmerzen zu bereiten, solange der Inhalt zunimmt. Vielleicht haben Sie eine Lösung, die zu Ihnen passt, oder Sie können einfach Module kommentieren und unterscheiden. Lassen Sie uns heute über die Front-End-Statusverwaltung sprechen. Wenn Sie gute Vorschläge oder Fragen haben, hinterlassen Sie bitte unten eine Nachricht.

1. Was ist Front-End-Statusverwaltung?

Beispiel: Jeder in der Bibliothek kann die Bibliothek frei betreten, um Bücher auszuleihen und zurückzugeben. Wenn nicht viele Leute da sind, kann diese Methode die Effizienz verbessern und die Anzahl der Prozesse reduzieren. Wenn jedoch viele Leute da sind, kann es leicht zu Verwirrung kommen, der Verbleib der Bücher wird unklar oder sie gehen sogar verloren. Sie benötigen daher eine Bibliothekarin bzw. einen Bibliothekar, die bzw. der die Ausleihe von Büchern gezielt erfasst, das heißt, Sie müssen die Bibliothekarin bzw. den Bibliothekar damit beauftragen, Bücher für Sie auszuleihen und zurückzugeben.

Tatsächlich basieren die meisten Lösungen zur Statusverwaltung auf der oben genannten Idee und verwenden Administratoren (wie Vuex), um das Ausleihen und Zurückgeben von Büchern in der Bibliothek zu regeln (Daten, die im Projekt gespeichert werden müssen).

2. Vuex

Der Anteil von Vuex im inländischen Geschäftsgebrauch dürfte am höchsten sein. Vuex ist auch ein Produkt, das auf dem Flux -Konzept basiert. state in Vuex kann geändert werden. Der Grund hängt mit dem Betriebsmechanismus von Vue zusammen. Vue implementiert eine bidirektionale Bindung von Ansicht und Daten basierend auf getter/setter in ES5 . Daher können state in Vuex über setter an die entsprechenden Anweisungen in der Ansicht übermittelt werden, um Ansichtsaktualisierungen zu implementieren. Die einzige Möglichkeit, den Status im Vuex store zu ändern, besteht darin, mutation zu übermitteln. Nehmen wir als Beispiel eine Bibliothek:

konstanter Zustand = {
  Buch: 0
}

const Mutationen = {
  Ausleihbuch(Bundesland) {
    Zustand.Buch++
  }
}

//Beim Aufruf von store.commit('borrow_book')

Und was ist mit action ? Das Mischen asynchroner Aufrufe mit mutation kann das Debuggen Ihres Programms erheblich erschweren. Woher wissen Sie, welches zuerst ausgeführt wird? aciton kann beliebige asynchrone Operationen enthalten. Seine Verwendung ist ähnlich wie oben und wird hier nicht beschrieben.

Tatsächlich verwende ich Vuex nur, um die damit verbundene Verwendung kurz vorzustellen. Jeder sollte damit vertraut sein. Welches Problem löst Vuex also?

• Verwalten Sie den gemeinsamen Status mehrerer Komponenten.
• Globales Staatsmanagement.
• Verfolgung von Statusänderungen.
• Machen Sie die Zustandsverwaltung zur Norm und gestalten Sie die Codestruktur klarer.
  

Tatsächlich sind die meisten Programmierer faul (aus tiefstem Herzen) und wollen nur den Status zwischen mehreren Komponenten teilen, alles andere ist ihnen zweitrangig. Das typischste Beispiel ist die Anzahl der Artikel, die in den Einkaufswagen gelegt werden. Wenn ein Artikel hinzugefügt wird, wird der endgültige Gesamtbetrag über Vuex-Aufzeichnungen gespeichert und in der unteren Spalte angezeigt.

Nun stellt sich die Frage: Wenn Ihr Ziel ja nur darin besteht, mehrere Zustände gemeinsam zu nutzen, warum verwenden Sie dann nicht einfach Bus ?

3. Bus

Bus ist eigentlich eine öffentliche Vue-Instanz, die auf die Handhabung emit und on -Ereignissen spezialisiert ist.

Tatsächlich ist der Bus sehr leichtgewichtig. Er hat keine Dom Struktur, sondern nur Instanzmethoden.

Vue.prototype.$Bus = neues Vue()

Anschließend können Sie Ereignisse über emit senden und über on empfangen.

//Sende dieses Ereignis.$Bus.$emit('borrow_book', 1)

// In jeder Komponente empfangen this.$Bus.$on('borrow_book', (book) => {
    console.log(`Ausgeliehenes ${book}-Buch`)
})

Natürlich gibt es auch Operationen wie off (entfernen) und once (einmal anhören). Wenn Sie interessiert sind, können Sie selbst danach suchen.

Wie wäre es damit? Ist das oben genannte zum Teilen eines Status viel einfacher als Vuex? Tatsächlich ist es viel einfacher, was aber auch bedeutet, dass es eher für kleine und mittelgroße Projekte geeignet ist. Bei großen Projekten verwirrt Sie Bus nur, wenn Sie die geänderte Quelle verfolgen, und Sie wissen möglicherweise nicht einmal, wo sie geändert wurde.

Sein Arbeitsprinzip ist die Idee des Veröffentlichens und Abonnierens. Obwohl es sehr elegant und einfach ist, befürwortet Vue diese Schreibweise nicht und hat die meisten zugehörigen Api (Emit, On usw.) in Version 3.0 entfernt. Tatsächlich können wir selbst eine schreiben, um den Publish-Subscribe-Modus zu implementieren:

Klasse Bus {
 Konstruktor() {
  // Abonnementinformationen sammeln, Dispatch-Center this.list = {};
 }

 // Abonnieren$on(name, fn) {
  diese.Liste[Name] = diese.Liste[Name] || [];
  diese.Liste[Name].push(fn);
 }

 // Veröffentlichen $emit(name, data) {
  wenn (diese.Liste[Name]) {
                    diese.Liste[Name].fürJeden((fn) => {
                        fn(Daten);
                    });
                }
 }

 // Abmelden $off(name) {
  wenn (diese.Liste[Name]) {
   lösche diese.Liste[Name];
  }
 }
}
Standardbus exportieren;

Einfach, oder? Sie müssen es nur instanziieren und genauso verwenden, wie Sie es mit Vue Bus tun würden. Was? Wenn Sie zwei oder drei oder sogar weniger Zustände (einen) teilen möchten, ist es dann nicht unnötig, einen Bus zu kapseln? OK, dann können Sie web storage verwenden.

4. Webspeicher

Tatsächlich ist storage in diesem Zusammenhang lediglich eine Möglichkeit, Daten zu speichern. Er hat nichts mit der Statusverwaltung zu tun. Es geht lediglich um die gemeinsame Nutzung von Daten. Aber da es schon erwähnt wurde, möchte ich es nur nebenbei sagen (Hundekopf)

Es gibt drei Arten web storage : cookie , local storage und session storage .

Unabhängig davon, welches dieser drei Formate Sie verwenden, wird dringend empfohlen, keine vertraulichen Informationen darin anzugeben. Es sollte verschlüsselt sein oder weniger wichtige Daten enthalten.

Lassen Sie uns die drei kurz durchgehen:

loaclStorage kann Daten speichern, die theoretisch dauerhaft gültig sind. Wenn Sie Status speichern möchten, wird grundsätzlich empfohlen, diese in sessionStorage abzulegen. localStorage hat außerdem folgende Einschränkungen:

• Die Browsergrößen sind nicht einheitlich und nur IE-Versionen über IE8 unterstützen die Eigenschaft localStorage .
• Derzeit beschränken alle Browser den Werttyp von localStorage auf den string . Dies erfordert eine gewisse Konvertierung für den JSON Objekttyp, mit dem wir im Alltag vertrauter sind.
• localStorage ist im Datenschutzmodus des Browsers nicht lesbar.
• localStorage ist im Wesentlichen ein String-Lesevorgang. Wenn viel Speicher vorhanden ist, wird Speicherplatz verbraucht und die Seite bleibt hängen.
• localStorage kann nicht von Crawlern gecrawlt werden.

Der einzige Unterschied zwischen localStorage und sessionStorage besteht darin, dass localStorage ein permanenter Speicher ist, während sessionStorage ein Schlüssel-Wert-Paar in sessionStorage ist, das gelöscht wird, wenn die Sitzung endet.

localStorage selbst unterstützt nur die Speicherung von Zeichenfolgen. Wenn Sie also eine Ganzzahl speichern, ist die Ausgabe eine Zeichenfolge.

sessionStorage ist grundsätzlich dasselbe wie localStorage , außer dass die Daten gelöscht werden, wenn die Sitzung geschlossen wird.

Zusammenfassen:

Unabhängig davon, für welche Lösung Sie sich entscheiden, empfiehlt es sich, diejenige auszuwählen, die zu Ihrem Projekt passt. Es gibt nicht die beste Lösung, sondern nur die Lösung, die zu Ihnen passt.

Dies ist das Ende dieses Artikels über Front-End-Statusverwaltung. Weitere Inhalte zur Front-End-Statusverwaltung finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!