JavaScript实现发布订阅模式

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
        }
    }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容