JavaScript发布/订阅实例
原文链接: Pub/Sub JavaScript Object
原文日期: 2014年6月11日
翻译日期: 2014年6月13日
翻译人员: 铁锚
高效AJAX网站的三大杀器: 事件代理, 浏览历史管理, 以及高效应用级 发布/订阅通信机制. 本博客的原文站点 同时使用了这三种技术,本文中作者将分享其中最简单的一个: 该网站使用的 一个微型 发布/订阅模块。
如果你不了解 发布/订阅 模式,那么可以将其类比为 你发表了一篇博文,所有人都可以订阅你的博客, 也类似于广播电台的工作方式: 有一个站台进行广播(发布, publishes), 其他人都可以收听(订阅, subscribes)。 这种模式对于高度模块化的应用是很卓越的, 这是一把全局通信的钥匙,而不需要依赖某个特殊的对象。
JavaScript实现
该模块非常的精简,功能也非常的强大:
var events = (function(){ var topics = {}; return { subscribe: function(topic, listener) { // 如果没有创建,则创建一个topic对象 if(!topics[topic]) topics[topic] = { queue: [] }; // 添加监听器到队列中 var index = topics[topic].queue.push(listener) -1; // 提供移除topic的句柄(对象) return (function(topic, index) { return { remove: function() { delete topics[topic].queue[index]; } } })(topic, index); }, publish: function(topic, info) { // 如果 topic 不存在,或者队列中没有监听器,则 return if(!topics[topic] || !topics[topic].queue.length) return; // 通过循环 topics 队列, 触发事件! var items = topics[topic].queue; items.forEach(function(item) { item(info||{}); }); } }; })();
使用示例:
发布一个topic:
events.publish('/page/load', { url: '/some/url/path' // 此处可以是任意对象,任意参数 });
订阅topic以便得到事件通知:
var subscription = events.subscribe('/page/load', function(obj) { // 当事件发生时,可以执行某些操作... }); // ... 如果某些操作完成后,不想继续订阅,移除即可... subscription.remove();
原作者在博客站点上大量地使用 发布/订阅 模式,实际的使用体验也非常好.
当一个 AJAX页面加载完成时会发布一个 topic, 然后该事件就会触发多个订阅者的响应(比如 重新加载广告, 刷新评论, 关联分享按钮等). 建议你也评估下自己的网站,看看有什么地方可以使用 pub/sub 模式.
JavaScript发布/订阅实例的更多相关文章
- MQTT的学习研究(十一) IBM MQTT 简单发布订阅实例
package com.etrip.push; import com.ibm.mqtt.MqttAdvancedCallback; import com.ibm.mqtt.MqttClient; im ...
- MQTT的学习研究(十三) IBM MQTTV3 简单发布订阅实例
使用IBM MQTTv3实现相关的发布订阅功能 MQTTv3的发布消息的实现: package com.etrip.mqttv3; import com.ibm.micro.client.mqttv3 ...
- js设计模式之发布订阅模式
1. 定义 发布-订阅模式其实是一种对象间一对多的依赖关系,当一个对象的状态发送改变时,所有依赖于它的对象都将得到状态改变的通知. 订阅者(Subscriber)把自己想订阅的事件注册(Subscri ...
- 理解JavaScript设计模式与开发应用中发布-订阅模式的最终版代码
最近拜读了曾探所著的<JavaScript设计模式与开发应用>一书,在读到发布-订阅模式一章时,作者不仅给出了基本模式的通用版本的发布-订阅模式的代码,最后还做出了扩展,给该模式增加了离线 ...
- Javascript中理解发布--订阅模式
Javascript中理解发布--订阅模式 阅读目录 发布订阅模式介绍 如何实现发布--订阅模式? 发布---订阅模式的代码封装 如何取消订阅事件? 全局--发布订阅对象代码封装 理解模块间通信 回到 ...
- javascript设计模式学习之八_发布订阅(观察者)模式
一.发布订阅模式定义 jQuery中的callbacks,defered,promise本质上就是发布订阅模式的实现.ES6的promise内部实现未开源,不了解具体机制 发布订阅模式又叫做观察者模式 ...
- javascript设计模式——发布订阅模式
前面的话 发布—订阅模式又叫观察者模式,它定义对象间的一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知.在javascript开发中,一般用事件模型来替代传统的发布—订阅模 ...
- 《JavaScript设计模式与开发实践》笔记第八章 发布-订阅模式
第八章 发布-订阅模式 发布-订阅模式描述 发布-订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知. 发布-订阅模式可以广泛应用于 ...
- [转] Javascript中理解发布--订阅模式
发布订阅模式介绍 发布---订阅模式又叫观察者模式,它定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时,所有依赖于它的对象都将得到通知. 现实生活中的发布- ...
随机推荐
- EBS业务学习之应付管理
应付款系统是供应链管理的最后一个环节,它使公司能够支付供应商提供的货物和服务的费用.供应链管理的目标是保持低库存量但又有充足的存货以满足要求,仓库中的库存就等于钱,因此,应付款管理的目标是尽可能地推迟 ...
- 剑指offer-面试题7:俩个栈实现队列(java)
详细分析请参照C语言版,这里仅仅给出实现代码,注释很详细,不得不说java各种api用起来真是爽飞了 1 package com.xsf.SordForOffer; 2 3 import java.u ...
- 带你深入理解STL之RBTree
最近一直忙于校招的笔试,STL的深入理解系列也耽搁了好几天,再加上!红黑树真的是超级超级难理解,超级超级复杂,参考了好多博客上的大神的理解才稍微明白一点,勉强入个门,下面请以一个菜鸟的角度跟着我一起学 ...
- Struts 2 标签库
<s:if>标签 拥有一个test属性,其表达式的值用来决定标签里内容是否显示 <s:if test="#request.username=='clf'"> ...
- Swift延迟加载的一种用途
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 有以下一种情况: 我们试图用Cocoa的语音合成类NSSpee ...
- 1.使用C++封装一个链表类LinkList
使用C++封装一个链表类LinkList.写出相应一个测试用例 链表需要提供 添加 修改删除 除重 合并 排序创建 销毁等接口. 不能调用库函数或者使用STL等类库 题目延伸********** ...
- 皮尔森相似度计算举例(R语言)
整理了一下最近对协同过滤推荐算法中的皮尔森相似度计算,顺带学习了下R语言的简单使用,也复习了概率统计知识. 一.概率论和统计学概念复习 1)期望值(Expected Value) 因为这里每个数都是等 ...
- 仿淘宝购物车demo---增加和减少商品数量
在上一篇博客中,小编简单的介绍了如何使用listview来实现购物车,但是仅仅是简单的实现了列表的功能,随之而来一个新的问题,买商品的时候,我们可能不止想买一件商品,想买多个,或许有因为某种原因点错了 ...
- iOS开发之五:常用控件--UITextField的使用
UITextField 是iOS开发中用的非常多的一种控件,主要是供用户输入单行信息的.下面来详细介绍UITextField. 1.常用属性 <span style="font-siz ...
- android notification,notificationmanager详解
我们知道在使用Android的通知的时候一定会用到NotificationManager . Notification这两个类,这两个类的作用分别是: NotificationManager : 是 ...