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


Posted in Javascript onMarch 03, 2015

介绍

观察者模式又叫发布订阅模式(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");

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

总结

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

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

Javascript 相关文章推荐
Jquery封装tab自动切换效果的具体实现
Jul 13 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
Dec 13 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
Jun 05 Javascript
jQuery晃动层特效实现方法
Mar 09 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
May 14 Javascript
jquery中ready()函数执行的时机和window的load事件比较
Jun 22 Javascript
JavaScript获取客户端IP的方法(新方法)
Mar 11 Javascript
jQuery基于json与cookie实现购物车的方法
Apr 15 Javascript
JS iFrame加载慢怎么解决
May 13 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
May 17 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
Jul 19 Javascript
vue实现打地鼠小游戏
Aug 21 Javascript
Node.js 学习笔记之简介、安装及配置
Mar 03 #Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
Mar 03 #Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
Mar 03 #Javascript
JS实现鼠标点击展开或隐藏表格行的方法
Mar 03 #Javascript
浅谈JavaScript数据类型
Mar 03 #Javascript
JavaScript中property和attribute的区别详细介绍
Mar 03 #Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
Mar 02 #Javascript
You might like
谏山创故乡大分县日田市水坝将设立《进击的巨人》立艾伦、三笠以及阿尔敏的铜像!
2020/03/06 日漫
PHP新手上路(五)
2006/10/09 PHP
php中session使用示例
2014/03/29 PHP
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
2011/02/14 Javascript
jQuery中$.fn的用法示例介绍
2013/11/05 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
2014/04/23 Javascript
php读取sqlite数据库入门实例代码
2014/06/25 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
2015/03/23 Javascript
jqueryMobile使用示例分享
2016/01/12 Javascript
JavaScript中数组的22种方法必学(推荐)
2016/07/20 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
2016/08/28 Javascript
微信小程序 加载 app-service.js 错误解决方法
2016/10/12 Javascript
jquery横向纵向鼠标滚轮全屏切换
2017/02/27 Javascript
Bootstrap禁用响应式布局的实现方法
2017/03/09 Javascript
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
bootstrap下拉框动态赋值方法
2018/08/10 Javascript
微信小程序swiper禁止用户手动滑动代码实例
2019/08/23 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
2019/09/14 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
2020/11/12 Javascript
使用python调用zxing库生成二维码图片详解
2017/01/10 Python
python实现图片处理和特征提取详解
2017/11/13 Python
TensorFlow saver指定变量的存取
2018/03/10 Python
Python判断以什么结尾以什么开头的实例
2018/10/27 Python
python3+opencv3识别图片中的物体并截取的方法
2018/12/05 Python
用python一行代码得到数组中某个元素的个数方法
2019/01/28 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
python isinstance函数用法详解
2020/02/13 Python
PyCharm 2020.2.2 x64 下载并安装的详细教程
2020/10/15 Python
ebookers英国:隶属全球最大的在线旅游公司Expedia
2017/12/28 全球购物
在加拿大在线租赁和购买电子游戏:Game Access
2019/09/02 全球购物
专升本个人自我评价
2013/12/22 职场文书
高校教师岗位职责
2014/03/18 职场文书
乡镇交通安全实施方案
2014/03/29 职场文书
未婚证明范本
2015/06/15 职场文书
PHP获取学生成绩的方法
2021/11/17 PHP