JavaScript自定义事件和发布订阅模式
2017-12-19 本文已影响50人
_于易
在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)
}
}