JavaScript自定义事件和发布订阅模式

在js和JQuery里都可以自定义事件，在我看来自定义事件的核心就是发布订阅模式的实现。所谓的发布订阅模式是JavaScript设计模式的一种，它的核心在于两点：1.创造一个事件的共享储存空间。2.添加on/off/tirgger等接口实现挂载、移除、触发等动作。
在js和jQuery里已经为我们准备好了挂载触发事件的一系列api，在jQuery里：

$(element).on(event,handler) //实现挂载或者叫监听
$(element).trigger(event) //触发
$(element).off(event) //移除

在js中通过CustomEvent构造函数来创建一个自定义事件，通过addEventListener()和dispatchEvent()这两个api来实现事件的发布订阅。dispatchEvent作用是为节点分派一个合成事件。

var EventCenter = {
  on: function(event, handler){
    document.addEventListener(event, handler)
  },
  fire: function(event, data){
    return document.dispatchEvent(new CustomEvent(event, {
      detail: data
    }))
  }
}

EventCenter.on('hello', function(e){
  console.log(e.detail)
})

EventCenter.fire('hello', '你好')

此例中共享的储存空间就是document对象。

如何不依赖web api封装一个发布订阅模式的类呢？

class PubSubHandler {
    constructor(){
        this.eventPool = {};
    }
    //移除
    off(topicName){
        delete this.eventPool[topicName]
    }
    //发布
    trigger(topicName,...args){
        this.eventPool[topicName]&&
        this.eventPool[topicName].forEach(callback => {
            callback(...args)
        });
    }
    //订阅
    on(topicName,callback){
        let topic = this.eventPool[topicName]
        if(!topic){
            this.eventPool[topicName] = []
        }
        this.eventPool[topicName].push(callback)
    }
}