实现发布订阅模式
发布订阅模式它和观察者模式类似,区别是:一个有中间商(发布订阅模式)一个没有中间商(观察者模式)
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')
})
查看8道真题和解析
海康威视工作强度 194人发布
我主react的时候实习面试时候真感觉问的很少