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 相关文章推荐
Javascript实现真实字符串剩余字数提示的实例代码
Oct 22 Javascript
对Jquery中的ajax再封装,简化操作示例
Feb 12 Javascript
javascript中callee与caller的区别分析
Apr 20 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
Oct 30 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
Jan 19 Javascript
关于使用axios的一些心得技巧分享
Jul 02 Javascript
angular6的响应式表单的实现
Oct 10 Javascript
vue 集成jTopo 处理方法
Aug 07 Javascript
微信小程序点击保存图片到本机功能
Dec 13 Javascript
JavaScript canvas实现雪花随机动态飘落
Feb 08 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
Nov 16 Javascript
Vue vee-validate插件的简单使用
Jun 22 Vue.js
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在项目中寻找代码的坏味道(综艺命名)
2012/07/19 PHP
PHP 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
Laravel实现搜索的时候分页并携带参数
2019/10/15 PHP
彻底搞懂JS无缝滚动代码
2007/01/03 Javascript
jquery keypress,keyup,onpropertychange键盘事件
2010/06/25 Javascript
JavaScript 放大镜 移动镜片效果代码
2011/05/09 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
2013/11/13 Javascript
js 去除字符串第一位逗号的方法
2014/06/07 Javascript
javascript动画系列之模拟滚动条
2016/12/13 Javascript
Javascript的this用法
2017/01/16 Javascript
vue-cli如何引入bootstrap工具的方法
2017/10/19 Javascript
javascript+jQuery实现360开机时间显示效果
2017/11/03 jQuery
antd Upload 文件上传的示例代码
2018/12/14 Javascript
nodejs使用async模块同步执行的方法
2019/03/02 NodeJs
JS实现烟花爆炸效果
2020/03/10 Javascript
用实例说明python的*args和**kwargs用法
2013/11/01 Python
Python随机数random模块使用指南
2016/09/09 Python
python django 增删改查操作 数据库Mysql
2017/07/27 Python
python爬虫获取百度首页内容教学
2018/12/23 Python
libreoffice python 操作word及excel文档的方法
2019/07/04 Python
python对绑定事件的鼠标、按键的判断实例
2019/07/17 Python
pandas的to_datetime时间转换使用及学习心得
2019/08/11 Python
python实现两个一维列表合并成一个二维列表
2019/12/02 Python
Python2.7:使用Pyhook模块监听鼠标键盘事件-获取坐标实例
2020/03/14 Python
Python使用for生成列表实现过程解析
2020/09/22 Python
Python3利用openpyxl读写Excel文件的方法实例
2021/02/03 Python
Linux如何压缩可执行文件
2014/03/27 面试题
市场营销工作计划书
2014/09/15 职场文书
2014年光棍节活动策划方案(创意集锦)
2014/09/29 职场文书
一年级语文下册复习计划
2015/01/17 职场文书
会计出纳岗位职责
2015/03/31 职场文书
宪法宣传标语100条
2019/10/15 职场文书
Python的三个重要函数详解
2022/01/18 Python
国产动画《万圣街》日语配音版制作决定!
2022/03/20 国漫
详解Python中__new__方法的作用
2022/03/31 Python