JavaScript中的Observer 设计模式

有很多时候应用程序的一部分发生变化，其他部分需要更新。Observer模式包含了这点，如果一个对象被改变了，它将向发生改变的相关对象进行广播。

Observer模式

下面我们用JavaScript创建一个Subjects 和Observers，看下它是怎么工作的

class Subject {
  constructor() {
    this.observers = [];
  }

  subscribeObserver(observer) {
    this.observers.push(observer);
  }

  unsubscribeObserver(observer) {
    const index = this.observers.indexOf(observer);
    if (index > -1) {
      this.observers.splice(index, 1);
    }
  }

  notifyObserver(observer) {
    const index = this.observers.indexOf(observer);
    if (index > -1) {
      this.observers[index].notify(index);
    }
  }

  notifyAllObserver() {
    for (let i = 0, len = this.observers.length; i < len; i++) {
      this.observers[i].notify(i);
    };
  }
}

class Observer {
  notify(index) {
    console.log('Observer ' + index + ' is notified!');
  }
}

var subject = new Subject();

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

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

subject.notifyObserver(observer1);
// Observer 0 is notified
subject.notifyAllObserver();
// Observer 0 is notified
// Observer 1 is notified

这里创建了一个Subject类维护一系列的观察者，方便添加或者删除。Observer对象是一个抽象类，它允许具体的观察者实现notify方法。通过notifyAllObserver来通知更改后的更新。
Observer模式可以将应用程序分解为更小、更松散耦合的块，以改进代码的管理和复用。值得注意的是，尽管观察者模式确实提供了许多优点，但其中一个缺点是随着观察者人数的增加，性能显着下降。最臭名昭着的观察员之一是watchers。