Javascript设计模式之观察者模式的多个实现版本实例

介绍

观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己。

使用观察者模式的好处:

1.支持简单的广播通信,自动通知所有已经订阅过的对象。
2.页面载入后目标对象很容易与观察者存在一种动态关联,增加了灵活性。
3.目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用。

正文(版本一)

JS里对观察者模式的实现是通过回调来实现的,我们来先定义一个pubsub对象,其内部包含了3个方法:订阅、退订、发布。

代码如下:

var pubsub = {};
(function (q) {
 
    var topics = {}, // 回调函数存放的数组
        subUid = -1;
    // 发布方法
    q.publish = function (topic, args) {
 
        if (!topics[topic]) {
            return false;
        }
 
        setTimeout(function () {
            var subscribers = topics[topic],
                len = subscribers ? subscribers.length : 0;
 
            while (len--) {
                subscribers[len].func(topic, args);
            }
        }, 0);
 
        return true;
 
    };
    //订阅方法
    q.subscribe = function (topic, func) {
 
        if (!topics[topic]) {
            topics[topic] = [];
        }
 
        var token = (++subUid).toString();
        topics[topic].push({
            token: token,
            func: func
        });
        return token;
    };
    //退订方法
    q.unsubscribe = function (token) {
        for (var m in topics) {
            if (topics[m]) {
                for (var i = 0, j = topics[m].length; i < j; i++) {
                    if (topics[m][i].token === token) {
                        topics[m].splice(i, 1);
                        return token;
                    }
                }
            }
        }
        return false;
    };
} (pubsub));

使用方式如下:

代码如下:

//来,订阅一个
pubsub.subscribe('example1', function (topics, data) {
    console.log(topics + ": " + data);
});
 
//发布通知
pubsub.publish('example1', 'hello world!');
pubsub.publish('example1', ['test', 'a', 'b', 'c']);
pubsub.publish('example1', [{ 'color': 'blue' }, { 'text': 'hello'}]);

怎么样?用起来是不是很爽?但是这种方式有个问题,就是没办法退订订阅,要退订的话必须指定退订的名称,所以我们再来一个版本:

代码如下:

//将订阅赋值给一个变量,以便退订
var testSubscription = pubsub.subscribe('example1', function (topics, data) {
    console.log(topics + ": " + data);
});
 
//发布通知
pubsub.publish('example1', 'hello world!');
pubsub.publish('example1', ['test', 'a', 'b', 'c']);
pubsub.publish('example1', [{ 'color': 'blue' }, { 'text': 'hello'}]);
 
//退订
setTimeout(function () {
    pubsub.unsubscribe(testSubscription);
}, 0);
 
//再发布一次,验证一下是否还能够输出信息
pubsub.publish('example1', 'hello again! (this will fail)');

版本二

我们也可以利用原型的特性实现一个观察者模式,代码如下:

代码如下:

function Observer() {
    this.fns = [];
}
Observer.prototype = {
    subscribe: function (fn) {
        this.fns.push(fn);
    },
    unsubscribe: function (fn) {
        this.fns = this.fns.filter(
                        function (el) {
                            if (el !== fn) {
                                return el;
                            }
                        }
                    );
    },
    update: function (o, thisObj) {
        var scope = thisObj || window;
        this.fns.forEach(
                        function (el) {
                            el.call(scope, o);
                        }
                    );
    }
};
 
//测试
var o = new Observer;
var f1 = function (data) {
    console.log('Robbin: ' + data + ', 赶紧干活了!');
};
 
var f2 = function (data) {
    console.log('Randall: ' + data + ', 找他加点工资去!');
};
 
o.subscribe(f1);
o.subscribe(f2);
 
o.update("Tom回来了!")
 
//退订f1
o.unsubscribe(f1);
//再来验证
o.update("Tom回来了!");

如果提示找不到filter或者forEach函数,可能是因为你的浏览器还不够新,暂时不支持新标准的函数,你可以使用如下方式自己定义:

代码如下:

if (!Array.prototype.forEach) {
    Array.prototype.forEach = function (fn, thisObj) {
        var scope = thisObj || window;
        for (var i = 0, j = this.length; i < j; ++i) {
            fn.call(scope, this[i], i, this);
        }
    };
}
if (!Array.prototype.filter) {
    Array.prototype.filter = function (fn, thisObj) {
        var scope = thisObj || window;
        var a = [];
        for (var i = 0, j = this.length; i < j; ++i) {
            if (!fn.call(scope, this[i], i, this)) {
                continue;
            }
            a.push(this[i]);
        }
        return a;
    };
}

版本三

