观察者模式

[chenlong-io]

这是一种至关重要的行为设计模式，它定义了对象之间的一对多依赖关系，以便当一个对象（发布者）更改其状态时，所有其他依赖对象（订阅者）都将得到通知并自动更新。这也称为PubSub（发布者/订阅者）或Event Dispatcher / Listeners Pattern。发布者有时称为主题，订阅者有时称为观察者。

如果您已经使用addEventListener或jQuery编写事件处理代码，那么您可能已经有点熟悉此模式了。它也对反应式编程（RxJS）有影响。

在示例中，我们创建了一个简单的Subject类，该类具有用于Observer从订户集合中添加和删除类的对象的方法。另外，一种fire将Subject类对象中的任何更改传播到订阅的Observers的方法。的Observer类，在另一方面，有其内部状态和基于从传播的改变更新其内部状态的方法Subject它已经预订。

Observer.js

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

  subscribe(observer) {
    this._observers.push(observer);
  }

  unsubscribe(observer) {
    this._observers = this._observers.filter(obs => observer !== obs);
  }

  fire(change) {
    this._observers.forEach(observer => {
      observer.update(change);
    });
  }
}

class Observer {
  constructor(state) {
    this.state = state;
    this.initialState = state;
  }

  update(change) {
    let state = this.state;
    switch (change) {
      case 'INC':
        this.state = ++state;
        break;
      case 'DEC':
        this.state = --state;
        break;
      default:
        this.state = this.initialState;
    }
  }
}

// usage
const sub = new Subject();

const obs1 = new Observer(1);
const obs2 = new Observer(19);

sub.subscribe(obs1);
sub.subscribe(obs2);

sub.fire('INC');

console.log(obs1.state); // 2
console.log(obs2.state); // 20