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 相关文章推荐
一步一步制作jquery插件Tabs实现过程
Jul 06 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
Jan 12 Javascript
JavaScript中:表达式和语句的区别[译]
Sep 17 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
Aug 27 Javascript
JS中使用sort结合localeCompare实现中文排序实例
Jul 23 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
Jan 28 Javascript
javascript性能优化之事件委托实例详解
Dec 12 Javascript
JavaScript原型及原型链终极详解
Jan 04 Javascript
Bootstrap 模态框(Modal)带参数传值实例
Aug 20 Javascript
浅谈vue方法内的方法使用this的问题
Sep 15 Javascript
Windows下Node爬虫神器Puppeteer安装记
Jan 09 Javascript
JavaScript实现猜数字游戏
May 20 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
php while循环得到循环次数
2013/10/26 PHP
详细解读PHP的Yii框架中登陆功能的实现
2015/08/21 PHP
微信支付PHP SDK之微信公众号支付代码详解
2015/12/09 PHP
基于ThinkPHP实现的日历功能实例详解
2017/04/15 PHP
解决Yii2邮件发送结果返回成功,但接收不到邮件的问题
2017/05/23 PHP
使用PHPExcel导出Excel表
2018/09/08 PHP
PHP7 整型处理机制修改
2021/03/09 PHP
Mootools 1.2教程(2) DOM选择器
2009/09/14 Javascript
js修改原型的属性使用介绍
2014/01/26 Javascript
浅谈JavaScript字符串与数组
2015/06/03 Javascript
详解JavaScript ES6中的模板字符串
2015/07/28 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
2015/09/21 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
JavaScript表单验证开发
2016/11/23 Javascript
原生js编写基于面向对象的分页组件
2016/12/05 Javascript
详解Node.js 命令行程序开发教程
2017/06/07 Javascript
使用react-router4.0实现重定向和404功能的方法
2017/08/28 Javascript
快速解决element的autofocus失效问题
2020/09/08 Javascript
OpenLayers3实现鼠标移动显示坐标
2020/09/25 Javascript
微信小程序实现页面监听自定义组件的触发事件
2020/11/01 Javascript
python操作列表的函数使用代码详解
2017/12/28 Python
手把手教你使用Python创建微信机器人
2019/04/29 Python
浅析Python 中几种字符串格式化方法及其比较
2019/07/02 Python
python批量图片处理简单示例
2019/08/06 Python
用Python解数独的方法示例
2019/10/24 Python
python__new__内置静态方法使用解析
2020/01/07 Python
Ancheer官方户外和运动商店:销售电动自行车
2019/08/07 全球购物
上海雨人软件技术开发有限公司测试题
2015/07/14 面试题
英语硕士生求职简历的自我评价
2013/10/15 职场文书
2014年教师培训的自我评价
2014/01/03 职场文书
小学生操行评语大全
2014/04/22 职场文书
售房委托书
2014/08/30 职场文书
个人整改措施书面材料
2014/10/24 职场文书
2014年酒店工作总结范文
2014/11/17 职场文书
教师廉政准则心得体会
2016/01/20 职场文书
TaiShan 200服务器安装Ubuntu 18.04的图文教程
2022/06/28 Servers