Knockout und Ember verwenden Observablen. Observables sind Funktionen, die um die Eigenschaften der Modellobjekte gewickelt sind. Diese Funktionen werden immer dann aufgerufen, wenn sich der Wert des entsprechenden Objekts oder die Eigenschaft ändert. Obwohl dieser Ansatz gut funktioniert und alle Änderungen erkennt und benachrichtigt, nimmt er die Freiheit, mit einfachen JavaScript -Objekten zu arbeiten, da wir uns jetzt mit Funktionen befassen müssen.
Angular verwendet schmutzige Überprüfung, um Änderungen zu erkennen. Dieser Ansatz verschmutzt das Modellobjekt nicht. Es registriert Beobachter für jedes Objekt, das dem Modell hinzugefügt wurde. Alle diese Beobachter werden ausgeführt, wenn Angulars Digest -Zyklus einsetzt und wenn sich die Daten ändern. Diese Änderungen werden von den entsprechenden Beobachtern verarbeitet. Das Modell bleibt nach wie vor ein einfaches Objekt, da um es keine Verpackungen erzeugt werden. Diese Technik führt jedoch zu einer Leistungsverschlechterung, wenn die Anzahl der Beobachter wächst.
Was ist Object.observe?
Da Object.Observe von den Browsern nativ unterstützt wird und direkt auf dem Objekt funktioniert, ohne um sie um sie herum zu erstellen, ist die API sowohl einfach zu bedienen als auch ein Gewinn für die Leistung. Wenn Object.Observe von einem Browser unterstützt wird, können Sie zwei-Wege-Bindung implementieren, ohne dass eine externe Bibliothek erforderlich ist. Dies bedeutet nicht, dass alle vorhandenen Zwei-Wege-Bindungsbibliotheken nicht nützlich sind, sobald O.O implementiert ist. Wir brauchen sie immer noch, um die Benutzeroberfläche effizient zu aktualisieren, nachdem sie die Änderungen mit O.O. Außerdem würden Bibliotheken die Logik der Änderungserkennung intern ausfehlen, wenn nicht alle gezielten Browser O.O.
unterstützenJetzt, da Sie eine Vorstellung davon haben, wofür O.O gut ist, sehen wir es in Aktion.
Die Beobachtung () -Methode ist eine asynchrone statische Methode, die auf dem Objekt definiert ist. Es kann verwendet werden, um nach Änderungen eines Objekts zu suchen, und es akzeptiert drei Parameter:
Sehen wir uns ein Beispiel für die Verwendung der Methode an. Betrachten Sie den folgenden Ausschnitt:
<span>var person = {
</span> <span>name: 'Ravi',
</span> <span>country: 'India',
</span> <span>gender: 'Male'
</span><span>};
</span>
<span>function observeCallback(changes){
</span> <span>console.log(changes);
</span><span>};
</span>
<span>Object.observe(person, observeCallback);
</span>
person<span>.name = 'Rama'; // Updating value
</span>person<span>.occupation = 'writer'; // Adding a new property
</span><span>delete person.gender; // Deleting a property</span>In diesem Code haben wir ein Objektliteral mit einigen Daten erstellt. Wir haben auch eine Funktion namens ObserveCallback () definiert, mit der wir die Änderungen des Objekts protokollieren. Anschließend beginnen wir, Änderungen zu beobachten, indem wir O.O. Schließlich haben wir einige Änderungen am Objekt vorgenommen.
Wenn Sie die Ausgabe auf der Konsole sehen, werden Sie feststellen, dass alle drei Änderungen erkannt und protokolliert werden. Der folgende Screenshot zeigt das Ergebnis des Snippets:
o.o läuft asynchron und gruppiert alle Änderungen und übergibt sie an den Rückruf, wenn es aufgerufen wird. Hier haben wir hier drei Einträge für die drei auf dem Objekt angewendeten Änderungen erhalten. Wie Sie sehen, besteht jeder Eintrag aus dem Namen der Eigenschaft geändert, dem alten Wert, dem Typ der Änderung und dem Objekt selbst mit den neuen Werten.
Eine Live -Demo des vorherigen Code ist unten angegeben (denken Sie daran, die Konsole zu öffnen, um das Ergebnis zu sehen):
Siehe den Pen -Emkveb von SitePoint (@sitepoint) auf CodePen.
In unserem Code haben wir nicht die Arten von Änderungen angegeben, nach denen wir suchen sollten, und beobachtet also Ergänzungen, Aktualisierungen und Löschungen. Dies kann unter Verwendung des dritten Parameters der Beobachtungsmethode wie folgt gesteuert werden:
<span>var person = {
</span> <span>name: 'Ravi',
</span> <span>country: 'India',
</span> <span>gender: 'Male'
</span><span>};
</span>
<span>function observeCallback(changes){
</span> <span>console.log(changes);
</span><span>};
</span>
<span>Object.observe(person, observeCallback);
</span>
person<span>.name = 'Rama'; // Updating value
</span>person<span>.occupation = 'writer'; // Adding a new property
</span><span>delete person.gender; // Deleting a property</span>Die Methode der Beobachtung () kann Änderungen an direkten Eigenschaften erkennen, die einem Objekt hinzugefügt wurden. Es können keine Änderungen an Eigenschaften erkennen, die mit Getters und Setter erstellt wurden. Da das Verhalten dieser Eigenschaften vom Autor kontrolliert wird, muss auch Änderungen der Erkennung des Autors gehören. Um dieses Problem anzugehen, müssen wir einen Notifier (über Object.getNotifier () verfügbar) verwenden, um die in der Eigenschaft vorgenommenen Änderungen zu benachrichtigen.
Betrachten Sie den folgenden Ausschnitt:
<span>Object.observe(person, observeCallback, ['add', 'update']);</span>
Todotyp ist eine Konstruktorfunktion mit zwei Eigenschaften. Darüber hinaus wird blockiert mit Object.defineProperty hinzugefügt. In unserem Beispiel ist der für diese Eigenschaft definierte Setter einfach. In einer typischen Geschäftsanwendung kann es einige Validierungen durchführen und möglicherweise keinen Wert festlegen, falls die Validierung fehlschlägt. Ich wollte jedoch die Dinge einfach halten.
Als letzter Hinweis können Sie sehen, dass in unserem Beispiel die Benachrichtigung nur dann gesendet wird, wenn ein Update vorliegt.
Die Änderung an der blockierten Eigenschaft erzeugt das folgende Ergebnis in den Chromentwickler -Tools:
Eine lebende Demo dieses Beispiels wird unten angegeben (denken Sie daran, die Konsole zu öffnen, um das Ergebnis zu sehen):
Siehe den Stift Npzgoo von sitepoint (@sitepoint) auf CodePen.
Manchmal haben wir möglicherweise eine Berechnung, um nach zwei oder mehr Eigenschaften zu laufen, die in irgendeiner Weise geändert werden. Obwohl wir beide Änderungen mithilfe eines Benachrichtigers einzeln benachrichtigen können, wäre es besser, eine einzelne Benachrichtigung mit einem benutzerdefinierten Typnamen zu senden, um anzuzeigen, dass beide Werte geändert werden. Dies kann mit der Methode "Notifier.PerformChange ()) erfolgen. Diese Methode akzeptiert drei Argumente:
Fügen wir eine neue Eigenschaft hinzu, die der oben genannten Klasse namentlich gemacht hat. Der Wert dieser Eigenschaft gibt an, ob der Todo -Element abgeschlossen ist oder nicht. Wenn der Wert von Fertig auf TRUE eingestellt ist, müssen wir den Wert der Eigenschaft auch auf True blockiert.
Das folgende Snippet definiert diese Eigenschaft:
<span>function <span>TodoType</span>() {
</span> <span>this.item = '';
</span> <span>this.maxTime = '';
</span>
<span>var blocked = false;
</span>
<span>Object.defineProperty(this, 'blocked', {
</span> <span>get:function(){
</span> <span>return blocked;
</span> <span>},
</span> <span>set: function(value){
</span> <span>Object.getNotifier(this).notify({
</span> <span>type: 'update',
</span> <span>name: 'blocked',
</span> <span>oldValue: blocked
</span> <span>});
</span> blocked <span>= value;
</span> <span>}
</span> <span>});
</span><span>}
</span>
<span>var todo = new TodoType();
</span>
todo<span>.item = 'Get milk';
</span>todo<span>.maxTime = '1PM';
</span>
<span>console.log(todo.blocked);
</span>
<span>Object.observe(todo, function(changes){
</span> <span>console.log(changes);
</span><span>}, ['add', 'update']);
</span>
todo<span>.item = 'Go to office';
</span>todo<span>.blocked = true;</span>Sobald die Logik im Rückruf von PerformChange ausgeführt wird, wird die Änderung mit dem in ihn übergebenen benutzerdefinierten Änderungstyp benachrichtigt. Dieser Typ wird von Object nicht beobachtet. Wir müssen O.O explizit bitten, Änderungen des benutzerdefinierten Typs zu beobachten. Das folgende Ausschnitt zeigt ein modifiziertes O.O auf dem Todo -Objekt, um die Änderung des benutzerdefinierten Typs zusammen mit Hinzufügen und Aktualisieren von Typen zu beobachten:
<span>var person = {
</span> <span>name: 'Ravi',
</span> <span>country: 'India',
</span> <span>gender: 'Male'
</span><span>};
</span>
<span>function observeCallback(changes){
</span> <span>console.log(changes);
</span><span>};
</span>
<span>Object.observe(person, observeCallback);
</span>
person<span>.name = 'Rama'; // Updating value
</span>person<span>.occupation = 'writer'; // Adding a new property
</span><span>delete person.gender; // Deleting a property</span>Der obige Snippet legt den Wert von blockiert auf true fest Es sendet also eine Benachrichtigung mit dem benutzerdefinierten Änderungstyp. Der folgende Screenshot zeigt Details zum Änderungsobjekt an, das vom benutzerdefinierten Typ zurückgegeben wird:
Eine lebende Demo dieses Beispiels wird unten angegeben (denken Sie daran, die Konsole zu öffnen, um das Ergebnis zu sehen):
Siehe den Stift Yyexgd von sitepoint (@sitepoint) auf CodePen.
Beobachtungsarrays ähnelt der Beobachtungsobjekte. Der einzige Unterschied besteht darin, dass die Beobachterfunktion mit Array.observe anstelle von Object.observe registriert werden muss. Das folgende Ausschnitt zeigt dies:
<span>Object.observe(person, observeCallback, ['add', 'update']);</span>
Eine lebende Demo dieses Beispiels wird unten angegeben (denken Sie daran, die Konsole zu öffnen, um das Ergebnis zu sehen):
Siehe den Stift GGGEZQ von sitepoint (@sitepoint) auf CodePen.
Ein registrierter Beobachter in einem Objekt oder Array kann mit Object.unobserve () bzw. Array.unobserve () entfernt werden. Diese Methode akzeptiert zwei Parameter, das Objekt oder das Array und den zu beseitigen Rückruf. Um diese Methode zu verwenden, müssen wir eine Referenz des Rückrufs haben.
<span>function <span>TodoType</span>() {
</span> <span>this.item = '';
</span> <span>this.maxTime = '';
</span>
<span>var blocked = false;
</span>
<span>Object.defineProperty(this, 'blocked', {
</span> <span>get:function(){
</span> <span>return blocked;
</span> <span>},
</span> <span>set: function(value){
</span> <span>Object.getNotifier(this).notify({
</span> <span>type: 'update',
</span> <span>name: 'blocked',
</span> <span>oldValue: blocked
</span> <span>});
</span> blocked <span>= value;
</span> <span>}
</span> <span>});
</span><span>}
</span>
<span>var todo = new TodoType();
</span>
todo<span>.item = 'Get milk';
</span>todo<span>.maxTime = '1PM';
</span>
<span>console.log(todo.blocked);
</span>
<span>Object.observe(todo, function(changes){
</span> <span>console.log(changes);
</span><span>}, ['add', 'update']);
</span>
todo<span>.item = 'Go to office';
</span>todo<span>.blocked = true;</span>Sobald O.O von allen Browsern vollständig unterstützt wird, wird die Änderungserkennung in allen Client -Seitenbibliotheken standardisiert. Aurelia begann es bereits zu verwenden, die Änderungserkennungsbibliothek von Angular 2, Wattower.js, verwendet O.O in interner und Ember wird es auch in Zukunft zur Änderungserkennung verwenden. Angular 2 und Aurelia haben Pollyfills auf Fallback implementiert, wenn O.O nicht nativ verfügbar ist.
Die Zukunft rund um die bloßes Bindung der Client-Seite wird mit dieser großartigen Ergänzung zu den Browsern heller sein. Lassen Sie uns auf andere Browser freuen, die früher aufholen können!
zu verwenden. Wie kann ich von Object.observe zu ES6 -Proxies migrieren? Proxies beinhaltet das Ersetzen des Objekts. Anstatt Änderungen an den Eigenschaften eines Objekts zu beobachten, definieren Sie Fallen für die Operationen, die Sie im Handlerobjekt des Proxy beobachten möchten. Dies kann eine gewisse Wiederbelebung Ihres Codes beinhalten, bietet jedoch eine flexiblere und effizientere Möglichkeit, Änderungen in Objekten zu beobachten.
Das obige ist der detaillierte Inhalt vonEinführung in Object.observe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Teambition
Verwendung der Schreibfunktion
Was sind die Voraussetzungen für eine Douyin-Liveübertragung?
Der Unterschied zwischen UCOS und Linux
Was sind die am häufigsten verwendeten Anweisungen in Vue?
So lösen Sie das Problem, dass JS-Code nach der Formatierung nicht ausgeführt werden kann
So springen Sie mit Parametern in vue.js
Was bedeutet Handy-HD?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
