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发布/订阅实例,布布扣,bubuko.com

时间: 2024-10-28 09:54:15

JavaScript发布/订阅实例的相关文章

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

package com.etrip.push; import com.ibm.mqtt.MqttAdvancedCallback; import com.ibm.mqtt.MqttClient; import com.ibm.mqtt.MqttException; import com.ibm.mqtt.MqttSimpleCallback; /** * Android推送方案分析(MQTT/XMPP/GCM) 方案1. 使用GCM服务(Google Cloud Messaging) 简介:Go

ActiveMQ之队列和主题发布订阅实例

JMS 消息模型 JMS消息服务应用程序结构支持两种模型:点对点模型,发布者/订阅者模型. (1)点对点模型(Queue) 一个生产者向一个特定的队列发布消息,一个消费者从这个队列中依次读取消息. 模型特点:只有一个消费者获得消息. (2)发布者/订阅者模型(Topic) 0个或多个订阅者可以接受特定主题的消息. 模型特点:多个消费者可获得消息. Topic和Queue的最大区别在于Topic是以广播的形式,通知所有在线监听的客户端有新的消息,没有监听的客户端将收不到消息:而Queue则是以点对

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

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

javascript发布订阅pubsub模式

首先使用数组缓存订阅者订阅的消息,当订阅者订阅消息的时候,把订阅的消息push到指定消息的队列中,当发布者发布消息的时候,我们遍历执行push到指定消息队列中的回调事件. var Pubsub=(function(){ var eventObj={}; return { subscribe:function(event,fn){ eventObj[event]=fn }, publish:function(event){ if(eventObj[event]) eventObj[event]()

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

最近拜读了曾探所著的<JavaScript设计模式与开发应用>一书,在读到发布-订阅模式一章时,作者不仅给出了基本模式的通用版本的发布-订阅模式的代码,最后还做出了扩展,给该模式增加了离线空间功能和命名空间功能,以达到先发布再订阅的功能和防止名称冲突的效果.但是令人感到遗憾的是最终代码并没有给出足够的注释.这让像我一样的小白就感到非常的困惑,于是我将这份最终代码仔细研究了一下,并给出了自己的一些理解,鉴于能力有限,文中观点可能并不完全正确,望看到的大大们不吝赐教,谢谢! 下面是添加了个人注释的

JavaScript设计模式与开发实践---读书笔记(8) 发布-订阅模式

发布-订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知. 发布-订阅模式可以广泛应用于异步编程中,这是一种替代传递回调函数的方案. 可以取代对象之间硬编码的通知机制,一个对象不用再显式地调用另外一个对象的某个接口. 自定义事件 首先要指定好谁充当发布者: 然后给发布者添加一个缓存列表,用于存放回调函数以便通知订阅者: 最后发布消息时,发布者会遍历这个缓存列表,依次触发里面存放的订阅者回调函数. 另外,我们还可以往回调函数里填入

RabbitMQ实例教程:发布/订阅者消息队列

消息交换机(Exchange) RabbitMQ消息模型的核心理念是生产者永远不会直接发送任何消息给队列,一般的情况生产者甚至不知道消息应该发送到哪些队列. 相反的,生产者只能发送消息给交换机(Exchange).交换机的作用非常简单,一边接收从生产者发来的消息,另一边把消息推送到队列中.交换机必须清楚的知道消息如何处理它收到的每一条消息.是否应该追加到一个指定的队列?是否应该追加到多个队列?或者是否应该丢弃?这些规则通过交换机的类型进行定义. 交换机的类型有:direct,topic,head

Javascript异步编程方法之------“发布/订阅”

Javascript异步编程方法之------“发布/订阅”我们假定,存在一个"信号中心",某个任务执行完成,就向信号中心"发布"(publish)一个信号,其他任务可以向信号中心"订阅"(subscribe)这个信号,从而知道什么时候自己可以开始执行.这就叫做"发布/订阅模式"(publish-subscribe pattern),又称"观察者模式"(observer pattern).这个模式有多种实现

JavaScript实现的发布/订阅(Pub/Sub)模式

JavaScript实现的发布/订阅(Pub/Sub)模式时间 2016-05-02 18:47:58  GiantMing's blog原文  http://giantming.net/javascriptshi-xian-de-fa-bu-ding-yue-pub-sub-mo-shi/主题 JavaScript 观察者模式前段时间看了一下发布订阅者模式(也叫观察者模式),今天看<基于mvc的JavaScript的富应用开发>又看到了它,这个设计模式是非常有用的,正好写篇博客来分享一下.(