Viele JavaScript-Frameworks, die MVC oder MDV verwenden, müssen auf Änderungen an den Objekten reagieren, die den Status innerhalb einer Webanwendung modellieren. Diese Fähigkeit ist ein wesentlicher Bestandteil eines Datenbindungsmodells.
Es gibt verschiedene Möglichkeiten, JavaScript-Objekte und DOM-Eigenschaften zu überwachen, um eine Aktion auszulösen. Die meisten Methoden sind jedoch aus verschiedenen Gründen, z. B. aufgrund der Leistung, nicht ideal.
Zur Verbesserung der Leistung von Webanwendungen wurde eine neue Methode namens Object.observe() für TC39 vorgeschlagen, das für die Entwicklung von ECMAScript (JavaScript) zuständig ist.
Mit Object.observe() können Sie jedem JavaScript-Objekt, das aufgerufen wird, wenn sich dieses Objekt oder seine Eigenschaften ändern, ein Listener hinzufügen.
Sie können es jetzt in Version 25 von Chrome Canary ausprobieren.
Wenn Sie diese Funktion testen möchten, müssen Sie in Chrome Canary das Flag Experimentelles JavaScript aktivieren aktivieren und den Browser neu starten. Das Flag befindet sich unter „about:flags“, wie in der folgenden Abbildung dargestellt:
Hier ist 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, löst es die Callback-Funktion "somethingChanged" aus, die ein Array von Änderungen empfängt, die auf das Objekt angewendet wurden.
Die JavaScript-Engine kann also eine Reihe von Änderungen puffern und alle in einem einzigen Aufruf an die Callback-Funktion übergeben. Dies hilft bei der Optimierung der Callbacks, sodass Ihr Code umfangreiche JavaScript-Manipulationen durchführen kann, aber nur wenige Callbacks verarbeiten kann, indem die Aktualisierungen in Stapeln zusammengefasst werden.
Die Callback-Funktion wird ausgelöst, wenn eine Eigenschaft hinzugefügt, geändert, gelöscht oder neu konfiguriert wird.
Ein weiterer Vorteil bei der Beobachtung von Arrays ist, dass Sie, wenn an einem Array eine Reihe von Änderungen vorgenommen wurden, eine Hilfsbibliothek für die Änderungsübersicht verwenden können, um einen minimalen Änderungssatz zu erstellen, sodass clientseitiges JavaScript das Array nicht manuell scannen muss, um jedes Element zu prüfen.
Sie können jede Änderung ganz einfach durchlaufen, indem Sie in Ihrer Callback-Funktion „somethingChanged“ wie folgt vorgehen:
function whatHappened(change) {
console.log(change.name + " was " + change.type + " and is now " + change.object[change.name]);
}
function somethingChanged(changes) {
changes.forEach(whatHappened);
}
Die type-Eigenschaft gibt an, was mit dem Objekt passiert ist. Im folgenden Code sehen Sie einige Beispiele für Eigenschaften, die festgelegt werden, 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 Technik ist, dass sich alle Überwachungsfunktionen innerhalb der JavaScript-Engine befinden. Dadurch kann der Browser sie gut optimieren und Ihren JavaScript-Code kostenlos, um Funktionen implementieren zu können, die diese Funktion nutzen.
Eine weitere sehr nützliche Funktion für die Entwicklung ist die Möglichkeit, mit Object.observe() den Debugger auszulösen, wenn sich ein Objekt ändert. Dazu verwenden Sie Code wie im folgenden Beispiel.
Object.observe(beingWatched, function(){ debugger; });
Hier finden Sie eine großartige Videoeinführung zu Object.observe(), in der dies ausführlich erläutert wird.
Es gibt auch eine nützliche Beschreibung und ein funktionierendes Beispiel.
Das TC39-Standardsgremium möchte Feedback zu dieser Funktion einholen. Probieren Sie es am besten gleich aus und teilen Sie uns Ihre Meinung mit.