原文链接: 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. dojo topic 发布与订阅 小例子可以参考下

    <!DOCTYPE html><html> <head> <title></title></head> <body> ...

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

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

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

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

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

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

随机推荐

  1. 关于 getWriter() has already been called for this response 的错误解决办法

    java.lang.IllegalStateException: getWriter() has already been called for this response 今天在做显示图片的时候,( ...

  2. 12个实用的 Javascript 奇淫技巧

    这里分享12个实用的 Javascript 奇淫技巧.JavaScript自1995年诞生以来已过去了16个年头,如今全世界无数的网页在依靠她完成各种关键任务,JavaScript曾在Tiobe发布的 ...

  3. DFS与BFS

    顾名思义,DFS就是一直在一个方向搜索,当这一方向不可以时退回该点,换下一方向: 而BFS一开始就是向四面八方搜索,把符合条件的点存入队列中,当前一个点都搜索完毕时,再从队列顶中取出点,再向四面八方搜 ...

  4. 24、AR技术

    什么是AR 在介绍增强现实(AR)之前,需要先说说虚拟现实(VR) 虚拟现实是从英文Virtual Reality 一词翻译过来的,简称VR.VR 技术是采用以计算机技术为核心的技术,生成逼真的视.听 ...

  5. windows 安装paramiko模块

    首先需要安装pycrypto这个模块,这个下源码编译安装的不能用报错warning: GMP or MPIR library not found; Not building这个用编译好的模块安装已编译 ...

  6. one Infos

    Backend Server is still running (PID:). Please try 'euc-server stop' first. (原因很简单,进程控制脚本无restart函数功 ...

  7. js 通信

    js 页面间的通信 看了一下公司原来的代码,原页面ajax post返回一个页面完整的HTML,然后再打开一个新页面并输出ajax返回的所有代码到新页面上,在新页面上以表单提交的形式实现重定向. 任凭 ...

  8. Lab 6-4

    In this lab, we'll analyze the malware found in the file Lab06-04.exe. Questions and Short Answers W ...

  9. html 目录结构

    "D:\phpStudy\WWW\tubiao\libchart\libchart\classes\view\chart/../../../images/PoweredBy.png" ...

  10. BZOJ5329:[SDOI2018]战略游戏(圆方树,虚树)

    Description 省选临近,放飞自我的小Q无心刷题,于是怂恿小C和他一起颓废,玩起了一款战略游戏. 这款战略游戏的地图由n个城市以及m条连接这些城市的双向道路构成,并且从任意一个城市出发总能沿着 ...