实现发布订阅模式

发布订阅模式它和观察者模式类似,区别是:一个有中间商(发布订阅模式)一个没有中间商(观察者模式)

class YFEmmiter{
#handlers={}
$on(event,callback){
//1.1添加私有属性
//1.2保存事件
  if(this.#handlers[event]===undefind{
	 this.#handlers[event]=[]
}
  this.#hanlers[event].push(callback)
}
//2.1接受不定长参数
$emit(event,...args){
	//2.2循环触发事件
  const funcs=this.#handlers[event]||[]
  funcs.forEach(callback=>{
	callback(...args)
  })
}
$off(event){
	this.#handlers[event]=undefind
}
$once(event,callback){
	//4.1调用on注册事件
  this.$on(event,(...args)=>{
	callback(...args)
	//4.2事件内调用$off
	this.$off(event)
  		})
	}
}
const bus=new YFEmmiter()
 //注册事件     
   document.querySelector('.on').addEventListener('click',()=>{
    bus.$on('event1',()=>{console.log('回调函数1');})
    bus.$on('event2',(name,info)=>{console.log(name,info);})
    bus.$on('event2',(name,info)=>{console.log('event2的第二个回调函数',name,info);})
   })
   
    //触发事件
    document.querySelector('.emit').addEventListener('click',()=>{
    bus.$emit('event1')
    bus.$emit('event2','itheima','666')
    })

    //移除事件
    document.querySelector('.off').addEventListener('click',()=>{
    bus.$off('event2')
    })

    //一次性事件注册
    document.querySelector('.once-on').addEventListener('click',()=>{
    bus.$once('$once-event',(name,info)=>{
        console.log(name,info);
    })
    })

    //一次性事件触发
    document.querySelector('.once-emit').addEventListener('click',()=>{
    bus.$emit('$once-event','itheima','666')
    })

全部评论

相关推荐

不愿透露姓名的神秘牛友
07-18 18:30
点赞 评论 收藏
分享
07-02 10:39
门头沟学院 Java
Steven267:说点真实的,都要秋招了,还没有实习,早干嘛去了,本来学历就差,现在知道急了,而且你这个简历完全可以写成一页,劣势太大了,建议转测试
点赞 评论 收藏
分享
评论
点赞
1
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务