JavaScript設計模式之觀察者模式

適用場景：一個地方發生了更改，其他好幾個地方進行相應的更改。
實際應用： MVVM中的MV過程，Vue的事件總線，事件隊列。

1. ES5實現方式

   var Subject = function () {
     this.observers = []
   }
   Subject.prototype.addObserver = function(observer) {
     this.observers.push(observer)
   }
   Subject.prototype.removeObserver = function(observer) {
     var index = this.observers.indexOf(observer)
     index > -1 && this.observers.splice(index, 1)
   }
   Subject.prototype.notify = function() {
     this.observers.forEach(function(item, index) {
       item.update()
     })
   }

   var Observer = function(name) {
     this.name = name
   }
   Observer.prototype.update = function() {
     console.log(this.name + 'update....')
   }

   var subject = new Subject()
   var observer1 = new Observer('訂閱者1號')
   subject.addObserver(observer1)
   var observer2 = new Observer('訂閱者2號')
   subject.addObserver(observer2)
   subject.notify()
   subject.removeObserver(observer1)
   subject.notify()

2. ES6實現方式

   class Subject {
     constructor() {
       this.observers = [];
     }
     addObserver(observer) {
       this.observers.push(observer);
     }
     removeObserver(observer) {
       let index = this.observers.indexOf(observer);
       index > -1 && this.observers.splice(index, 1);
     }
     notify() {
       this.observers.forEach(observer => observer.update());
     }
   }

   class Observer {
     constructor(name) {
       this.name = name;
     }
     update() {
       console.log(this.name + "update....");
     }
     subscribeTo(subject) {
       subject.addObserver(this);
     }
   }
   var subject = new Subject();
   var observer1 = new Observer("訂閱者1號");
   observer1.subscribeTo(subject);
   subject.notify();
   subject.removeObserver(observer1);
   subject.notify();