码迷,mamicode.com
首页 > Web开发 > 详细

js发布订阅模式实现eventBus

时间:2021-01-22 12:01:16      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:push   class   name   eventbus   handler   rop   ons   ntb   eve   

class EventBus {
    constructor(){}
    handlerBus={}
    //注册
    $on(eventName,handler){
        if(!this.handlerBus.hasOwnProperty(eventName)){
            this.handlerBus[eventName] = []
        }
        this.handlerBus[eventName].push(handler)
    }
    //触发
    $emit(eventName,handlerParams){
        if(!this.handlerBus.hasOwnProperty(eventName)){
            return new Error(‘未注册该事件‘)
        }
        const eventHandlers = this.handlerBus[eventName]
        for(let i = 0;i<eventHandlers.length;i++){
            eventHandlers[i](handlerParams)
        }
    }
    //触发一次
    $onece(eventName,handlerParams){
        this.$emit(eventName,handlerParams)
        this.$remove(eventName)
    }
    //移除
    $remove(eventName,handler){
        if(!this.handlerBus.hasOwnProperty(eventName)){
            return new Error(‘未注册该事件‘)
        }
        if(!handler){
            //如果没指定移除的子handler 则移除整个eventName 
            Reflect.defineProperty(this.handlerBus,eventName)
            return
        }
        //如果指定了handler
        const eventHandlers = this.handlerBus[eventName]
        const handlerIndex = eventHandlers.findIndex(event=>event === handler)
        if(handlerIndex === -1){
            return new Error(‘未绑定该事件‘)
        }
        this.handlerBus[eventName].splice(handlerIndex,1)
        if(this.handlerBus[eventName].length === 0)Reflect.defineProperty(this.handlerBus,eventName)
    }
}
export default EventBus

  使用示例:

                const EventBusObj = new EventBus()
		const f1=(p)=>{
			console.log(‘f1‘)
			console.log(p)
		}
		const f2=(p)=>{
			console.log(‘f2‘)
			console.log(p)
		}
                //注册
		EventBusObj.$on(‘event1‘,f1)
		EventBusObj.$on(‘event1‘,f2)
                 

               //触发
               EventBusObj.$emit(‘event1‘,{a:1})
               //移除event1的f1方法
               EventBusObj.$remove(‘event1‘,f1)    

  

js发布订阅模式实现eventBus

标签:push   class   name   eventbus   handler   rop   ons   ntb   eve   

原文地址:https://www.cnblogs.com/BlueCc/p/14308824.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!