手写发布订阅/观察者模式

发布订阅模式 ：

• 简介：  通过事件中心（Event Bus）解耦发布者和订阅者。发布者将消息交给事件中心，事件中心分发给订阅者。
• 结构：  发布者、事件中心、订阅者三者解耦。
• 简单类比：  像电台广播，听众订阅不同频道，电台播出节目后，只有订阅该频道的听众收到

class EventBus{
constructor(){
this.listeners={}  // 初始化一个空对象，用于存储事件和对应的回调函数数组
}
on(event,callback){  // 订阅事件的方法 
    if(!this.listeners[event]){         // 如果事件名不在 events 对象中，创建一个新的空数组
     this.listeners[event]=[]}
   this.listeners[event].push(callback)  // 将回调函数添加到对应事件的数组中
}
emit（event,...args）{   // 发布事件的方法
    if(this.listeners[event]){     // 遍历该事件对应的所有回调函数
        this.listeners[event].forEach(callback=>{
        callback(...args)})}   // 调用回调函数，并传递参数
}}}
off(event,callback){   // 取消订阅事件的方法
     if(this.listeners[event]){   // 过滤掉要取消的回调函数
      this.listeners[event] = this.listeners[event].filter(cb => cb!== callback);
     }
}

// 使用示例
const eventBus = new EventBus();

function listener(data) {
    console.log('Received:', data);
}

// 订阅事件
eventBus.$on('my-event', listener);

// 发布事件
eventBus.$emit('my-event', { a: 1 });

观察者模式

• 观察者模式 ：

  • 简介：  被观察者（Subject）维护一个观察者列表，状态变化时直接通知观察者（Observers）。
  • 结构：  被观察者与观察者直接关联。
  • 简单类比：  像微信群，群主发消息直接通知所有成员。

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

  addObserver(observer) {
    this.observers.push(observer)
  }

  notify(data) {
    this.observers.forEach((observer) => observer.update(data))
  }
}

class Observer {
  update(data) {
    console.log(`Received: ${data}`)
  }
}

const subject = new Subject()
subject.addObserver(new Observer())
subject.notify('Hello')