JavaScript中发布/订阅模式的简单实例


Posted in Javascript onNovember 05, 2014

上次研究观察者模式,很多文章说它也叫Subscribe/Publish(发布/订阅模式)。可在《Javascript设计模式》一书中,这两种模式还是有些区别的。书中原话如下:

1.Observer模式要求希望接收到主题通知者的观察者必须订阅内容改变的事件。

2.Subscribe/Publish模式使用了一个主题/事件通道,这个通道介于订阅者和发布者之间。该事件系统允许代码定义应用程序的特定事件,该事件可以传递自定义参数,自定义参数包含订阅者所需要的值。其目的是避免订阅者和发布者产生依赖关系。

与Observer模式不同之处在于它允许任何订阅者执行适当的事件处理程序来注册和接收发布者发出的通知。

好吧,不明觉厉。下面是我的理解:

1.观察者模式中,目标对象负责维护观察者。发布/订阅模式中发布者不关心订阅者,只负责把消息丢出去就不管了。

2.观察者模式中,观察者要提供一个接口,然后当目标对象发生改变时调用此接口使自身状态和目标状态保持一致。即所有的观察者都要有一个统一的接口(比如上文中写的update方法,大家的方法都要叫这个名字)。而发布/订阅模式中,订阅者事件的触发不是依靠这样一个接口,而是订阅者通过监听一个特定的消息(这个消息一般包含名称和订阅者所需要的参数)来触发的。可以理解为订阅者监听的不是发布者,而是消息池,只要消息池里有它关心的消息,即触发事件,不管这个消息是谁发布过去的。发布者和订阅者是解耦的。

下面是js中发布/订阅模式的实现,复制粘贴到console里面试一试就明白了:

var pubsub = (function(){

    var q = {}

        topics = {},

        subUid = -1;

    //发布消息

    q.publish = function(topic, args) {

        if(!topics[topic]) {return;}

        var subs = topics[topic],

            len = subs.length;

        while(len--) {

            subs[len].func(topic, args);

        }

        return this;

    };

    //订阅事件

    q.subscribe = function(topic, func) {

        topics[topic] = topics[topic] ? topics[topic] : [];

        var token = (++subUid).toString();

        topics[topic].push({

            token : token,

            func : func

        });

        return token;

    };

    return q;

    //取消订阅就不写了,遍历topics,然后通过保存前面返回token,删除指定元素

})();

//触发的事件

var logmsg = function(topics, data) {

    console.log("logging:" + topics + ":" + data);

}

//监听指定的消息'msgName'

var sub = pubsub.subscribe('msgName', logmsg);

//发布消息'msgName'

pubsub.publish('msgName', 'hello world');

//发布无人监听的消息'msgName1'

pubsub.publish('anotherMsgName', 'me too!');
Javascript 相关文章推荐
比较简单实用的使用正则三种版本的js去空格处理方法
Nov 18 Javascript
浅谈EasyUI中编辑treegrid的方法
Mar 01 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
Jun 04 Javascript
Web前端开发工具——bower依赖包管理工具
Mar 29 Javascript
d3.js中冷门却实用的内置函数总结
Feb 04 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
微信小程序表单验证功能完整实例
Dec 01 Javascript
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
vue项目中使用vue-i18n报错的解决方法
Jan 13 Javascript
JavaScript 空间坐标的使用
Aug 19 Javascript
js实现简单的倒计时
Jan 28 Javascript
低门槛开发iOS、Android、小程序应用的前端框架详解
Oct 16 Javascript
JavaScript不刷新实现浏览器的前进后退功能
Nov 05 #Javascript
Javascript检查图片大小不要让大图片撑破页面
Nov 04 #Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
Nov 04 #Javascript
node.js中Socket.IO的进阶使用技巧
Nov 04 #Javascript
node.js中的Socket.IO使用实例
Nov 04 #Javascript
Node.js的特点和应用场景介绍
Nov 04 #Javascript
Node.js中的模块机制学习笔记
Nov 04 #Javascript
You might like
全国FM电台频率大全 - 19 广东省
2020/03/11 无线电
PHP无限分类代码,支持数组格式化、直接输出菜单两种方式
2011/05/18 PHP
使用pthreads实现真正的PHP多线程(需PHP5.3以上版本)
2014/05/05 PHP
教你如何开启shopnc b2b2c 伪静态
2014/10/21 PHP
Linux系统中设置多版本PHP共存配合Nginx服务器使用
2015/12/21 PHP
PHP利用正则表达式将相对路径转成绝对路径的方法示例
2017/02/28 PHP
基于JQuery的日期联动实现代码
2011/02/24 Javascript
jquery放大镜效果超漂亮噢
2013/11/15 Javascript
JS实现网页滚动条感应鼠标变色的方法
2015/02/26 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
2016/01/22 Javascript
javascript html5实现表单验证
2016/03/01 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
2016/06/10 Javascript
javascript入门之数组[新手必看]
2016/11/21 Javascript
微信公众号 摇一摇周边功能开发
2016/12/08 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
2017/05/31 Javascript
Vue之Watcher源码解析(1)
2017/07/19 Javascript
解决Webpack 热部署检测不到文件变化的问题
2018/02/22 Javascript
vue.js做一个简单的编辑菜谱功能
2018/05/08 Javascript
mac上配置Android环境变量的方法
2018/07/08 Javascript
微信小程序url传参写变量的方法
2018/08/09 Javascript
Next.js项目实战踩坑指南(笔记)
2018/11/29 Javascript
JavaScript常见事件对象与操作实例总结
2019/01/05 Javascript
原来JS还可以这样拆箱转换详解
2019/02/01 Javascript
vue过滤器实现日期格式化的案例分析
2020/07/02 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
2020/07/31 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
python中self原理实例分析
2015/04/30 Python
Python的Flask框架的简介和安装方法
2015/11/13 Python
Python模糊查询本地文件夹去除文件后缀的实例(7行代码)
2017/11/09 Python
django解决跨域请求的问题详解
2019/01/20 Python
浅谈Python中的继承
2020/06/19 Python
IMPORT的选项IGNORE有什么作用?缺省是什么设置?
2015/09/17 面试题
幼师求职自荐信
2014/05/31 职场文书
观看《信仰》心得体会
2016/01/15 职场文书
2016年社区国庆节活动总结
2016/04/01 职场文书