原文链接: 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 状态.

JavaScript通告/订阅的例子的更多相关文章

  1. C# windows程序应用与JavaScript 程序交互实现例子

    C# windows程序应用与JavaScript 程序交互实现例子 最近项目中又遇到WinForm窗体内嵌入浏览器(webBrowser)的情况,而且涉及到C#与JavaScript的相互交互问题, ...

  2. javascript闭包的一个例子

    <html> <head> <title>elementFromPoint</title> <script type="text/jav ...

  3. 自学JavaScript的几个例子

    学习了广泛使用的浏览器脚本JavaScript和HTML的DOM模型(也是用JavaScript实现),下面给出两个自己学习时的例子,具体JavaScript语法请参考W3C相关网页(http://w ...

  4. JavaScript发布/订阅实例

    原文链接: Pub/Sub JavaScript Object原文日期: 2014年6月11日翻译日期: 2014年6月13日 翻译人员: 铁锚 高效AJAX网站的三大杀器: 事件代理, 浏览历史管理 ...

  5. 理解javascript观察者模式(订阅者与发布者)

    什么是观察者模式? 观察者模式又叫做发布订阅模式,它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生改变时就会通知所有观察着对象.它是由两类对象组成,主题和观察者 ...

  6. 简单模仿javascript confirm方法的例子

    页面中有个删除按钮: <?php $i = 1; foreach ($packages as $package) { ?> <tr> <td height="3 ...

  7. 用Html5/CSS3做Winform,一步一步教你搭建CefSharp开发环境(附JavaScript异步调用C#例子,及全部源代码)上

    本文为鸡毛巾原创,原文地址:http://www.cnblogs.com/jimaojin/p/7077131.html,转载请注明 CefSharp说白了就是Chromium浏览器的嵌入式核心,我们 ...

  8. ArcGIS API for JavaScript 与 npm 之例子运行

    下载官方的demo,4.7的,在终端里跑了一下,测试成功(未打包) 在测试中精简掉了不需要的文件,使用http协议跑的(file协议不行哦) 最简单的目录如下: 我把以上文件放到一个叫demo的文件夹 ...

  9. JavaScript设计模式 - 订阅发布模式(观察者模式)

    var Event = (function() { var global = this, Event, _default = 'default'; Event = function() { var _ ...

随机推荐

  1. 基于OWin的Web服务器Katana发布版本3

    当 ASP.NET 首次在 2002 年发布时,时代有所不同. 那时,Internet 仍处于起步阶段,大约有 5.69 亿用户,每个用户平均每天访问 Internet 的时间为 46 分钟,大约有 ...

  2. 更改Visual Studio 2015 默认的语言设置

    Vs支持多种语言,但有可能创建项目时,默认的开发语言不是你需要的,比如:默认是Visual C++ 你可以通过"工具"----选项----导入和导出设置来修改. 引用: https ...

  3. FineUI参考手册(离线版)现已免费提供下载!

    http://fineui.com/bbs/forum.php?mod=viewthread&tid=3473

  4. 【转】Struts1.x系列教程(6):Bean标签库

    转载地址:http://www.blogjava.net/nokiaguy/archive/2009/01/archive/2009/01/archive/2009/01/archive/2009/0 ...

  5. linux hugepage

    The intent of this file is to give a brief summary of hugetlbpage support inthe Linux kernel.  This ...

  6. MySQL教程:数据库具体操作

    1. 连接数据库服务器 $ ./mysql -h host_name -u user_name -p -h host_name(--host=host_name),连接的数据库主机名,如果在本地主机上 ...

  7. 【取对数+科学计数法】【HDU1060】 N^N

    Leftmost Digit Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Tota ...

  8. JSP文件上传--FileUpload组件

    如果使用上传操作,并且没有使用框架之类,最好使用Smartupload,因为FileUpdate太难使用. 下载组件: fileupload包:http://commons.apache.org/pr ...

  9. css3绘制三角形

    将div的宽和高设置为0:利用border-width.border-style.border-color属性绘制不同位置边框的样式.将不需要展示的三角颜色填充为transparent透明即可,就能得 ...

  10. PDF怎么旋转页面,只需几步轻松搞定!

    有时候我们下载一个PDF文件里面有页面是旋转的情况,用手机看的时候可以把手机旋转过来看,那么用电脑的时候总不可能也转过来看吧,笔记本是可以的台式的是不行的,这个时候我们就需要把PDF文件中旋转的页面转 ...