【前端】观察者模式和发布订阅模式

观察者模式介绍

奶茶店点奶茶，点完之后不必一直关注，做好了会通知我

观察者模式代码实现

观察者模式的场景

DOM事件

const $btn1 = $('#btn1')
$btn1.click(function() {
  console.log(1)
})
$btn1.click(function() {
  console.log(2)
})

Vue、React组件生命周期

Vue watch

Vue组件更新过程

各种异步回调

MutationObserver

发布订阅模式（不属于23种设计模式）

场景

• 场景：自定义事件

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

  • EventEmitter手写

  • 注意⚠️：自定义事件组件销毁时，一定要off，防止内存泄漏

    
    import emitter from '../yourEvent.js'
    export default {
      name: 'EventBusDemo',
      created() {
        // 绑定事件on
        emitter.on('change', this.changeHandler)
      },
      methods: {
        changeHandler() {
          console.log('chang1')
        },
      },
      beforeUnmount() {
        // 解绑事件off
        // 注意是同一个事件changeHandler
        emitter.off('change', this.changeHandler)
      },
    }

• postMessage通讯

  • 网页和iframe的通讯

  • 多进程(nodejs WebWorker)通讯、WebSocket通讯

区别

• 观察者模式： Subject和Observer直接绑定，中间无媒介
• 发布订阅模式： Publisher和Observer互不认识，中间有媒介

快速区分

• 是否有手动触发emit，有就是发布订阅模式
• 观察者模式没有手动触发，只能被动等着