什么是JavaScript中的观察者模式？

JavaScript中的观察者模式

观察者模式(Observer Pattern)是一种行为设计模式，它定义了对象间的一种一对多的依赖关系，当一个对象(被观察者/主题)的状态发生改变时，所有依赖于它的对象(观察者)都会得到通知并自动更新。

基本概念

在JavaScript中，观察者模式通常包含以下角色：

Subject (主题/被观察者)：维护一组观察者，提供添加、删除和通知观察者的方法
Observer (观察者)：定义一个更新接口，用于在主题状态改变时接收通知

实现方式

基本实现示例

// 主题/被观察者
class Subject {
  constructor() {
    this.observers = []; // 观察者列表
  }

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

  // 移除观察者
  removeObserver(observer) {
    this.observers = this.observers.filter(obs => obs !== observer);
  }

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

// 观察者
class Observer {
  update(data) {
    console.log(`观察者收到更新: ${data}`);
  }
}

// 使用示例
const subject = new Subject();
const observer1 = new Observer();
const observer2 = new Observer();

subject.addObserver(observer1);
subject.addObserver(observer2);

subject.notify('状态已更新'); // 两个观察者都会收到通知

更实用的实现

在实际开发中，观察者模式经常用于事件处理：

// 更简单的事件观察者实现
const eventEmitter = {
  events: {},
  
  // 订阅事件
  on(eventName, callback) {
    if (!this.events[eventName]) {
      this.events[eventName] = [];
    }
    this.events[eventName].push(callback);
  },
  
  // 取消订阅
  off(eventName, callback) {
    if (!this.events[eventName]) return;
    this.events[eventName] = this.events[eventName].filter(cb => cb !== callback);
  },
  
  // 触发事件
  emit(eventName, data) {
    if (!this.events[eventName]) return;
    this.events[eventName].forEach(callback => callback(data));
  }
};

// 使用示例
function logData(data) {
  console.log('收到数据:', data);
}

eventEmitter.on('data', logData);
eventEmitter.emit('data', { message: 'Hello Observer' }); // 触发事件
eventEmitter.off('data', logData); // 取消订阅