Viele JavaScript-Frameworks, die MVC oder MDV verwenden, müssen auf Änderungen an den Objekten reagieren, die den Status in einer Webanwendung modellieren. Diese Funktion ist ein wesentlicher Bestandteil eines Datenbindungsmodells.
Es gibt verschiedene Möglichkeiten, JavaScript-Objekte und DOM-Eigenschaften zu überwachen, um eine bestimmte Aktion auszulösen. Die meisten dieser Methoden sind jedoch aus verschiedenen Gründen (z. B. Leistung) nicht ideal.
Um die Leistung von Webanwendungen zu verbessern, wurde TC39 – der Standardisierungsgremium, das die Entwicklung von ECMAScript (JavaScript) überwacht – eine neue Methode namens Object.observe() vorgeschlagen.
Mit Object.observe() können Sie jedem JavaScript-Objekt einen Listener hinzufügen, der aufgerufen wird, wenn sich das Objekt oder seine Eigenschaften ändern.
Sie können die Funktion jetzt in Chrome Canary Version 25 ausprobieren.
Wenn Sie diese Funktion ausprobieren möchten, müssen Sie in Chrome Canary die Option Enable Experimental JavaScript (Experimentelles JavaScript aktivieren) aktivieren und den Browser neu starten. Das Flag finden Sie unter „about:flags“, wie in der Abbildung unten dargestellt:
Hier ein einfaches Beispiel für die Einrichtung eines Beobachters für ein Objekt:
var beingWatched = {};
// Define callback function to get notified on changes
function somethingChanged(changes) {
// do something
}
Object.observe(beingWatched, somethingChanged);
Wenn das Objekt „beingWatched“ geändert wird, wird die Rückruffunktion „somethingChanged“ ausgelöst, die ein Array mit den Änderungen empfängt, die auf das Objekt angewendet wurden.
So kann die JavaScript-Engine eine Reihe von Änderungen im Puffer speichern und sie alle in einem einzigen Aufruf an die Rückruffunktion übergeben. Dies hilft bei der Optimierung der Callbacks, damit Ihr Code viele JavaScript-Manipulationen ausführen, aber nur wenige Callbacks verarbeiten kann, indem die Updates zusammengefasst werden.
Die Rückruffunktion wird ausgelöst, wenn eine Property hinzugefügt, geändert, gelöscht oder neu konfiguriert wird.
Ein weiterer Vorteil von Arrays ist, dass Sie mithilfe einer Change Summary-Hilfsbibliothek einen minimalen Änderungssatz erstellen können, wenn an einem Array eine Reihe von Änderungen vorgenommen wurde. So muss das clientseitige JavaScript nicht manuell das Array durchsuchen, um jedes Element zu prüfen.
Sie können ganz einfach durch jede Änderung iterieren, indem Sie in Ihrer Rückruffunktion „somethingChanged“ Folgendes tun:
function whatHappened(change) {
console.log(change.name + " was " + change.type + " and is now " + change.object[change.name]);
}
function somethingChanged(changes) {
changes.forEach(whatHappened);
}
Mit der Eigenschaft type wird angegeben, was mit dem Objekt passiert ist. Im folgenden Code finden Sie einige Beispiele für festgelegte Properties und den zugehörigen Typ.
beingWatched.a = "foo"; // new
beingWatched.a = "bar"; // updated
beingWatched.a = "bar"; // no change
beingWatched.b = "amazing"; // new
Das Tolle an dieser Methode ist, dass sich alle Monitoring-Funktionen in der JavaScript-Engine befinden. So kann der Browser sie gut optimieren und Ihr JavaScript für die Implementierung von Funktionen freigeben, die diese Funktion nutzen.
Eine weitere sehr nützliche Funktion für die Entwicklung ist die Möglichkeit, mit Object.observe() den Debugger zu aktivieren, wenn sich ein Objekt ändert. Dazu verwenden Sie Code wie im folgenden Beispiel.
Object.observe(beingWatched, function(){ debugger; });
In diesem Video wird Object.observe() ausführlich erklärt.
Außerdem gibt es eine ausführliche Beschreibung und ein Beispiel.
Das TC39-Normungsgremium sucht Feedback zu dieser Funktion. Probieren Sie sie also aus und lassen Sie uns wissen, was Sie davon halten.