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

最新推荐文章于 2025-08-12 14:37:12 发布

转载最新推荐文章于 2025-08-12 14:37:12 发布 · 77 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/GongQi/p/4652770.html

文章标签：

#javascript #设计模式 #ViewUI

本文详细介绍了观察者模式的定义及其在JavaScript中的实现方式，通过实例展示了如何利用事件模型替代传统观察者模式，并提供了通用实现方法。文章以客户看房为例，深入浅出地讲解了发布者与订阅者之间的交互过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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