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 的状态发...