It’s #FrontendFriday – Observer-Pattern

03.06.2022

In unserer Blogreihe Coding Patterns JavaScript ist heute das Observer Pattern an der Reihe. Was das ist, wie und wann es eingesetzt werden soll, erfahrt ihr hier.

Was ist das Observer-Pattern?

Mit Hilfe des Observer Entwurfmusters können Abhängigkeiten zwischen mehreren Objekten definiert werden.  Das Objekt, welches beobachtet wird, wird Subject genannt. Das beobachtende Objekt ist der Observer. Sollte sich das Subject ändern, so werden die dazugehörigen Observer automatisch aktualisiert. [4]

Observer Entwurfsmuster

[3]

Der Einsatz des Observer Design Pattern hat den großen Vorteil, dass das Subject nicht permanent auf Änderungen geprüft werden muss. Sobald sich das Subject ändert, wird der neue Wert automatisch an alle Observer übermittelt.

 

Code-Example

Wie sieht denn das Observer-Pattern in Javascript aus? Hier ein Beispiel:

Im obigen Beispiel gibt es 2 Observer – FrontendFridayObserver1 und FrontendFridayObserver2.

Mit der Methode itsFrontendFriday() werden alle Subscriptions aufgerufen, woraufhin die Funktionen FrontendFridayObserver1 FrontendFridayObserver2 ausgeführt werden. [2]

Ausgabe:

 

Relevanz in JavaScript

Observer sind eine sehr effiziente Methode um Informationen mit verschiedenen Komponenten zu teilen.

Dies kann allerdings auch zu einem Nachteil werden, da immer alle Observer informiert werden, sobald sich das Subject ändert. Dies erhöht die Rechenleistung und kann sich negativ auf die Performance auswirken. Zudem ist am Subject selbst nicht ersichtlich wie viele Observer es gibt und aktualisiert werden.

Dennoch ist das Observer Pattern besonders in der Frontend-Entwicklung sehr hilfreich.

Ein Beispiel ist der Einsatz von Observer für Benutzeroberflächen. Sollten sich im Hintergrund Werte ändern, so muss auch die Anzeige entsprechend aktualisiert werden um den Nutzer über diese Änderungen zu informieren. [1]

 

Die Webfrontend-FG wünscht allen ein schönes Wochenende!

Mehr über Java Programmierung erfahren

 

Quellen:

[1] Observer Pattern: Was steckt hinter dem Observer Design Pattern?

[2] dofactory – Understanding JavaScript Observer Patterns

[3] dofactory – JavaScript Observer – Diagram

[4] dofactory – JavaScript Observer

 

Zurück zur Übersicht

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht.

*Pflichtfelder

*