订阅发布者模式详解

什么是订阅发布者模式？

定义

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

订阅者(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');