实现发布订阅模式

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

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')
    })