前端设计模式：简单理解发布订阅模式

什么是发布订阅模式？

发布订阅模式（Pub/Sub）是一种消息通信范式，组件之间通过事件进行通信，发布者（Publisher）发送消息，订阅者（Subscriber）接收消息，两者通过事件中心进行解耦。

发布订阅模式优点？

1. 组件解耦：发布者和订阅者不需要直接知道对方存在
2. 灵活通信：支持一对多的消息传递
3. 事件驱动：适用于异步编程场景
4. 跨层级通信：在复杂前端应用中尤其有用

基础实现代码

class EventEmitter {
  constructor() {
    // 事件容器 { eventName: [callbacks] }
    this.events = new Map()
  }

  // 订阅事件
  on(eventName, callback) {
    if (!this.events.has(eventName)) {
      this.events.set(eventName, [])
    }
    this.events.get(eventName).push(callback)
    return this // 支持链式调用
  }

  // 发布事件
  emit(eventName, ...args) {
    const callbacks = this.events.get(eventName)
    if (!callbacks) {
      console.warn(`[${eventName}]事件尚未注册`)
      return false
    }
    callbacks.forEach(cb => cb.apply(this, args))
    return true
  }

  // 取消订阅
  off(eventName, callback) {
    const callbacks = this.events.get(eventName)
    if (!callbacks) return false
    
    this.events.set(
      eventName,
      callbacks.filter(cb => cb !== callback)
    )
    return true
  }
}

// 使用示例
const bus = new EventEmitter()

// 订阅事件
bus.on('login', user => {
  console.log(`欢迎回来，${user.name}`)
})

// 发布事件
setTimeout(() => {
  bus.emit('login', { name: 'Alice', id: 123 })
}, 1000)

核心方法解析

1. on() ：注册事件监听器
2. emit() ：触发指定事件
3. off() ：移除事件监听器

典型应用场景

1. 跨组件通信（如Vue非父子组件通信）
2. 全局状态更新通知
3. 异步操作结果通知
4. 表单字段联动校验
5. 微前端架构中的应用通信

对比观察者模式

• 观察者模式：直接依赖，Subject维护Observer列表
• 发布订阅模式：通过事件中心解耦，更松散的耦合

注意事项

1. 及时取消订阅避免内存泄漏
2. 注意事件命名冲突问题
3. 控制事件数量避免过度使用
4. 考虑异步事件处理顺序

总结

发布订阅模式是前端开发中重要的解耦利器，合理使用可以显著提升代码的可维护性和扩展性。但需注意控制使用场景，避免滥用导致代码可读性下降。