Objektänderungen abonnieren
GitHub:https://github.com/FrancescoXX/Design-Patterns-Observer-Javascript
CodePen:https://codepen.io/francescoxx/pen/NWqvPrb
Das Observer Design-Muster ist ein sehr einfaches, aber leistungsstarkes Muster.
Wir können es verwenden, wenn wir zum Beispiel eine Benutzeroberfläche aktualisieren möchten, wenn ein Objekt unserer Anwendung seinen Zustand ändert.
Wir haben also:
- ein SUBJEKT:das Ding, das wir beobachten wollen
- ein Satz von BEOBACHTERN, die aktualisiert werden, wenn das Subjekt seinen Zustand ändert
Wenn das Subjekt seinen Zustand ändert, benachrichtigt es alle abonnierten Observablen, dass es seinen Zustand geändert hat, und alle dem Subjekt hinzugefügten Beobachter werden aktualisiert,
So ungefähr funktioniert es, wenn jemand sein Twitter mit einem neuen Tweet aktualisiert! Alle seine Follower werden mit einer Benachrichtigung aktualisiert
Problem
Wenn sich Daten ändern, möchten wir, dass die Benutzeroberfläche den neuen Status widerspiegelt
Absicht
- Definieren Sie eine 1:n-Abhängigkeit zwischen Objekten
- Wenn ein Objekt seinen Status ändert, werden alle seine abhängigen Objekte benachrichtigt und automatisch aktualisiert.
Anwendbarkeit
- Verwendung:Ein Objekt ändern -> andere ändern
- Keine Ahnung, wie viele Objekte geändert werden müssen
- Benachrichtigung über Objektänderungen, wobei die lose Kopplung beibehalten wird
- Ein Objekt kann ein anderes benachrichtigen, ohne es direkt zu kennen
Vorteile
- Lose Kopplung zwischen Beobachtern und Subjekten
- Unterstützung eines Broadcast-Modells
Nachteile
- Eine Änderung kann zu mehreren unnötigen Benachrichtigungen führen
- Kunden kennen die Dominoeffekte nicht
Fazit:Beobachtermuster ist super zu
- Lose Kopplung beibehalten
- Status in anderen Objekten beobachten und dann benachrichtigen, wenn sich der Status ändert
Werfen wir nun einen Blick auf die Struktur dieses Musters, wenn wir es implementieren möchten
Und werfen wir einen Blick auf die Zusammenarbeit zwischen ihnen
Das ist es!
Dieses Muster ist sehr einfach und könnte nützlich sein, wenn wir dasselbe von verschiedenen Punkten unserer Anwendung aus beobachten möchten!
GitHub:https://github.com/FrancescoXX/Design-Patterns-Observer-Javascript
CodePen:https://codepen.io/francescoxx/pen/NWqvPrb