So verwalten Sie Ihren JavaScript -Anwendungszustand mit MOBX

Dieser Artikel wurde von Michel Weststrat und Aaron Boyer überprüft. Vielen Dank an alle Peer -Rezensenten von SitePoint für die perfekte Erstellung von SitePoint -Inhalten!

Wenn Sie jemals eine Anwendung geschrieben haben, die komplexer als eine sehr einfache Verwendung von JQuery ist, haben Sie möglicherweise das Problem, verschiedene Teile der Benutzeroberfläche synchronisiert zu halten. Oft müssen Änderungen an Daten an mehreren Stellen reflektiert werden, und wenn die Anwendung wächst, können Sie sich möglicherweise in Schwierigkeiten befinden. Um diese Verwirrung zu kontrollieren, werden Ereignisse häufig verwendet, um verschiedene Teile der Anwendung mitzuteilen, wann Änderungen aufgetreten sind.

Wie haben Sie den Anwendungsstatus heute verwaltet? Ich werde die Freiheit nehmen, um zu sagen, dass Sie die Veränderungen überschreiben. Das stimmt. Ich kenne dich nicht einmal, aber ich werde darauf hinweisen. Wenn Sie nicht überschrieben sind, bin ich sicher, dass Sie zu hart gearbeitet haben.

natürlich, es sei denn, Sie verwenden Mobx…

Schlüsselpunkte

• Vereinfachen Sie die Statusverwaltung mit MOBX: effizient den Anwendungszustand durch beobachtbare Objekte verwalten und die Komplexität und den Boilerplate -Code in anderen staatlichen Verwaltungsbibliotheken wie Redux verringern.
• MOBX Automatisches Update: Implementieren Sie die MOBX -Funktion von MOBX autorun implementiert die
-Funktion von MOBX, um UI -Komponenten automatisch als Reaktion auf Statusänderungen ohne manuelle Ereignisverarbeitung zu aktualisieren, wodurch der Synchronisierungsprozess der gesamten Anwendung vereinfacht wird.
• Verbesserung der Leistung mit berechneten Werten:
Verwenden Sie berechnete Werte von MOBX, um Daten aus dem Zustand abzuleiten, um sicherzustellen, dass die Komponenten nur bei Bedarf neu geführt werden, wodurch die Gesamtanwendungsleistung verbessert wird.
• MOBX ist leicht zu starten:
Integrieren Sie MOBX nahtlos in vorhandene JavaScript -Anwendungen, indem Sie Standardobjekte in beobachtbare Objekte konvertieren, um eine allmähliche Einführung ohne vollständige Umschreibung zu ermöglichen.
• Transaktionsänderung mit MOBX-Operationen:
MOBX-Operationen anwenden, um Zustandsänderungen in Transaktionen zu verkörpern, wodurch die Updates mit dem redundanten Rendern minimiert werden, was zu effizienteren und weniger fehleranfälligen Code führt.

Was ist "Zustand"?

fullName() Dies ist ein Charakter. Hey, das bin ich! Ich habe einen erstenNamen, einen Lastnamen und ein Alter. Auch wenn ich Probleme habe, kann die

-Funktion angezeigt werden.

var person = {
  firstName: 'Matt',
  lastName: 'Ruby',
  age: 37,
  fullName: function () {
    return this.firstName + ' ' + this.lastName;
  }
};

Wie werden Sie Ihre verschiedenen Ausgänge (Ansichten, Server, Debug -Protokolle) von Modifikationen an diese Person benachrichtigen? Wann werden Sie diese Benachrichtigungen auslösen? Vor MOBX würde ich einen Setter verwenden, der ein benutzerdefiniertes JQuery-Ereignis oder JS-Signale auslöst. Diese Optionen dienen mir gut, aber meine Verwendung von ihnen ist alles andere als akribisch. Wenn sich ein Teil des Personenobjekts ändert, werde ich ein "geänderter" Ereignis auslösen.

Angenommen, ich habe einen Ansichtscode, der meinen Namen anzeigt. Wenn ich mein Alter ändere, wird die Ansicht aktualisiert, da sie an das geänderte Ereignis dieser Person gebunden ist. <🎜>

var person = {
  firstName: 'Matt',
  lastName: 'Ruby',
  age: 37,
  fullName: function () {
    return this.firstName + ' ' + this.lastName;
  }
};

Wie ziehen wir diesen Überschlag fest? Einfach. Stellen Sie einfach einen Setter für jedes Feld ein und legen Sie ein separates Ereignis für jede Änderung fest. Warten Sie - Wenn Sie das Alter und den erstenNamen gleichzeitig ändern möchten, können Sie mit Überrückern beginnen. Sie müssen eine Möglichkeit erstellen, das Ereignisfeuer zu verzögern, bis beide Änderungen abgeschlossen sind. Es klingt nach Arbeit und ich bin faul ...

mobx kommt, um

zu retten

MOBX ist eine einfache, fokussierte, effiziente und unauffällige staatliche Managementbibliothek, die von Michel Weststrat entwickelt wurde.

aus MOBX -Dokumentation:

Tun Sie einfach etwas gegen den Staat und MOBX wird sicherstellen, dass Ihre Bewerbung diese Änderungen respektiert.

person.events = {};

person.setData = function (data) {
  $.extend(person, data);
  $(person.events).trigger('changed');
};

$(person.events).on('changed', function () {
  console.log('first name: ' + person.firstName);
});

person.setData({age: 38});

Haben Sie den Unterschied bemerkt? mobx.observable ist die einzige Änderung, die ich vorgenommen habe. Schauen wir uns das Beispiel erneut an: console.log

var person = mobx.observable({
  firstName: 'Matt',
  lastName: 'Ruby',
  age: 37,
  fullName: function () {
    return this.firstName + ' ' + this.lastName;
  }
});

Verwenden

beobachtet MOBX nur den Inhalt, auf den zugegriffen wurde. autorun

Wenn Sie das für ordentlich halten, schauen Sie sich Folgendes an:

mobx.autorun(function () {
  console.log('first name: ' + person.firstName);
});

person.age = 38; // 打印为空
person.lastName = 'RUBY!'; // 仍然为空
person.firstName = 'Matthew!'; // 此处触发

interessiert? Ich weiß, dass Sie interessiert sind.

MOBX -Kernkonzept

beobachtbar

mobx.autorun(function () {
  console.log('Full name: ' + person.fullName);
});

person.age = 38; // 打印为空
person.lastName = 'RUBY!'; // 触发
person.firstName = 'Matthew!'; // 也触发

mobx beobachtbare Objekte sind nur Objekte. In diesem Beispiel beobachte ich nichts. In diesem Beispiel wird angezeigt, wie MOBX in Ihre vorhandene Codebasis integriert wird. Verwenden Sie einfach

oder mobx.observable(), um loszulegen. mobx.extendObservable()

Autorun

var log = function(data) {
  $('#output').append('' +data+ '');
}

var person = mobx.observable({
  firstName: 'Matt',
  lastName: 'Ruby',
  age: 34
});

log(person.firstName);

person.firstName = 'Mike';
log(person.firstName);

person.firstName = 'Lissy';
log(person.firstName);

Was möchten Sie tun, wenn sich Ihre Observablen ändern, oder? Lassen Sie mich

einführen, wodurch sich ein Rückruf auslöst, wenn sich ein Hinweis auf beobachtbare Werte ändert. Beachten Sie, dass in dem obigen Beispiel autorun() bei ändert sich das Alter nicht ausfeuert. autorun()

berechnet

var person = mobx.observable({
  firstName: 'Matt',
  lastName: 'Ruby',
  age: 0
});

mobx.autorun(function () {
  log(person.firstName + ' ' + person.age);
});

// 这将打印Matt NN 10次
_.times(10, function () {
  person.age = _.random(40);
});

// 这将什么也不打印
_.times(10, function () {
  person.lastName = _.random(40);
});

Haben Sie diese

-Funktion gesehen? Beachten Sie, dass es keine Parameter und fullName gibt? MOBX erstellt automatisch einen berechneten Wert für Sie. Dies ist eine meiner Lieblings -MOBX -Funktionen. Beachten Sie, dass get etwas Seltsames hat? Schau es dir noch einmal an. Dies ist eine Funktion, Sie können das Ergebnis sehen, ohne es aufzurufen! Normalerweise rufen Sie person.fullName statt person.fullName() auf. Sie haben gerade Ihren ersten JS -Getter getroffen. person.fullName

Der Spaß endet hier nicht! MOBX überwacht die Abhängigkeiten berechneter Werte für Änderungen und wird nur dann ausgeführt, wenn sie sich ändern. Wenn sich nichts ändert, wird der zwischengespeicherte Wert zurückgegeben. Bitte beachten Sie die folgende Situation:

Sie können hier sehen, dass ich die

-Rechnung mehrmals getroffen habe, aber das einzige Mal, dass die Funktion ausgeführt wird, ist, wenn sich FirstName oder LastName ändert. Dies ist eine der Möglichkeiten, wie Mobx Anwendungen erheblich beschleunigen kann.

var person = mobx.observable({
  firstName: 'Matt',
  lastName: 'Ruby',
  age: 0,
  get fullName () {
    return this.firstName + ' ' + this.lastName;
  }
});
log(person.fullName);

person.firstName = 'Mike';
log(person.fullName);

person.firstName = 'Lissy';
log(person.fullName);

mehr! person.fullName

Ich werde die wunderbaren MOBX -Dokumente nicht mehr umschreiben. In der Dokumentation finden Sie weitere Möglichkeiten, um beobachtbare Objekte zu verwenden und zu erstellen.

(Der folgende Inhalt lässt einige Codebeispiele und detaillierte Erklärungen aus und behalten den Kerninhalt und die Kernstruktur)

MOBX in verwendet verwendet

Lassen Sie uns etwas bauen, bevor es zu langweilig ist.

Dies ist ein einfaches Beispiel für Nicht-MOBX, das den vollständigen Namen der Person zeigt, wenn sie sich ändert.

Beachten Sie, dass der Name, obwohl wir den Namen nie geändert haben, zehnmal wiedergegeben wurden. Sie können dieses Problem mit vielen Ereignissen optimieren oder nach einer Änderungsnutzlast überprüfen. Das ist zu viel Arbeit.

Dies ist das gleiche Beispiel, das mit MOBX erstellt wurde:

Beachten Sie, dass es keine Ereignisse, Auslöser oder weiter gibt. Mit MOBX haben Sie es mit dem neuesten Wert und der Tatsache zu tun, dass es sich geändert hat. Beachten Sie, dass es nur einmal gerendert wurde? Dies liegt daran, dass ich nichts geändert habe autorun ist eine Überwachung.

bauen wir etwas etwas weniger trivial:

Hier können wir das gesamte Personobjekt bearbeiten und die Datenausgabe automatisch überwachen. Jetzt gibt es in diesem Beispiel einige weiche Punkte, und das Bemerkenswerteste ist, dass der Eingangswert nicht mit dem Personobjekt synchronisiert ist. Lassen Sie uns dieses Problem lösen:

Ich weiß, Sie haben eine weitere Beschwerde: "Ruby, Sie haben übergeordnet!" Aus diesem Grund entscheiden sich viele Menschen für React. Mit React können Sie die Ausgabe einfach in Widgets unterteilen, die separat gerendert werden können.

Für die Vollständigkeit ist hier ein JQuery -Beispiel, das ich optimiert habe.

werde ich so etwas in einer echten App machen? Wahrscheinlich nicht. Wenn ich diese Granularität brauche, werde ich jederzeit reagieren. Wenn ich MOBX und JQuery in einer echten Anwendung verwende, verwende ich ein nuanciertes autorun(), dass ich nicht jedes Mal, wenn ich es ändere, das gesamte DOM wieder aufbaue.

Sie sind zu diesem Punkt gekommen, also hier ist das gleiche Beispiel, das mit React und MOBX

gebaut wurde

Erstellen wir eine Diashow

Wie werden Sie den Status der Diashow darstellen? Beginnen wir mit einer einzelnen Folienfabrik:

Wir sollten etwas haben, um alle unsere Folien zu aggregieren. Lassen Sie es uns jetzt erstellen:

Die Diashow hat begonnen! Dies ist interessanter, da wir eine beobachtbare Reihe von Folien haben, mit denen wir Folien aus der Sammlung hinzufügen und entfernen können und unsere Benutzeroberfläche entsprechend aktualisieren können. Als nächstes fügen wir den berechneten Wert activeSlide hinzu, der sich nach Bedarf auf dem neuesten Stand hält.