如果想让多个对象都具有观察者发布订阅的功能,我们可以定义一个通用的函数,然后将该函数的功能应用到需要观察者功能的对象上,代码如下:

代码如下:

//通用代码
var observer = {
    //订阅
    addSubscriber: function (callback) {
        this.subscribers[this.subscribers.length] = callback;
    },
    //退订
    removeSubscriber: function (callback) {
        for (var i = 0; i < this.subscribers.length; i++) {
            if (this.subscribers[i] === callback) {
                delete (this.subscribers[i]);
            }
        }
    },
    //发布
    publish: function (what) {
        for (var i = 0; i < this.subscribers.length; i++) {
            if (typeof this.subscribers[i] === 'function') {
                this.subscribers[i](what);
            }
        }
    },
    // 将对象o具有观察者功能
    make: function (o) {
        for (var i in this) {
            o[i] = this[i];
            o.subscribers = [];
        }
    }
};

然后订阅2个对象blogger和user,使用observer.make方法将这2个对象具有观察者功能,代码如下:

代码如下:

var blogger = {
    recommend: function (id) {
        var msg = 'dudu 推荐了的帖子:' + id;
        this.publish(msg);
    }
};
 
var user = {
    vote: function (id) {
        var msg = '有人投票了!ID=' + id;
        this.publish(msg);
    }
};
 
observer.make(blogger);
observer.make(user);

使用方法就比较简单了,订阅不同的回调函数,以便可以注册到不同的观察者对象里(也可以同时注册到多个观察者对象里):

代码如下:

var tom = {
    read: function (what) {
        console.log('Tom看到了如下信息:' + what)
    }
};
 
var mm = {
    show: function (what) {
        console.log('mm看到了如下信息:' + what)
    }
};
// 订阅
blogger.addSubscriber(tom.read);
blogger.addSubscriber(mm.show);
blogger.recommend(123); //调用发布
 
//退订
blogger.removeSubscriber(mm.show);
blogger.recommend(456); //调用发布
 
//另外一个对象的订阅
user.addSubscriber(mm.show);
user.vote(789); //调用发布

jQuery版本

根据jQuery1.7版新增的on/off功能,我们也可以定义jQuery版的观察者:

代码如下:

(function ($) {
 
    var o = $({});
 
    $.subscribe = function () {
        o.on.apply(o, arguments);
    };
 
    $.unsubscribe = function () {
        o.off.apply(o, arguments);
    };
 
    $.publish = function () {
        o.trigger.apply(o, arguments);
    };
 
} (jQuery));

调用方法比上面3个版本都简单:

代码如下:

//回调函数
function handle(e, a, b, c) {
    // `e`是事件对象,不需要关注
    console.log(a + b + c);
};
 
//订阅
$.subscribe("/some/topic", handle);
//发布
$.publish("/some/topic", ["a", "b", "c"]); // 输出abc
       
 
$.unsubscribe("/some/topic", handle); // 退订
 
//订阅
$.subscribe("/some/topic", function (e, a, b, c) {
    console.log(a + b + c);
});
 
$.publish("/some/topic", ["a", "b", "c"]); // 输出abc
 
//退订(退订使用的是/some/topic名称,而不是回调函数哦,和版本一的例子不一样
$.unsubscribe("/some/topic");

可以看到,他的订阅和退订使用的是字符串名称,而不是回调函数名称,所以即便传入的是匿名函数,我们也是可以退订的。

总结

观察者的使用场合就是:当一个对象的改变需要同时改变其它对象,并且它不知道具体有多少对象需要改变的时候,就应该考虑使用观察者模式。

总的来说,观察者模式所做的工作就是在解耦,让耦合的双方都依赖于抽象,而不是依赖于具体。从而使得各自的变化都不会影响到另一边的变化。

(0)

