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, 那么该事件将触发多个用户响应(实例 再次加载广告, 刷新评论, 分享联营button等一下). 我建议你也评价降低自己的网站,要看看有什么可以使用 pub/sub 状态.