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如何实现锚点链接之间的平滑滚动
Dec 02 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
Apr 10 Javascript
$(document).ready(function() {})不执行初始化脚本
Jun 19 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
Mar 29 Javascript
jQuery基于Ajax方式提交表单功能示例
Feb 10 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
Feb 15 Javascript
Vue中的scoped实现原理及穿透方法
May 15 Javascript
vue 登录滑动验证实现代码
Aug 24 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
Dec 03 Javascript
原生javascript实现连连看游戏
Jan 03 Javascript
详解JavaScript中的强制类型转换
Apr 15 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
Jul 05 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
克隆一个新项目的快捷方式
2013/04/10 PHP
PHP文件操作之获取目录下文件与计算相对路径的方法
2016/01/08 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
extjs 列表框(multiselect)的动态添加列表项的方法
2009/07/31 Javascript
jQuery第三课 修改元素属性及内容的代码
2010/03/14 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
2016/09/18 Javascript
微信小程序 前端源码逻辑和工作流详解
2016/10/08 Javascript
Angular2从搭建环境到开发步骤详解
2016/10/17 Javascript
值得分享和收藏的xmlplus组件学习教程
2017/05/05 Javascript
详解webpack+angular2开发环境搭建
2017/06/28 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
2018/01/04 Javascript
layui select动态添加option的实例
2018/03/07 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
2019/10/28 jQuery
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
python操作oracle的完整教程分享
2018/01/30 Python
Keras设置以及获取权重的实现
2020/06/19 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
菲律宾最大的网上花店和礼品店:PhilFlower.com
2018/02/09 全球购物
爱普生美国官网:Epson美国
2018/11/05 全球购物
高性能装备提升营地:Kammok
2019/02/27 全球购物
幼儿园庆六一游园活动方案
2014/01/29 职场文书
房产转让协议书
2014/04/11 职场文书
运动会加油口号
2014/06/07 职场文书
爱护草坪标语
2014/06/24 职场文书
中学教师师德师风演讲稿
2014/08/22 职场文书
群众路线个人整改方案
2014/10/25 职场文书
个人事迹材料范文
2014/12/29 职场文书
工程项目经理岗位职责
2015/02/02 职场文书
2015国际残疾人日活动总结
2015/03/24 职场文书
好员工观后感
2015/06/17 职场文书
先进教师个人主要事迹材料
2015/11/03 职场文书
创业计划书之零食店(进口)
2019/09/24 职场文书
Python使用scapy模块发包收包
2021/05/07 Python
python3实现常见的排序算法(示例代码)
2021/07/04 Python
使用CSS实现黑白格背景效果
2022/06/01 HTML / CSS