订阅发布者模式详解

Posted 曾胖神父

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了订阅发布者模式详解相关的知识,希望对你有一定的参考价值。

什么是订阅发布者模式?

定义

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

订阅者(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设计模式之----原生JS实现简单的发布订阅模式

Javascript设计模式之发布-订阅模式

JavaScript设计模式与开发实践 – 观察者模式

发布订阅模式实现及发布订阅者模式与观察者模式的不同

订阅发布者模式详解