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对象
Sep 19 Javascript
javascript 构造函数强制调用经验总结
Dec 02 Javascript
jQuery实现id模糊查询的小例子
Mar 19 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
May 27 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
Sep 06 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
Dec 18 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
May 11 Javascript
详解AngularJS Filter(过滤器)用法
Dec 28 Javascript
Bootstrap实现下拉菜单效果
Apr 29 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
Oct 31 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
Jan 22 Javascript
js获取本日、本周、本月的时间代码
Feb 01 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中导出数据到excel时数字变为科学计数的解决方法
2013/02/03 PHP
php递归使用示例(php递归函数)
2014/02/14 PHP
php解析xml方法实例详解
2015/05/12 PHP
php微信开发之关注事件
2018/06/14 PHP
Thinkphp 框架扩展之Widget扩展实现方法分析
2020/04/23 PHP
JavaScript中的其他对象
2008/01/16 Javascript
IE8 中使用加速器(Activities)
2010/05/14 Javascript
20个最新的jQuery插件
2012/01/13 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
2014/01/03 Javascript
使用jQuery将多条数据插入模态框的实现代码
2014/10/08 Javascript
Jquery数字上下滚动动态切换插件
2015/08/08 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
2016/05/25 Javascript
任意Json转成无序列表的方法示例
2016/12/09 Javascript
解决vue select当前value没有更新到vue对象属性的问题
2018/08/30 Javascript
微信小程序开发实现消息推送
2020/11/18 Javascript
JS实现拼图游戏
2021/01/29 Javascript
微信小程序多列表渲染数据开关互不影响的实现
2020/06/05 Javascript
swiper自定义分页器的样式
2020/09/14 Javascript
OpenLayers3实现鼠标移动显示坐标
2020/09/25 Javascript
[02:47]2018年度DOTA2最佳辅助位选手4号位-完美盛典
2018/12/17 DOTA
python 解压pkl文件的方法
2018/10/25 Python
pycharm中导入模块错误时提示Try to run this command from the system terminal
2020/03/26 Python
ipython jupyter notebook中显示图像和数学公式实例
2020/04/15 Python
pandas之分组groupby()的使用整理与总结
2020/06/18 Python
浅谈pc和移动端的响应式的使用
2019/01/03 HTML / CSS
意大利香水和化妆品购物网站:Parfimo.it
2019/10/06 全球购物
入党申请书自我鉴定
2013/10/12 职场文书
大学生毕业自我鉴定范文
2013/11/03 职场文书
厨师岗位职责
2013/11/12 职场文书
高中班长自我鉴定
2013/12/20 职场文书
司机工作自我鉴定
2014/09/19 职场文书
实习科室评语
2015/01/04 职场文书
抢劫罪辩护词
2015/05/21 职场文书
宾馆客房管理制度
2015/08/06 职场文书
SpringBoot集成Druid连接池连接MySQL8.0.11
2021/07/02 Java/Android
Java8中接口的新特性使用指南
2021/11/01 Java/Android