原文链接: 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发布/订阅实例的更多相关文章

  1. MQTT的学习研究(十一) IBM MQTT 简单发布订阅实例

    package com.etrip.push; import com.ibm.mqtt.MqttAdvancedCallback; import com.ibm.mqtt.MqttClient; im ...

  2. MQTT的学习研究(十三) IBM MQTTV3 简单发布订阅实例

    使用IBM MQTTv3实现相关的发布订阅功能 MQTTv3的发布消息的实现: package com.etrip.mqttv3; import com.ibm.micro.client.mqttv3 ...

  3. js设计模式之发布订阅模式

    1. 定义 发布-订阅模式其实是一种对象间一对多的依赖关系,当一个对象的状态发送改变时,所有依赖于它的对象都将得到状态改变的通知. 订阅者(Subscriber)把自己想订阅的事件注册(Subscri ...

  4. 理解JavaScript设计模式与开发应用中发布-订阅模式的最终版代码

    最近拜读了曾探所著的<JavaScript设计模式与开发应用>一书,在读到发布-订阅模式一章时,作者不仅给出了基本模式的通用版本的发布-订阅模式的代码,最后还做出了扩展,给该模式增加了离线 ...

  5. Javascript中理解发布--订阅模式

    Javascript中理解发布--订阅模式 阅读目录 发布订阅模式介绍 如何实现发布--订阅模式? 发布---订阅模式的代码封装 如何取消订阅事件? 全局--发布订阅对象代码封装 理解模块间通信 回到 ...

  6. javascript设计模式学习之八_发布订阅(观察者)模式

    一.发布订阅模式定义 jQuery中的callbacks,defered,promise本质上就是发布订阅模式的实现.ES6的promise内部实现未开源,不了解具体机制 发布订阅模式又叫做观察者模式 ...

  7. javascript设计模式——发布订阅模式

    前面的话 发布—订阅模式又叫观察者模式,它定义对象间的一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知.在javascript开发中,一般用事件模型来替代传统的发布—订阅模 ...

  8. 《JavaScript设计模式与开发实践》笔记第八章 发布-订阅模式

    第八章 发布-订阅模式 发布-订阅模式描述 发布-订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知. 发布-订阅模式可以广泛应用于 ...

  9. [转] Javascript中理解发布--订阅模式

    发布订阅模式介绍 发布---订阅模式又叫观察者模式,它定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时,所有依赖于它的对象都将得到通知. 现实生活中的发布- ...

随机推荐

  1. EBS业务学习之应付管理

    应付款系统是供应链管理的最后一个环节,它使公司能够支付供应商提供的货物和服务的费用.供应链管理的目标是保持低库存量但又有充足的存货以满足要求,仓库中的库存就等于钱,因此,应付款管理的目标是尽可能地推迟 ...

  2. 剑指offer-面试题7:俩个栈实现队列(java)

    详细分析请参照C语言版,这里仅仅给出实现代码,注释很详细,不得不说java各种api用起来真是爽飞了 1 package com.xsf.SordForOffer; 2 3 import java.u ...

  3. 带你深入理解STL之RBTree

    最近一直忙于校招的笔试,STL的深入理解系列也耽搁了好几天,再加上!红黑树真的是超级超级难理解,超级超级复杂,参考了好多博客上的大神的理解才稍微明白一点,勉强入个门,下面请以一个菜鸟的角度跟着我一起学 ...

  4. Struts 2 标签库

    <s:if>标签 拥有一个test属性,其表达式的值用来决定标签里内容是否显示 <s:if test="#request.username=='clf'"> ...

  5. Swift延迟加载的一种用途

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 有以下一种情况: 我们试图用Cocoa的语音合成类NSSpee ...

  6. 1.使用C++封装一个链表类LinkList

     使用C++封装一个链表类LinkList.写出相应一个测试用例 链表需要提供 添加 修改删除 除重 合并 排序创建 销毁等接口. 不能调用库函数或者使用STL等类库 题目延伸********** ...

  7. 皮尔森相似度计算举例(R语言)

    整理了一下最近对协同过滤推荐算法中的皮尔森相似度计算,顺带学习了下R语言的简单使用,也复习了概率统计知识. 一.概率论和统计学概念复习 1)期望值(Expected Value) 因为这里每个数都是等 ...

  8. 仿淘宝购物车demo---增加和减少商品数量

    在上一篇博客中,小编简单的介绍了如何使用listview来实现购物车,但是仅仅是简单的实现了列表的功能,随之而来一个新的问题,买商品的时候,我们可能不止想买一件商品,想买多个,或许有因为某种原因点错了 ...

  9. iOS开发之五:常用控件--UITextField的使用

    UITextField 是iOS开发中用的非常多的一种控件,主要是供用户输入单行信息的.下面来详细介绍UITextField. 1.常用属性 <span style="font-siz ...

  10. android notification,notificationmanager详解

    我们知道在使用Android的通知的时候一定会用到NotificationManager . Notification这两个类,这两个类的作用分别是: NotificationManager :  是 ...