观察者模式与发布订阅区别解析

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

  // 添加观察者
  addObserver(observer) {
    if (typeof observer.update === 'function') {
      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 {
  constructor(name) {
    this.name = name;
  }

  update(data) {
    console.log(`${this.name} 收到更新：`, data);
  }
}

const subject = new Subject();
const o1 = new Observer('UI组件');
const o2 = new Observer('日志服务');

subject.addObserver(o1);
subject.addObserver(o2);

subject.notify({ status: 'loading' }); // 两者都会收到

class EventBus {
  constructor() {
    this.events = {};
  }

  // 订阅事件
  on(event, callback) {
    if (!this.events[event]) this.events[event] = [];
    this.events[event].push(callback);
  }

  // 发布事件
  emit(event, data) {
    const callbacks = this.events[event];
    if (callbacks && callbacks.length) {
      callbacks.forEach(cb => cb(data));
    }
  }

  // 取消订阅
  off(event, callback) {
    if (this.events[event]) {
      this.events[event] = this.events[event].filter(cb => cb !== callback);
    }
  }
}

// 使用
const bus = new EventBus();

bus.on('user:login', (user) => console.log('欢迎', user.name));
bus.on('user:logout', () => console.log('已登出'));

bus.emit('user:login', { name: '张三' });