Skip to content
On this page

Typescript订阅监听

1、什么是否发布订阅模式

TIP

发布订阅模式是一种设计模式,它定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象,当主题对象发生变化时,它的所有依赖者都会收到通知并自动更新。

2、发布订阅模式的实现

ts
interface EventFace {
  on: (name: string, callback: Function) => void,
  off: (name: string, callback: Function) => void,
  emit: (name: string, ...args: any[]) => void,
  once: (name: string, callback: Function) => void
}

interface List {
  [key: string]: Array<Function>
}

class Dispatch implements EventFace {
  list: List 
  constructor() {
    this.list = {}
  }
  on(name: string, callback: Function) {
    const callbackList: Array<Function> = this.list[name] || []
    callbackList.push(callback)
    this.list[name] = callbackList
  }
  off(name: string, callback: Function) {
    const callbackList: Array<Function> = this.list[name]
    if (callbackList && callback) {
      const index = callbackList.indexOf(callback)
      callbackList.splice(index, 1)
    } else {
      console.error('该事件未监听')
    }
  }
  emit(name: string, ...args: any[]) {
    const callbackList: Array<Function> = this.list[name]
    if (callbackList) {
      callbackList.forEach(callback => {
        callback.apply(this, args)
      })
    } else {
      console.error('该事件未监听')
    }
  }
  once(name: string, callback: Function) {
    const decor = (...args: any[]) => {
      callback.apply(this, args)
      this.off(name, decor)
    }
    this.on(name, decor)
  }
}

const dispatch = new Dispatch()
dispatch.on('test', (...args: any[]) => {
  console.log(args)
})

dispatch.emit('test', 1, 2, 3)

Released under the MIT License.