class EventEmitter{
constructor(){
this._events = Object.create(null)//创建一个新对象来存放所有被监听的事件和处理函数
}
on(event,callback){ //监听event事件，触发时调用callback函数
let callbacks = this._events[event] || [] //判断event事件是否已有其他事件处理函数，没有则为空数组
callbacks.push(callback)
this._events[event] = callbacks
return this
}
off(event,callback){ //停止监听event事件
let callbacks = this._events[event]
this._events[event] = callbacks && callbacks.filter(fn => fn !== callback) //如果event事件内存在事件处理函数，就查找其中是否有callback函数并把它过滤掉。
return this
}
emit(...args){ //触发事件，并把参数传给事件的处理函数
const event = args[0]
const params = [].slice.call(args,1) //!!!因为args非数组，所以需要通过空数组来调用数组的slice方法并把this指向args
const callbacks = this._events[event]//获取event事件的全部事件处理函数
callbacks.forEach(fn => fn.apply(this, params))//遍历执行全部事件处理函数
return this
}
once(event,callback){ //为事件注册单次监听器
let wrapFanc = (...args) => {//创建一个wrapFanc函数实现单次调用后停止监听
callback.apply(this, args)//执行wrapFanc
this.off(event,wrapFanc)//后停止监听事件
}
this.on(event,wrapFanc)//注册监听wrapFanc事件
return this
}
}
JavaScript实现发布订阅模式
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 前言 一个多月前，面试时被问到发布-订阅模式，面试完就查阅资料学习了下。这篇文章我将记录我对此的理解并用Javas...
- 什么是发布-订阅模式？ 发布-订阅模式又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变...
- 观察者模式（Observer） 观察者模式：定义了对象间一种一对多的依赖关系，当目标对象 Subject 的状态发...
