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 核心函数以及jQuery对象
Mar 23 Javascript
js弹出窗口之弹出层的小例子
Jun 17 Javascript
百度判断手机终端并自动跳转js代码及使用实例
Jun 11 Javascript
jquery+json实现数据二级联动的方法
Nov 28 Javascript
AngularJs表单验证实例详解
May 30 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
Jun 15 Javascript
原生js实现下拉框功能(支持键盘事件)
Jan 13 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
Dec 26 Javascript
详解vue的diff算法原理
May 20 Javascript
JS实现获取进今年第几天是周几的方法分析
Jun 27 Javascript
vue用BMap百度地图实现即时搜索功能
Sep 26 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
Oct 29 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记录用户通过搜索引擎进网站的关键词
2014/02/13 PHP
PHP网站建设的流程与步骤分享
2015/09/25 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
javascript实现轮显新闻标题链接
2007/08/13 Javascript
用js实现计算加载页面所用的时间
2010/04/02 Javascript
juqery 学习之六 CSS--css、位置、宽高
2011/02/11 Javascript
javascript跑马灯悬停放大效果实现代码
2012/12/12 Javascript
JS小游戏之象棋暗棋源码详解
2014/09/25 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
2015/12/20 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
2016/10/30 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
2017/04/01 Javascript
ES6新特性一: let和const命令详解
2017/04/20 Javascript
angular4中关于表单的校验示例
2017/10/16 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
2017/11/22 Javascript
vue双向数据绑定知识点总结
2018/04/18 Javascript
基于React+Redux的SSR实现方法
2018/07/03 Javascript
vue.js中proxyTable 转发请求的实现方法
2018/09/20 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
2019/05/14 Javascript
JavaScript中window和document用法详解
2020/07/28 Javascript
js实现盒子拖拽动画效果
2020/08/09 Javascript
Python编写电话薄实现增删改查功能
2016/05/07 Python
python实现电脑自动关机
2018/06/20 Python
Python 查看list中是否含有某元素的方法
2018/06/27 Python
Python实现KNN(K-近邻)算法的示例代码
2019/03/05 Python
python3.7通过thrift操作hbase的示例代码
2020/01/14 Python
HTML5实现预览本地图片
2016/02/17 HTML / CSS
详解如何获取localStorage最大存储大小的方法
2020/05/21 HTML / CSS
露营世界:Camping World
2017/02/02 全球购物
Solaris操作系统的线程机制
2012/12/23 面试题
消防器材管理制度
2014/01/28 职场文书
党的群众路线教育学习材料
2014/05/12 职场文书
2014年社区计生工作总结
2014/11/18 职场文书
什么是动态刷新率DRR? Windows11动态刷新率功能介绍
2021/11/21 数码科技
PHP正则表达式之RCEService回溯
2022/04/11 PHP
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS