码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript发布/订阅实例

时间:2014-06-14 13:26:20      阅读:317      评论:0      收藏:0      [点我收藏+]

标签:发布   订阅   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

JavaScript发布/订阅实例

标签:发布   订阅   javascript   杀器   高效   

原文地址:http://blog.csdn.net/renfufei/article/details/30492279

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!