javascript发布订阅pubsub模式

Posted 2020-10-03 郑庙华

首先使用数组缓存订阅者订阅的消息，当订阅者订阅消息的时候，把订阅的消息push到指定消息的队列中，当发布者发布消息的时候，我们遍历执行push到指定消息队列中的回调事件。

var Pubsub=(function(){
    var eventObj={};
    return {
        subscribe:function(event,fn){
            eventObj[event]=fn
        },
        publish:function(event){
            if(eventObj[event]) eventObj[event]();
        },
        off:function(event,fn){
            if(eventObj[event]) eventObj[event]=null;
        }
    }
})()
Pubsub.subscribe(‘event‘,function(){
    console.log("正在执行,但是一个事件只能绑定一个操作");
})
Pubsub.publish("event");

//支持一个事件绑定多个操作
var Pubsub1=(function(){
    var quence={};//{‘type1‘:[],‘type2‘:[]}
    return {
        subscribe:function(event,fn){
            if(!quence[event]) quence[event]=[];
            quence[event].push(fn);
        },
        publish:function(event){
            var eventQuence=quence[event],
                len=eventQuence.length;
            if(len>0){
                eventQuence.forEach((item,index)=>{
                    item()
                })
            }
        },
        off:function(event,fn){
            var eventQuence = quence[event];
            if (eventQuence) {
                quence[event] = eventQuence.filter(function(item) {
                    return item !== fn;
                });
            }
        }
    }
})()
function first(){
    console.log("emit first")
}
function second(){
    console.log("emit second")
}
Pubsub1.subscribe(‘a‘,first)
Pubsub1.subscribe(‘a‘,second)
Pubsub1.off(‘a‘,first)//退订一个first事件
Pubsub1.publish("a");