[TOC]

发布订阅模式不属于传统的 23 种设计模式，属于观察者模式的另一种实现形式，实际工作中，不会区分的那么细致

发布订阅模式🌰

// 绑定
event.on('event-key', () => {
  // 事件1
})
event.on('event-key', () => {
  // 事件2
})

// 触发执行
event.emit('event-key')

核心区别：观察者模式没有主动触发的功能。

image.png

  • 观察者：Subject 和 Observer 直接绑定，中间无媒介

  • 发布模式：Publisher 和 Observer 互不相识，中间有媒介

    场景

  • 自定义事件

  • POSTMessage 通讯

自定义场景

  • vue2 本身就是一个 EventBus
  • vue3 不在自带 EventBus 功能，推荐使用 mitt
  • 老牌 EventBus - eventEmitter

截屏2022-07-10 16.56.59.png
截屏2022-07-10 16.57.11.png
postMessage 通讯

  • 网页和 iframe 的通讯
  • 其他：多进程（nodejs WebWorker）通讯，WebSocket 通讯等 ```html 

```html
<script>
  // 子页面监听事件
  window.addEventListener('message', event => {
    console.log(event.data)
  })

  // 子页面发送消息
  window.parent.postMessage('world', '*');
</script>

注意：自定义事件要及时 off，避免内存泄露