Two-Way-Datenbindungen leicht gemacht – mit Object.observe
Kommentare

Eines der Schlüsselfeatures von client-seitigen Applikation sind Two-Way-Datenbindungen. Allerdings sorgen sie auch immer wieder für Probleme – nämlich dann, wenn keine Datenbindungen vorhanden sind und Änderungen im Modell vorgenommen werden.

Libraries wie AngularJS, Knockout oder Ember unterstützen zwar Two-Way-Bindungen, allerdings nutzen sie unterschiedliche Techniken, um Änderungen entdecken zu können, die auch auf die Performance schlagen können. Object.observe könnte da die Lösung sein. Ravi Kiran hat das Feature vorgestellt.

Vorteile von Object.observe

Während noch an der Vollendung von ECMAScript 2015 (aka ES6) gefeilt wird, gibt es bereits die ersten Features, die mit ECMAScript 7 zu JavaScript hinzugefügt werden sollen. Dazu gehört auch Object.observe, oder kurz O.o, mit dem das Entdecken von Objektänderungen nativ im Browser unterstützt werden soll.

Zudem funktioniert es direkt am Objekt, ohne Wrappers zu erstellen, wodurch es für eine Performance-Verbesserung sorgen kann. Ein weiterer Vorteil ist, dass Two-Way-Bindungen auch ohne eine externe Library implementiert werden können, wenn der Browser Object.observe unterstützt.

Einsatz von Object.observe

O.o wird asynchron ausgeführt. Dabei werden alle Änderungen zusammengefasst und an das Callback weitergegeben, wenn es aufgerufen wird. Hat man zum Beispiel ein Objekt, an dem drei Änderungen vorgenommen wurden, erhält man drei Einträge, die jeweils den Namen des geänderten Properties, den alten Wert, die Art der Änderung und das Objekt mit den neuen Werten enthalten.

Neben Objekten lassen sich auch Arrays beobachten; der einzige Unterschied ist dabei, dass die observer-Funktion mit Array.observe registriert werden muss, anstatt mit Object.observe. Registrierte Observer eines Objekts oder Arrays lassen sich zudem mit Object.unobserve() oder Array.unobserve() entfernen.

Wie Object.observe in Aktion aussieht, zeigt Ravi Kiran deutlich ausführlicher in seinem Artikel Introduction to Object.observe und gibt zudem einige Codebeispiele, die die Einsatzmöglichkeiten verdeutlichen sollen. Dabei fällt schnell auf, welche Vorteile die Methode mit sich bringt – nämlich die Standardisierung der Entdeckung von Änderungen innerhalb aller client-seitigen Libraries.

Derzeit wird Object.observe allerdings nur von Chrome und Opera unterstützt; sobald allerdings auch andere Browser die Methode unterstützen, dürfte der Umgang mit client-seitigen Two-Way-Bindungen jedoch deutlich vereinfacht werden.

Aufmacherbild: Binoculars or telescope on top of skyscraper at observation von Shutterstock / Urheberrecht: bogdanhoda

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -