Objekte beobachtbar machen

Question

Objekte beobachtbar machen

8

Ich habe mich in letzter Zeit mit JavaScript-Frameworks wie Angular und Meteor beschäftigt und mich gefragt, woher sie wissen, wann sich eine Objekteigenschaft geändert hat, damit sie das DOM aktualisieren konnten.

Ich war ein wenig überrascht, dass Angular einfache alte JS-Objekte verwendet hat, anstatt dass Sie irgendeine Art von Getter / Setter aufrufen müssen, damit sie sich einklinken und die notwendigen Aktualisierungen vornehmen kann. Mein Verständnis ist, dass sie die Objekte nur regelmäßig nach Änderungen abfragen.

Aber mit dem Aufkommen der Getter und Setter in JS 1.8.5 Wir können es besser machen, können wir nicht?

Als kleinen Proof-of-Concept habe ich dieses Skript zusammengestellt:

( Bearbeiten: aktualisierter Code zum Hinzufügen der abhängigen Eigenschaft / Methodenunterstützung)

%Vor%

Welche Protokolle:

Name geändert von "Ryan Gosling" zu "Ryan Reynolds"

Das einzige Problem, das ich sehe, ist das Definieren von Methoden wie fullName() für das Objekt person, das von den anderen beiden Eigenschaften abhängt. Dies erfordert ein wenig zusätzliches Markup für das Objekt, damit Entwickler die Abhängigkeit angeben können.

Abgesehen davon, gibt es irgendwelche Nachteile für diesen Ansatz?

JsFiddle

javascript design-patterns observable

mpen 10.02.2013, 09:00

quelle

1 Antwort

Tags und Links javascript design-patterns observable

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Wie benutze wro4j im Spiel-Framework 2.1

score 1 · Answer 1

Aufkommen der Getter und Setter in JS 1.8.5 - Gibt es Nachteile bei diesem Ansatz?

Außer den beobachteten erfassen Sie keine Änderungen der Eigenschaften. Sicher, das ist genug für modellierte Entitätsobjekte und für alles andere könnten wir Proxies verwenden.
Es ist auf Browser beschränkt, die Getter / Setter und vielleicht sogar Proxies unterstützen. Aber hey, wer kümmert sich um veraltete Browser? :-) Und in eingeschränkten Umgebungen (Node.js) hält dies überhaupt nicht.
Accessor-Eigenschaften (mit Getter und Setter) sind viel langsamer als echte get / set-Methoden. Natürlich erwarte ich nicht, dass sie in kritischen Abschnitten verwendet werden, und sie können Code viel schicker aussehen lassen. Aber du musst das im Hinterkopf behalten. Außerdem kann der ausgefallene Code zu Missverständnissen führen - normalerweise würde man erwarten, dass die Zuweisung / der Zugriff auf Eigenschaften eine kurze ( O(1) ) Operation ist, während bei Getter / Setter viel mehr passiert. Sie müssen darauf achten, nicht zu vergessen, und die Verwendung von tatsächlichen Methoden könnte helfen.

Wenn wir also wissen, was wir tun, können wir es besser machen.

Dennoch gibt es einen großen Punkt, an den wir uns erinnern müssen: die Synchronität / Asynchronität (siehe auch diese exzellente Antwort ). Angulars Dirty Checking ermöglicht es Ihnen, eine Reihe von Eigenschaften gleichzeitig zu ändern, bevor das Ereignis bei der nächsten Schleife der nächsten Schleife ausgelöst wird. Dies hilft, semantisch ungültige Zustände zu vermeiden (die Verbreitung von).

Aber ich sehe auch die synchronen Getter / Setter als eine Chance. Sie ermöglichen uns, die Abhängigkeiten zwischen Eigenschaften zu deklarieren und die gültigen Zustände dadurch zu definieren. Es wird automatisch die Korrektheit des Modells sicherstellen, während wir nur eine Eigenschaft gleichzeitig ändern müssen (anstatt firstName und fullName die ganze Zeit zu ändern, ist firstName genug). Dennoch, während der Auflösung von Abhängigkeiten, die möglicherweise nicht wahr sind, müssen wir uns darum kümmern.

Daher sollten die Listener, die nicht mit der Verwaltung von Abhängigkeiten in Beziehung stehen, asynchron ausgelöst werden. Nur setImmediate ihre Schleife.