JS Observer Pattern

ES6

by Echyzen

HTML

<p id="mySelect">
Observer notified:
</p>

JavaScript

class Subject {
 constructor() {
    this.observers = []
  }
  subscribeObserver(observer) {
    this.observers.push(observer);
  }
  unsubscribeObserver (observer) {
    var index = this.observers.indexOf(observer);
    if(index > -1) {
      this.observers.splice(index, 1);
    }
  }
  notifyObserver (observer) {
    var index = this.observers.indexOf(observer);
    if(index > -1) {
      this.observers[index].notify(index);
    }
  }
  notifyAllObservers () {
    for(var i = 0; i < this.observers.length; i++){
      this.observers[i].notify(i);
    }
  }
  
}

class Observer {
  
  notify(index) {
  	let HTMLSelection = document.getElementById("mySelect");
    const observerIndex = "Observer " + index + " is notified"
    HTMLSelection.appendChild(document.createTextNode(observerIndex))
    HTMLSelection.appendChild(document.createElement("br"))
  }

}

var subject = new Subject();

var observer1 = new Observer();
var observer2 = new Observer();
var observer3 = new Observer();
var observer4 = new Observer();

subject.subscribeObserver(observer1);
subject.subscribeObserver(observer2);
subject.subscribeObserver(observer3);
subject.subscribeObserver(observer4);

subject.notifyObserver(observer2); // Observer 1 is notified!

subject.notifyAllObservers();
// Observer 0 is notified!
// Observer 1 is notified!
// Observer 2 is notified!
// Observer 3 is notified!