手动实现发布订阅模式

class Emmiter{
	constructor(){
		this.eventList = {} //事件调度中心
	}
	on(type,func){//订阅
		if(!this.eventList[type]){
			this.eventList[type] = []
		}
		this.eventList[type].push(func)
	}
	emit(type,val){//发布
		if(!this.eventList[type]) return 
		this.eventList[type].forEach(fn=>fn.call(this,val))
	}
	off(type,func){//解除订阅
		if(!this.eventList[type]) return
		this.eventList[type].some((item,index,arr)=>{
			if(item===func){
				arr.splice(index,1)
				return true
			}
		})
	}
}
const emmiter = new Emmiter()
let print = (res) => { console.log(res) }
emmiter.on('a', print) // 订阅
emmiter.emit('a', '我是中国人') // 发布
emmiter.emit('a', '我说普通话') // 发布
emmiter.off('a',print) //解绑
emmiter.emit('a', '我是中国人') // 
emmiter.emit('a', '我说普通话') // 
升级版
class eventEmmiter{
	constructor(){
		//this指向实例对象
		this.events = new Map()
		this.wrapCallback = (fn,once=false) => ({callback:fn,once})
	}
	//此处定义在类的prototype属性上面
	addListenter(type,func,once=false){
		const handler = this.events.get(type)
		if(!handler){
			this.events.set(type,this.wrapCallback(func,once))
		}else if(!Array.isArray(handler)){
			this.events.set(type,[handler,this.wrapCallback(func,once)])
		}else{
			handler.push(this.wrapCallback(func,once))
		}
	}
	removeListener(type,listener){
		const handler = this.events.get(type)
		if(!handler) return 
		if(!Array.isArray(handler)){
			if(handlder.callback === listener.callback){
				this.events.delete(type)
			}else{
				return true
			}
		}else{
			for(let i = 0 ; i < handler.length;i++){
				const item = handeler[i].callback
				if(item === listener.callback){
					handler.splice(i,1)
					i--
					if(handler.length===1){
						this.events.set(type,handler[0])
					}
				}
			}
		}
	}
	removeAllListener(type){
		const handler = this.events.get(type)
		if(!handler) return 
		this.events.delete(type)
	}
	once(type,func){
		this.addListener(type,func,true)
	}
	emit(type,...args){
		const handler = this.events.get(type)
		if(!handler) return 
		if(!Array.isArray(handler)){
			handler.callback.apply(this,args)
			if(handler.once) this.removeListener(type,handler)
		}else{
			handler.map(item=>{
				item.callback.apply(type,args)
				if(item.once) this.removeListener(type,item)
			})
		}
	}
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值