It’s #FrontendFriday – Observer-Pattern

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]

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:

function Subject(){
    this.frontendFridayObservers = [];
   }

Subject.prototype = {  
   subscribe: function(fn)  
   {    
     this.frontendFridayObservers.push(fn)  
   },  
   unsubscribe: function(fnToRemove)  
   {    
      this.frontendFridayObservers = this.frontendFridayObservers.filter( fn => {      
         if (fn != fnToRemove)        
               return fn    
      })  
   },  
   itsFrontendFriday: function()  
   {    
      this.frontendFridayObservers.forEach( fn => {
         fn.call()    
    })  
}}

 function FrontendFridayObserver1(){  
    console.log("It's FrontendFriday!")
 } 
 
 function FrontendFridayObserver2(){  
    console.log("It's FrontendFriday again!")
 }

 //subscribing the functions
const subject = new Subject();

subject.subscribe(FrontendFridayObserver1)
subject.subscribe(FrontendFridayObserver2)

//run all subscriptions
subject.itsFrontendFriday()

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:

[Running] node "c:\Users\Projekte\FrontendFriday\frontendFriday.js"
It's FrontendFriday!
It's FrontendFriday again!

[Done] exited with code=0 in 0.23 seconds

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: