发布-订阅模式

2017-01-10  本文已影响23人  Tiny_z

发布-订阅模式又叫观察者模式,它定义对象间的一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。

例子一 售楼和买房的情况

  var salesOffices = {};//定义售楼处

    salesOffices.clientList = {};//缓存列表,存放订阅者的回调函数

    salesOffices.listen = function(key,fn){
        if(!this.clientList[key]){//如果还没有订阅过此类消息,给该类消息创建一个缓存列表
            this.clientList[key] = [];
        }
        this.clientList[key].push(fn);//订阅的消息添加进消息缓存列表
    };

    salesOffices.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);
        }

    };

    salesOffices.listen('squareMeter88',function(price){
        console.log('价格= ' + price);
    });
    salesOffices.listen('squareMeter100',function(price){
        console.log('价格= ' + price);
    });

    salesOffices.trigger('squareMeter88',2000000);
    salesOffices.trigger('squareMeter100',4000000);
    salesOffices.trigger('squareMeter100',8000000);

如果现在有多个售楼处都需要这个功能,我们可以把发布-订阅功能提取出来,每次要添加售楼处的时候,把里面的方法和属性都复制到新的售楼处里面就行了

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);
            }
        }
    };

    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',1000); 
上一篇 下一篇

猜你喜欢

热点阅读