《JavaScript设计模式与开发实践》读书笔记之观察者模式

1.观察者模式

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

JavaScript中通常采用事件模型替代传统的观察者模式

1.1 逐步实现观察者模式

以客户看房为例

首先指定谁充当发布者，如售楼处

然后给发布者添加一个缓存列表，用于存放回调函数以便通知订阅者。这里为了让订阅者只接收自己感兴趣的消息，增加一个标识key

最后发布消息时候，发布者遍历缓存列表，依次触发里面存放的订阅者的回调函数

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){//A订阅88平房子消息

    console.log('价格='+price);

});



salesOffices.listen('squareMeter100',function(price)){//B订阅100平房子消息

    console.log('价格='+price);

}



salesOffices.trigger('squareMeter88',200000);

salesOffices.trigger('squareMeter100',300000);

1.2 观察者模式通用实现

var Event=(function(){

    var clientList={},

        listen,

        trigger,

        remove;

    listen=function(key,fn){

        f(!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);

        }

    };

    remove=function(key,fn){

        var fns=clientList[key];

        if(!fns){

            return false;

        }

        if(!fn){

            fns&&(fns.length=0);//没指定fn时，删除全部

        }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){//A订阅88平房子消息

    console.log('价格='+price);

});



Event.trigger('squareMeter88',200000);