什么是订阅发布者模式?

定义

发布-订阅模式其实是一种对象间一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到状态改变的通知

订阅者(Subscriber)把自己想订阅的事件注册(Subscribe)到调度中心(Event Channel),当发布者(Publisher)发布该事件(Publish Event)到调度中心,也就是该事件触发时,由调度中心统一调度(Fire Event)订阅者注册到调度中心的处理代码

图解

图解如下

Demo

实现代码如下

//发布订阅模式

const EventManager=(function(){

//事件存储对象

let eventList={};

//事件注册与绑定(形参event指代事件名,形参handler指代事件欲绑定的函数)

function on(event,handler){

//判断事件是否存在

if(!eventList[event]){

//如果没有则注册事件,并给事件绑定handler函数

eventList[event]=[handler]

}else{

//如果有则给事件绑定handler函数(一个事件绑定多个函数)

eventList[event].push(handler);

}

}

//事件触发(形参event指代事件名,形参data事件绑定函数的传入参数)

function fire(event,data)

{

//判断事件存储对象是否包含该事件

if(eventList[event]){

//如果有则调用事件绑定的所有函数

eventList[event].forEach(handler=>handler(data))

}

}

//事件解绑

function off(event,handler)

{

//如果事件存在

if(eventList[event])

{

//且传入的形参handler为空

if(!handler){

//删除事件存储对象中的事件

delete eventList[event];

}

}

//如果事件不存在

else

{

//使用indexOf获取事件绑定的指定函数下标

let index=eventList[event].indexOf(handler);

//使用splice删除事件指定绑定函数

eventList[event].splice(index,1);

}

}

return {

on:on,//on事件注册与绑定

fire:fire,//fire触发事件

off:off//off事件解绑

}

})();

EventManager.on('sayHello',function(data){

console.log('hello'+data);

})

EventManager.fire('sayHello','HelloWorld');

精彩内容

评论可见,请评论后查看内容,谢谢!!!
 您阅读本篇文章共花了: 


大家都在找:

javascript:javascript错误怎么解决

开发语言:开发语言排行榜

ecmascript:ecmascript6

大家都在看: