Skip to content

观察者模式 ​

观察者模式定义了对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知,并自动更新。

观察者模式属于行为型模式,行为型模式关注的是对象之间的通讯,观察者模式就是观察者和被观察者之间的通讯。

图片

例如生活中,我们可以用报纸期刊的订阅来形象的说明,当你订阅了一份报纸,每天都会有一份最新的报纸送到你手上,有多少人订阅报纸,报社就会发多少份报纸

报社和订报纸的客户就形成了一对多的依赖关系。

代码实现 ​

被观察者 ​

js
// 被观察者
class Subject {
  constructor() {
    this.observers = [];
  }

  // 注册观察者
  registerObserver(observer) {
    this.observers.push(observer);
  }
  // 删除观察者
  removeObserver(o) {
    const index = this.observers.findIndex(
      (observer) => (o.name = observer.name)
    );
    if (index !== -1) {
      this.observers.splice(index, 1);
    }
  }
  // 通知观察者
  notifyObservers(message) {
    this.observers.forEach((observer) => {
      observer.update(message);
    });
  }
}

观察者 ​

js
// 观察者
class Observer {
  constructor(name, subject) {
    this.name = name;
    if (subject) {
      subject.registerObserver(this);
    }
  }
  update(message) {
    console.log(`${this.name} 收到消息 ${message}`);
  }
}

使用 ​

js
const subject = new Subject();
const observer1 = new Observer("张三", subject);
const observer2 = new Observer("李四");
subject.registerObserver(observer2);
subject.notifyObservers("Hello from subject");
subject.removeObserver(observer1);

上述代码中,观察者主动申请加入被观察者的列表,被观察者主动将观察者加入列表

转载请注明出处