原文链接: 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. iOS下JS与OC互相调用(七)--Cordova 基础

    Cordova 简介 在介绍Cordova之前,必须先提一下PhoneGap.PhoneGap 是Nitobi软件公司2008年推出的一个框架,旨在弥补web 和iOS 之间的不足,使得web 和 i ...

  2. FORM实现中打开图片,链接,文档(参考自itpub上一篇帖子,整理而来)

    FORM实现中打开图片,链接,文档 参考自itpub上一篇帖子,整理而来 1.添加PL程序库D2kwutil.pll 2.主要实现程序 /*过程参数说明: v_application --打开文件的应 ...

  3. Java并发框架——AQS之如何使用AQS构建同步器

    AQS的设计思想是通过继承的方式提供一个模板让大家可以很容易根据不同场景实现一个富有个性化的同步器.同步器的核心是要管理一个共享状态,通过对状态的控制即可以实现不同的锁机制.AQS的设计必须考虑把复杂 ...

  4. 20 ViewPager总结

    V4:兼容到1.6,V7:兼容到 2.1,V13:兼容到3.2(平板) 兼容包 ViewPager 父类: android.support.v4.view.ViewPager ViewPager:滑动 ...

  5. JAXB(Java Architecture for XML Binding)

    marshal(Java对象转化成XML) import javax.xml.bind.annotation.XmlRootElement; //指定根元素,其他属性默认为根元素的子元素 @XmlRo ...

  6. RDD:基于内存的集群计算容错抽象

    转载自:http://shiyanjun.cn/archives/744.html 摘要 本文提出了分布式内存抽象的概念--弹性分布式数据集(RDD,Resilient Distributed Dat ...

  7. 搜索----Android Demo

    在前面的博客中,小编简单的介绍了,点击发现按钮,自动加载热门的相关数据,成长的脚步从不停歇,完成了发现的功能,今天我们来简单看一下如何在搜索栏中输入关键字,搜索出我们所需要的信息,今天这篇博文小编就简 ...

  8. .so的封装调用

    .so的创建和调用有一个特点,我们要知道.so的调用并不一定必须在Activity中进行,那么制作时也并不一定要在Activity中,但是,一旦.so制作成功,那么再调用时,调用的java类就必须跟制 ...

  9. javascript之event对象

    注意:以下给出的是在IE下的event事件说明,如果应用在非IE下可能会出现兼容性问题,需要结合具体的应用环境,使用兼容性的函数来处理 1.altKey 描述: 检查alt键的状态. 语法: even ...

  10. SimpleAdapter和Baseadapter填充listActivity-android学习之旅()

    简介 SimpleAdapter的功能是能够为AbsListView提供复杂的数据,需要构造ListView 代码示例 package peng.liu.testview; import androi ...