javascript设计模式-(发布-订阅模式)

var salesOffices={};//定义售楼处
salesOffices.clientList=[];//缓存列表，存放订阅者的回调函数
salesOffices.listen=function (fn) {//增加订阅者
    this.clientList.push(fn);//订阅的消息添加进缓存列表
};
salesOffices.trigger=function(){//发布消息
    for(var i=0,fn;fn=this.clientList[i++];){
        fn.apply(this, arguments);//fn是发布消息时带上的参数
    }
};
salesOffices.listen(function(price,squareMeter){
    console.log(price);
    console.log(squareMeter);
});
salesOffices.trigger(200000,88);

增加一个key，让订阅者只订阅自己感兴趣的消息。

var salesOffices={};//定义售楼处
salesOffices.clientList=[];//缓存列表，存放订阅者的回调函数
salesOffices.listen=function (key,fn) {
    if(!this.clientList[key]){
        this.clientList[key]=[];//如果还没有订阅过此类消息，该该类消息创建一个缓存列表
    }
    this.clientList.push(fn);//订阅的消息添加进缓存列表
};
salesOffices.trigger=function(){//发布消息
    var key=Array.prototype.shift.call(argments),//取出消息类型
    fns=this.clientList[key];//取出该消息对应的回调函数集合
    if(!fns||fns.length===0){//如果没有订阅该消息，则返回
        return false;
    }
    for(var i=0,fn;fn=this.clientList[i++];){
        fn.apply(this, arguments);//arguments是发布消息时带上的参数
    }
};
salesOffices.listen('squareMeter88',function(price){
    console.log(price);
});
salesOffices.listen('squareMeter110',function(price){
    console.log(price);
});
salesOffices.trigger('squareMeter88',200000);
salesOffices.trigger('squareMeter110',300000);

发布-订阅的通用实现

// 将发布-订阅功能提取出来，放在一个单独的对象里
var event={
    clientList:[],
    listen:function(key,fn){
        if(!this.clientList[key]){
            this.clientList[key]=[];
        }
        this.clientList[key].push(fn);
    },
    trigger:function(){
        var key=Array.prototype.shift.call(arguments),
        fns=this.clientList[key];
        if(!fns||fns.length===0){
            return false;
        }
        for(var i=0,fn;fn=fns[i++];){
            fn.apply(this, arguments);
        }
    }
};

// 再定义一个installEvent函数，这个函数可以给所有的对象都动态安装发布-订阅功能
var installEvent=function(obj){
    for(var i in event){
        obj[i]=event[i];
    }
};

// 测试
var salesOffices={};
installEvent(salesOffices);
salesOffices.listen('squareMeter88',function(price){
    console.log(price);
})
salesOffices.trigger('squareMeter88',2000000);

取消订阅的事件

event.remove=function (key,fn) {
    var fns=this.clientList[key];
    if(!fns){
        return false;
    }
    if(!fn){
        fns&&(fns.length=0);
    } else {
        for(var l=fns.length-1;l>=0;l--){
            var _fn=fns[l];
            if(_fn===fn){
                fns.splice(l,1);
            }
        }
    }
};
var salesOffices={};
var installEvent=function(obj){
    for(var i in event){
        obj[i]=event[i];
    }
}

installEvent(salesOffices);
salesOffices.listen('squareMeter88',fn1=function(price){ //小明订阅
    console.log(price);
});
salesOffices.listen('squareMeter88',fn2=function(price){ //小红订阅
    console.log(price);
});
salesOffices.remove('squareMeter88',fn1);//删除小明的订阅
salesOffices.trigger('squareMeter88',200000);

添加中介，发布-订阅用一个全局的Event对象来实现，订阅者不需要了解信息来自哪个发布者，发布者也不知道消息会推送给哪些订阅者，Event作为一个类似“中介者”的角色，把订阅者和发布者联系起来。

var Event=(function(){
    var clientList={},
    listen,
    trigger,
    remove;
    listen=function(key,fn){
        if(!clientList[key]){
            clientList[key]=[];
        }
        clientList[key].push(fn);
    };
    trigger=function(){
        var key=Array.prototype.shift.call(arguments),
        fns=clientList[key];
        if(!fns||fns.length===0){
            return false;
        }
        for(var i=0,fn;fn=fns[i++];){
            fn.apply(this,arguments);
        }
    };
    remove=function(key,fn){
        var fns=clientList[key];
        if(!fns){
            return false;
        }
        if(!fn){
            fns&&(fns.length=0);
        } else {
            for(var l=fns.length-1;l>=0;l--){
                var _fn=fns[l];
                if(_fn===fn){
                    fns.splice(l,1);
                }
            }
        }
    };
    return {
        listen:listen,
        trigger:trigger,
        remove:remove
    }
})();
Event.listen('squareMeter88',function(price){
    console.log(price);
});
Event.trigger('squareMeter88',2000000)