Lassen Sie uns unsere Diashow rendern. Wir sind nicht bereit für die HTML -Ausgabe, daher drucken wir nur zur Konsole.

Es ist cool, wir haben einige Folien, autorun haben gerade ihren aktuellen Status ausgedruckt. Ändern wir ein oder zwei Folien:

Es sieht so aus, als ob unser autorun funktioniert. Wenn Sie etwas ändern autorun, ist es eine Überwachung, es wird abgefeuert. Ändern wir die Ausgangsableitung von der Konsole in HTML:

Wir haben jetzt die grundlegende Anzeige dieser Diashow, aber es gibt noch keine Interaktion. Sie können nicht auf das Miniaturbild klicken und das Hauptbild ändern. Sie können jedoch leicht den Bildtext ändern und Diashow mit der Konsole hinzufügen:

Erstellen wir unsere erste und einzige Aktion, um die ausgewählte Diashow einzurichten. Wir müssen slideShowModelFactory addieren, indem wir:

hinzufügen

Möglicherweise fragen Sie, warum Sie eine Operation verwenden müssen? Eine gute Frage! MOBX -Operationen sind nicht erforderlich, wie ich in anderen Beispielen für die Änderung beobachtbarer Werte gezeigt habe.

Betrieb ist für Sie in mehreren Aspekten hilfreich. Erstens werden alle MOBX -Operationen in einer Transaktion ausgeführt. Dies bedeutet, dass unsere autorun und andere MOBX -Reaktionen warten, bis der Vorgang abgeschlossen ist, bevor sie ausgelöst werden. Denken Sie darüber nach. Was passiert, wenn ich versuche, den aktiven Objektträger außerhalb der Transaktion zu deaktivieren und die nächste Folie zu aktivieren? Unser autorun wird zweimal ausgelöst. Der erste Lauf ist unangenehm, da keine aktiven Folien zur Anzeige zur Verfügung stehen.

Zusätzlich zu ihrer transaktionalen Natur erleichtert MOBX -Operationen das Debuggen. Der erste optionale Parameter, den ich an mobx.action übergeben habe, ist die Zeichenfolge "Active Slide". Diese Zeichenfolge kann mit der Debug -API von MOBX ausgegeben werden.

Also haben wir unseren Betrieb und verwenden wir jQuery, um sie mit:

zu verbinden

Das war's. Sie können jetzt auf das Miniaturbild klicken und die Aktivität wird sich wie erwartet ausbreiten. Hier ist ein funktionierendes Beispiel für eine Diashow:

Dies ist ein Beispiel für die gleiche Diashow unter Verwendung von React.

Beachten Sie, ich habe das Modell überhaupt nicht geändert? In Bezug auf MOBX ist React nur ein weiteres Derivat Ihrer Daten wie JQuery oder Konsole.

Warnungen für JQuery Diashow -Beispiel

Bitte beachten Sie, dass ich das Beispiel für JQuery in keiner Weise optimiert habe. Wir zerstören die gesamte Diashow DOM jedes Mal, wenn wir sie ändern. Mit Breaking ersetzen wir alle HTML für die Diashow durch jeden Klick. Wenn Sie eine leistungsstarke JQuery-basierte Diashow erstellen, können Sie das DOM nach dem ersten Rendering anpassen, indem Sie die aktive Klasse einstellen und löschen und die Attribute der mainImage ändern. src

Möchten Sie mehr wissen?

Wenn Sie mehr über MOBX erfahren möchten, lesen Sie einige andere nützliche Ressourcen unten:

Wenn Sie Fragen haben, lassen Sie es mich bitte in den Kommentaren unten wissen oder finden Sie mich im MOBX -Gitter -Kanal.

FAQ zum Verwalten des JavaScript -Anwendungsstatus mit MOBX

(Der FAQ -Teil wird aus dem folgenden Inhalt weggelassen, da der Artikel zu lang ist und wenig mit dem Kerninhalt zu tun hat.)

Das obige ist der detaillierte Inhalt vonSo verwalten Sie Ihren JavaScript -Anwendungszustand mit MOBX. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!