js设计模式-发布/订阅模式

Posted 2021-01-24 一脚一个坑

一、前言

　　发布订阅模式，基于一个主题/事件通道，希望接收通知的对象（称为subscriber）通过自定义事件订阅主题，被激活事件的对象（称为publisher）通过发布主题事件的方式被通知。

　　就和用户订阅微信公众号道理一样，一个公众号可以被多个用户同时订阅，当公众号有新增内容时候，只要发布就好了，用户就能接收到最新的内容。

　　js中的事件监听机制就是一种观察者模式。

二、和观察者模式的区别

　　观察者模式：一个对象（称为subject）维持一系列依赖于它的对象（称为observer），将有关状态的任何变更自动通知给它们（观察者）。

　　1、Observer模式要求观察者必须订阅内容改变的事件，定义了一个一对多的依赖关系；
       2、Publish/Subscribe模式使用了一个主题/事件通道，这个通道介于订阅着与发布者之间；
       3、观察者模式里面观察者「被迫」执行内容改变事件（subject内容事件）；发布/订阅模式中，订阅着可以自定义事件处理程序；
       4、观察者模式两个对象之间有很强的依赖关系；发布/订阅模式两个对象之间的耦合读底

这是一个简单的实现，主要是创建一个对象，有三个属性（容器，订阅方法，发布方法）。将订阅者放入容器，发布，触发容器内的函数。

(function(){

    //
    function Public(){
        //存放订阅者的容器
        this.subscribers=[];
        //添加订阅者
        this.addSubscribers=function(fn){
            let isExit = this.subscribers.some(function(sub){
                return fn == sub;
            })
            if(!isExit){
                this.subscribers.push(fn);
            }
            return this;
        }
    
    //发布消息
    this.deliver = function(data){
        this.subscribers.forEach(function(fn){
            fn(data);
        })
        return this;
    }    
    }
    
    let a = function(data){
        console.log("a:"+data);
    }
    let b = function(data){
        console.log("b:"+data);
    }

    let c = function(data){
        console.log("c:"+data);
    }

    var pub = new Public();
    pub.addSubscribers(a).addSubscribers(b).addSubscribers(c);
    pub.deliver("消息");
})()

2、可以看到观察者模式有如下优点

　　a、每一个订阅者都是相互独立的只和发布者有关系，与发布者是一对多的关系，也可以是一对一的关系。
　　b、每一个订阅者可以根据自己的需求来调用，而不影响其它订阅者
　　c、与第一种方式相比，第二种方式的代码可读性、可维护性强；

这是一个完整的实现

(function(win){
    function Public(){
        this.handlers={};    
    }
    Public.prototype = {
        //订阅事件
        on:function(eventType,eventHandle){
            var self = this;
            if(!(eventType in self.handlers)){
                self.handlers[eventType] = [];
            }
            self.handlers[eventType].push(eventHandle);
            return this;
        },
        emit:function(eventType){
            //如果调用函数传了多个参数，eventType指第一个参数，arguments是一个对象，参数序号是key指，同时也给他length
            //看起来像数组，其实不是数组。
            var self = this;
            //去除第一个事件类型的参数,使用call改变this指向
            //使用slice的对象需要由length属性，所以arguments才能使用成功。
            var handleArgs = Array.prototype.slice.call(arguments,1);
            console.log(handleArgs);
            for (var i =0; i<self.handlers[eventType].length;i++) {
                //使用apply,订阅者的调用对象就是Public，不适用就是数组对象。
                self.handlers[eventType][i].apply(self,handleArgs);
            }
            return this;
        },
        off:function(eventType,eventHandle){
            var currentEvent = this.handlers[eventType];
            var len = 0;
            if(currentEvent){
                len = currentEvent.length;

                if(eventHandle == undefined){
                    currentEvent[eventType] = [];
                }else{
                    for (var i = len-1;i >= 0;i--) {
                        if(currentEvent[i] == eventHandle){
                            currentEvent.splice(i,1);
                        }
                    }    
                }
                
            }
        }
    }
    var a = function(data){
        console.log(this);
        console.log("a"+data);
    }
    var b =function(data){
        console.log("b"+data);
        
    }
　　    var pub = new Public();
    pub.on("click",a).on("click",b);
    pub.emit("click","xiaoxi");

})(window)

参考博主的文章：https://www.cnblogs.com/leaf930814/p/9014200.html