JS实现观察者模式

定义主题（Subject）类

主题类负责管理观察者列表，并提供添加、删除和通知观察者的方法。

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

  // 添加观察者
  addObserver(observer) {
    this.observers.push(observer);
  }

  // 删除观察者
  removeObserver(observer) {
    const index = this.observers.indexOf(observer);
    if (index > -1) {
      this.observers.splice(index, 1);
    }
  }

  // 通知所有观察者
  notify(message) {
    this.observers.forEach(observer => observer.update(message));
  }
}

定义观察者（Observer）类

class Observer {
  constructor(name) {
    this.name = name;
  }

  // 更新方法
  update(message) {
    console.log(`${this.name} 收到了消息: ${message}`);
  }
}

使用示例

// 创建主题实例
const subject = new Subject();

// 创建观察者实例
const observer1 = new Observer('观察者1');
const observer2 = new Observer('观察者2');

// 添加观察者
subject.addObserver(observer1);
subject.addObserver(observer2);

// 发送通知
subject.notify('你好，观察者们！');

// 移除一个观察者
subject.removeObserver(observer1);

// 再次发送通知
subject.notify('观察者1 已经被移除了！');

解释

• Subject 类：管理观察者的列表，并提供添加、删除和通知观察者的方法。
• Observer 类：实现 update 方法，用于处理来自主题的通知。
• 使用示例：创建主题和观察者实例，通过主题的 notify 方法发送通知，观察者会接收到相应的消息。

这种模式在 Vue 等框架中也有应用，例如 Vue 的响应式系统就是基于观察者模式实现的。