观察者模式：一个对象（观察者）订阅另一个对象（主题），当主题被激活的时候，触发观察者里面的事件。

发布订阅模式：订阅者把自己想要订阅的事件注册到调度中心，当发布者发布事件到调度中心（就是该事件被触发），再由调度中心统一调度订阅者注册到调度中心的处理代码。

对比一下：

可以发现两种模式下的角色数量不一样：

• 观察者模式里，只有两个角色：观察者 和 被观察者
• 发布订阅模式里，却不仅仅只有发布者和订阅者两个角色，还有一个调度中心

从使用场景上：

• 观察者模式比较适合在单个应用内部使用
• 发布订阅模式则是比较适合跨应用的场景

具体使用场景

观察者模式应用场景

1. Vue 响应式系统

   • Vue 2 使用 Object.defineProperty，Vue 3 使用 Proxy 实现数据劫持
   • 数据变化时直接通知依赖的 Watcher（观察者）

2. 表单验证

   • 表单字段作为被观察者
   • 验证规则作为观察者，字段变化时触发验证

3. 自定义事件系统

   复制
   1class Subject {
   2  constructor() {
   3    this.observers = [];
   4  }
   5  addObserver(observer) {
   6    this.observers.push(observer);
   7  }
   8  notify(data) {
   9    this.observers.forEach(observer => observer.update(data));
   10  }
   11}

4. Intersection Observer API

   • 监听元素是否进入视口
   • 被观察者是 DOM 元素，观察者是回调函数

发布订阅模式应用场景

1. 全局事件总线

   复制
   1// Vue 中的实现
   2const EventBus = new Vue();
   3// 发布
   4EventBus.$emit('event-name', data);
   5// 订阅
   6EventBus.$on('event-name', callback);

2. Redux/Vuex 状态管理

   • Store 作为事件中心
   • 组件订阅状态变化
   • Actions 发布状态变更事件

3. WebSocket 消息处理

   • 服务端推送不同类型消息
   • 客户端根据不同消息类型注册处理函数

4. 微前端通信

   • 不同微应用通过全局事件总线通信
   • 避免直接耦合

5. DOM 事件系统

   • 浏览器原生的事件监听机制

   复制
   1document.addEventListener('click', handler); // 订阅
   2element.dispatchEvent(new Event('click')); // 发布

对比与选择

特性	观察者模式	发布订阅模式
耦合度	较高（直接引用）	较低（通过中间件）
灵活性	较低	较高
实现复杂度	简单	相对复杂
典型应用	Vue 响应式、表单验证	事件总线、状态管理
性能影响	直接调用，性能较好	需要查找订阅者，稍慢