设计模式：发布订阅模式

Posted 2022-11-19 「已注销」

发布订阅模式

• • 调度中心
  • 相关方法
  • • 订阅
    • 取消订阅
    • 触发
  • 示例

调度中心

class Center 
      constructor () 
        this.message = 
      

      //订阅
      on (type, fn) 
        if (this.message[type] === undefined) 
          this.message[type] = []
        
        this.message[type].push(fn)
      

      //取消订阅
      off (type, fn) 
        if (this.message[type] === undefined) throw Error('未订阅此事件')
        if (!fn) return delete this.message[type] 
        this.message[type] = this.message[type].filter(item => item !== fn)
      

      //触发
      emit (type) 
        if (this.message[type] === undefined) return
        this.message[type].forEach(item => 
          item()
        )
      
    

相关方法

订阅

• 订阅者可以在调度中心订阅一系列事件

on (type, fn) 
        if (this.message[type] === undefined) 
          this.message[type] = []
        
        this.message[type].push(fn)
      

取消订阅

• 订阅者可以取消事件的全部处理函数
• 订阅者也可以取消事件的某个处理函数
• 当取消未被订阅的事件时，就会抛出错误

off (type, fn) 
        if (this.message[type] === undefined) throw Error('未订阅此事件')
        if (!fn) return delete this.message[type] 
        this.message[type] = this.message[type].filter(item => item !== fn)
      

触发

emit (type) 
        if (this.message[type] === undefined) return
        this.message[type].forEach(item => 
          item()
        )
      

示例

• 实例化调度中心

    const center = new Center()

• 订阅a, b, c 三个事件

	center.on('a', handler1)
    center.on('a', handler2)
    center.on('b', handler3)
    center.on('b', handler4)
    center.on('c', handler5)
    center.on('c', handler6)
    function handler1 ()  console.log('handler1') 
    function handler2 ()  console.log('handler2') 
    function handler3 ()  console.log('handler3') 
    function handler4 ()  console.log('handler4') 
    function handler5 ()  console.log('handler5') 
    function handler6 ()  console.log('handler6') 

• 取消订阅事件a的所有处理函数

center.off('a')

• 取消事件a 的处理函数handler2

center.off('a', handler2)

• 触发事件 a

center.emit('a')