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!'; // 此處觸發(fā)

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!'; // 觸發(fā)
person.firstName = 'Matthew!'; // 也觸發(fā)

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!