相关推荐

  • JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解

    本文实例讲述了JavaScript编程设计模式之观察者模式.分享给大家供大家参考,具体如下: 简介 简单的解释观察者模式,就是一个对象(subject)维护一个依赖他的对象(observers)列表,当自身状态发生变化时,自动通知所有观察者对象.当某个对象不需要获得通知时,可以从对象列表中删除掉. 从上面的解释中我们可以提炼出三个componet: Subject, ObserverList和Observer,用JS实现很简单: function ObserverList(){ this.obs

  • 深入理解Javascript中的观察者模式

    简介 观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己.讲道理,如果我们写的不是稍微底层的代码,可能不会用到它. 但是有了它会让代码更灵活,更加规整,减少冗余代码,方便分模块,分功能开发. 使用观察者模式的好处: 支持简单的广播通信,自动通知所有已经订阅过的对象. 页面载入后目标对象很容易与观察者存在一种动态关联,增加了灵活性. 目标对

  • JavaScript观察者模式(publish/subscribe)原理与实现方法

    本文实例讲述了JavaScript观察者模式(publish/subscribe)原理与实现方法.分享给大家供大家参考,具体如下: 观察者模式又叫做发布订阅模式,它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生改变时就会通知所有观察着对象.它是由两类对象组成,主题和观察者,主题负责发布事件,同时观察者通过订阅这些事件来观察该主体,发布者和订阅者是完全解耦的,彼此不知道对方的存在,两者仅仅共享一个自定义事件的名称. 在Nodejs中通过EventEmitte

  • JavaScript观察者模式(经典)

    Observer模式也叫观察者模式,是由GoF提出的23种软件设计模式的一种.Observer模式是行为模式之一,它的作用是当一个对象的状态发生变化时,能够自动通知其他关联对象,自动刷新对象状态. Observer模式的概念 Observer模式是行为模式之一,它的作用是当一个对象的状态发生变化时,能够自动通知其他关联对象,自动刷新对象状态. Observer模式提供给关联对象一种同步通信的手段,使某个对象与依赖它的其他对象之间保持状态同步. Observer模式的角色: Subject(被观察

  • 学习JavaScript设计模式之观察者模式

    一.定义 观察者模式(发布-订阅模式):其定义对象间一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知. 在JavaScript中,一般使用事件模型来替代传统的观察者模式. 好处: (1)可广泛应用于异步编程中,是一种替代传递回调函数的方案. (2)可取代对象之间硬编码的通知机制,一个对象不用再显示地调用另外一个对象的某个接口.两对象轻松解耦. 二.DOM事件–观察者模式典例 需要监控用户点击document.body的动作,但是我们没有办法预知用户将在什么时间点击

  • Javascript 模式实例 观察者模式

    在园里有许多牛人都已经写过这些文章,不过大多的例子都是.NET,今天我要举一个JS的使用实例.有兴趣的朋友可以先了解一下一些牛人的,比如李会军大哥设计模式篇中观察者的那一节 http://www.cnblogs.com/Terrylee/archive/2006/10/23/Observer_Pattern.html说说我自己对这模式的理解,其思想核心是:每个被观察对象都依据对象数据的改变而改变,被观察对象一定要有同样的改变行为来约束,这个约束是被观察对象提供给观察器的统一接口.观察器会开发改变

  • JavaScript设计模式之观察者模式(发布者-订阅者模式)

    观察者模式( 又叫发布者-订阅者模式 )应该是最常用的模式之一. 在很多语言里都得到大量应用. 包括我们平时接触的dom事件. 也是js和dom之间实现的一种观察者模式. 复制代码 代码如下: div.onclick  =  function click (){ alert ( "click' ) } 只要订阅了div的click事件. 当点击div的时候, function click就会被触发. 那么到底什么是观察者模式呢. 先看看生活中的观察者模式. 好莱坞有句名言. "不要给我

  • javascript观察者模式实现自动刷新效果

    本文实例为大家分享了js观察者模式实现自动刷新的具体代码,供大家参考,具体内容如下 // author wangbinandi@gmail.com const observable = obj => { const observers = Symbol(); const set = function(target, key, value) { const result = Reflect.set(target, key, value); //console.log("set key:&qu

  • NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】

    本文实例讲述了NodeJS设计模式.分享给大家供大家参考,具体如下: 1 . 单例模式 顾名思义,单例就是保证一个类只有一个实例,实现的方法是,先判断实例是否存在,如果存在则直接返回,若不存在,则创建实例对象,并将实例对象保存在静态变量中,当下次请求时,则可以直接返回这个对象实例,这就确保了一个类只有一个实例对象.举个例子吧~一间学校刚刚起建还没有图书馆,有的同学就向领导提意见:"hey! 哥们,能不能帮我们建一个图书馆? "(想要一个图书馆实例),然后领导说:"no pro

  • Javascript设计模式之观察者模式(推荐)

    推荐阅读: JavaScript观察者模式(经典) 1.什么是观察者模式 观察者模式有时也称为发布--订阅模式,在观察者模式中,有一个观察者可以管理所有的目标,等到有状态发生改变的时候发出通知.(其实sql server中的发布订阅也是这个道理) 2.通俗解释 假如以前村里的广播是一个观察者,那么每个村民就是被观察对象,如果村子里有通知,政策发生改变的时候,就需要通过广播把这个消息发布出去,而不用直接一家家的跑去发通知. 3.代码 <!DOCTYPE html> <html lang=&

随机推荐