Einführung in Object.observe

Key Takeaways

• Object.observe, auch als O.O bekannt, ist ein Merkmal, das JavaScript als Teil von ECMascript 7 hinzugefügt werden soll, um die Erkennung von Objektänderungen nativ im Browser zu unterstützen. Es funktioniert direkt auf dem Objekt, ohne Wrapper um sie herum zu erstellen, sodass es einfach zu bedienen und für die Leistung vorteilhaft ist.
• Die Beobachtung () -Methode ist eine asynchrone statische Methode, die auf Objekt definiert ist, mit der nach Änderungen eines Objekts suchen kann. Es akzeptiert drei Parameter: ein zu beobachtendes Objekt, eine Rückruffunktion, die aufgerufen werden muss, wenn eine Änderung erkannt wird, und ein optionales Array, das Arten von Änderungen enthält, auf die zu beobachten ist.
• Beobachtungsarrays ähnelt der Beobachtungsobjekte, wobei der einzige Unterschied darin besteht
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.

Zwei-Wege-Datenbindung ist jetzt eine der entscheidenden Funktionen von clientseitigen Anwendungen. Ohne Datenbindung muss sich ein Entwickler mit viel Logik befassen, um Daten manuell an die Ansicht zu binden, wenn sich das Modell ändert. JavaScript-Bibliotheken wie Knockout, AngularJS und Ember unterstützen die bid- und wechselseitige Bindung, aber diese Bibliotheken verwenden verschiedene Techniken, um Änderungen zu erkennen.

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?

Object.observe, a.k.a. o.o, ist eine Funktion, die JavaScript als Teil von ECMascript 7 hinzugefügt werden soll, um die Erkennung von Objektänderungen nativ im Browser zu unterstützen. Obwohl ES7 noch nicht abgeschlossen ist, wird diese Funktion bereits in Blink-basierten Browsern (Chrome und Opera) unterstützt.

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ützen

Eigenschaften eines Objekts beobachten

Jetzt, 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:

• Ein zu beobachtendes Objekt
• Eine Rückruffunktion, die aufgerufen werden soll, wenn eine Änderung erfasst wird
• Ein optionales Array, das Arten von Änderungen enthält, die für
beobachtet werden sollen

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>

Registrieren von Benachrichtigungen

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.

mehrere Änderungen beobachten

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:

• Name des benutzerdefinierten Typs
• Rückruffunktion, die die Änderungen ausführen. Der von dieser Funktion zurückgegebene Wert wird im Änderungsobjekt
verwendet
• Objekt, auf das die Änderungen angewendet werden

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.

Beobachtung von Arrays

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.

Entfernen registrierter Beobachter

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>

Schlussfolgerung

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!

häufig gestellte Fragen (FAQs) zu Object.observe

Warum wurde Object.observe veraltet? Es war nicht in der Lage, Änderungen innerhalb einer Funktion zu beobachten, und es war auch nicht in der Lage, Änderungen am Prototyp eines Objekts zu verfolgen. Darüber hinaus wurde festgestellt, dass es in Bezug auf die Leistung ineffizient ist, da viele Ressourcen erforderlich waren, um Änderungen in großen Objekten zu verfolgen. Die Abschaltung wurde auch durch die Einführung neuer Merkmale in ES6 wie Proxies und Reflektion beeinflusst, die effizientere Möglichkeiten bieten, um Änderungen der Objekte zu beobachten und auf Veränderungen zu reagieren.

Was sind die Alternativen zum Objekt.OBSERVE? Eine der beliebtesten Alternativen ist die Verwendung von ES6 -Proxys. Mit Proxies können Sie benutzerdefiniertes Verhalten für grundlegende Operationen bei Objekten wie Eigenschaftshowup, Zuordnung, Aufzählung, Funktionsaufruf und vieles mehr definieren. Eine andere Alternative ist die Verwendung von Bibliotheken wie MOBX oder VUE.JS, die ihre eigenen Mechanismen zur Beobachtung von Änderungen in Objekten liefern. > ES6 -Proxies bieten eine Möglichkeit, das Verhalten grundlegender Operationen an Objekten anzupassen. Ein Proxy wird mit zwei Parametern erstellt: das Zielobjekt und ein Handlerobjekt. Das Handler -Objekt definiert „Fallen“ für verschiedene Operationen auf dem Zielobjekt. Wenn diese Operationen ausgeführt werden, wird die entsprechende Falle im Handler ausgelöst, sodass ein benutzerdefiniertes Verhalten ausgeführt werden kann. Dies macht Proxys zu einem leistungsstarken Instrument zur Beobachtung und Reaktion auf Änderungen in Objekten. Sie bieten eine flexiblere und leistungsfähigere Methode, um Veränderungen der Objekte zu beobachten und auf Veränderungen zu reagieren. Mit Proxies können Sie benutzerdefiniertes Verhalten für eine Vielzahl von Operationen definieren und nicht nur Änderungen der Eigenschaften. Proxies funktionieren auch besser als Object.observe, insbesondere wenn es sich um große Objekte handelt. Darüber hinaus sind Proxys Teil des ES6 -Standards, was bedeutet, dass sie von allen modernen Browsern unterstützt werden. Verwenden Sie immer noch Object.Observe in Ihren Projekten, es ist stark entmutigt. Object.observe wurde veraltet und aus dem JavaScript -Standard entfernt, was bedeutet, dass es nicht mehr beibehalten wird und möglicherweise nicht von allen Browsern unterstützt wird. Die Verwendung von veralteten Funktionen kann zu Kompatibilitätsproblemen und anderen Problemen in Ihren Projekten führen. Es wird empfohlen, Alternativen wie ES6 -Proxys oder Bibliotheken wie MOBX oder VUE.JS.

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.

Wie hoch wirkt sich die Leistungseinflüsse bei der Verwendung von ES6 -Proxys aus? Wie bei jedem Merkmal sollten sie jedoch mit Bedacht verwendet werden. Das Erstellen eines Proxy für jedes Objekt in Ihrer Anwendung kann zu Leistungsproblemen führen. Es ist am besten, Proxies nur bei Bedarf zu verwenden und die Handler -Objekte so leicht wie möglich zu halten. Sie haben einige Einschränkungen. Zum Beispiel können sie nicht verwendet werden, um Änderungen an der Länge Eigenschaft von Arrays zu beobachten. Außerdem bieten Proxys keine Möglichkeit, Änderungen am Prototyp eines Objekts zu beobachten. Diese Einschränkungen können jedoch häufig durch die Verwendung anderer Merkmale von ES6 gearbeitet werden, z. B. reflektiert. .js bieten ihre eigenen Mechanismen zur Beobachtung von Änderungen in Objekten. Beispielsweise verwendet MOBX beobachtbare Eigenschaften und berechnete Werte, um Änderungen zu verfolgen, während VUE.JS ein reaktives Datenmodell verwendet. Diese Bibliotheken bieten eine API auf hoher Ebene für die Objektbeobachtung und erleichtern die Verwendung als rohe ES6-Proxys. JavaScript wird wahrscheinlich von der fortgesetzten Entwicklung der Sprache und der Entwicklung von Bibliotheken und Frameworks geprägt. Funktionen wie ES6-Proxies und reflektierte leistungsstarke Tools für die Beobachtung und Reaktion auf Änderungen in Objekten, und Bibliotheken wie MOBX und VUE.JS bauen auf diesen Tools auf, um APIs auf hoher Ebene für die Objektbeobachtung bereitzustellen. Wenn sich die Sprache und das Ökosystem weiterentwickeln, können wir erwarten, effizientere und flexiblere Wege zu sehen, um Ä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!