1.什么是发布订阅模式?
它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知
例子:
小明非常喜欢一个博主的某个系列文章,但不知道什么时候更新,于是小明订阅的该博主的该系列博文。当博主更新时,保证小明能够及时收到通知。这就是一个简单的发布订阅者例子。博主是发布者,小明是订阅者。订阅对象是该系列博文
2.应用
1.支持简单通信,上一个例子中,当对象状态更新时,自动通知该对象的订阅者。
2.发布者和订阅者是一个松耦合关系。发布者只管通知订阅者,不管订阅者如何运行。订阅者只关心对象状态是否改变,决定是否调用事件方法。在异步请求中广泛应用。我们不需要关注对象在异步执行阶段的内部状态,我们只关心事件完成的时间点
3.代码实现
实现基本步骤:
-
定义一个事件容器,装事件数组(存订阅者)
-
定义添加订阅者方法(addEventListener())
-
定义触发事件(dispatchEvent)-----发布者通知订阅者,执行对应事件方法
-
定义事件移除方法(removeEventListener())----删除该对象的订阅发布事件
class EventCenter{
//1.定义事件容器,用来装事件数组
handlsers={};
//事件名,事件参数,事件方法
addEventListener(type ,handlser)
{
//创建新的数组
if(!this.handlsers[type])
{
this.handlsers[type]=[]
}
this.handlsers[type].push(handlser)
}
//2.触发事件
dispatchEvent(type)
{
//没有注册抛出错误
if(!this.handlsers[type])
{
return new Error("该事件未注册")
}
//触发事件
this.handlsers[type].forEach(handlser=>{
handlser(...params)
})
}
//3.事件移除
removeEventListener(type,handlser)
{
//不存在该事件
if(!this.handlsers[type])
{
return new Error("该事件无效")
}
//无事件方法,删除该事件的订阅和发布
if(!handlser)
{
delete this.handlsers[type]
}else{
//找出对应事件方法的发布订阅数组的下标
const index=this.handlsers[type].findIndex(el=>el===handlser)
//未找到
if(index===-1)
return new Error("无绑定该事件")
//找到下标,删除该事件的订阅和发布事件
this.handlsers[type].splice(index,1)
if(this.handlsers[type].length===0)
{
delete this.handlsers[type]
}
}
}
}
挑战连续更文100天—第一天