深入理解JS异步编程二(分布式事件)

原创 2016年06月01日 08:20:45

PubSub模式

从原生的js角度,我们要监听某事件的方法就是利用addEventListener方法,但是当我们的页面趋于复杂,比如要向某个元素添加多个处理事件,那么就要用一个封装函数汇集多个处理函数

link.onclick = function() {
    clickHandler1.apply(this, arguments);
    clickHandler2.apply(this, arguments);
};

在jquery中,jquery.on()方法使用的比较多,在新版的jquery中,也舍弃了bind()方法,统一使用on,jQuery 将link 元素的事件发布给了任何想订阅此事件的人。

Node.js中的EventEmitter 对象
要想给EventEmitter 对象添加一个事件处理器,只要以事件类型和事件处理器为参数调用on 方法即可。

emitter.on('evacuate', function(message) {
    console.log(message);
});

emit(意为“触发”)方法负责调用给定事件类型的所有处理器。举个例子,下面这行代码:

emitter.emit('evacuate');

将调用evacuate 事件的所有处理器。

请注意,这里的术语事件跟事件队列没有任何关系。

使用emit 方法触发事件时,可以添加任意多的附加参数。所有参数均传递至所有处理器。

emitter.emit('evacuate', 'Woman and children first!');

实现一个PubSub模式

一个PubSub模型主要方法有3个,订阅,退订,发布

var PubSub = {};
// 用于储存事件队列
var queue = {};

// 订阅接口
PubSub.on = function(event, cb) {
  if (!queue[event]) {
    queue[event] = [];
  }
  queue[event].push(cb);
};

// 退订接口
PubSub.off = function(event, cb) {
  var currentEvent = queue[event];
  var len = 0;
  if (currentEvent) {
    len = currentEvent.length;
    for (var i = len - 1; i >= 0; i--) {
      if (currentEvent[i] === cb) {
        currentEvent.splice(i, 1);
      }
    }
  }
};

// 发布接口
PubSub.emit = function(event) {
  var currentEvent = queue[event];
  if (currentEvent) {
    for (var i = 0; i < currentEvent.length; i++) {
      currentEvent[i]();
    }
  }
};


//使用
// 订阅
var callbackA = function () {
    console.log('event a happened')
};
PubSub.on('a', callbackA);
PubSub.on('b', function() {
    console.log('event b happened')
});

// 退订 , 第二个参赛传入回调函数的引用
PubSub.off('a', callbackA);

// 发布
PubSub.emit('a');
PubSub.emit('b'); 
版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。

深入理解 Python 异步编程

原文地址:点击打开链接 来源:阿驹(微信公号:驹说码事)  如有好文章投稿,请点击 → 这里了解详情 前言 很多朋友对异步编程都...
  • QH_JAVA
  • QH_JAVA
  • 2017年09月03日 18:06
  • 558

[Python]深入理解 Python 异步编程(上)

原文出处: 阿驹    前言 很多朋友对异步编程都处于“听说很强大”的认知状态。鲜有在生产项目中使用它。而使用它的同学,则大多数都停留在知道如何使用 Tornado、Twisted、Gev...
  • cn_wk
  • cn_wk
  • 2017年08月18日 04:48
  • 951

《深入浅出Node.js》学习笔记——(四)异步编程

Node能够迅速成功并流行的原因: ①V8和异步I/O带来的性能提升 ②前后端JavaScript编程风格一致   4.1 函数式编程 4.1.1高阶函数 可以将函数作为参数,或是作为返...
  • oEternalFlame
  • oEternalFlame
  • 2016年05月30日 20:54
  • 1258

深入理解js中的加载事件

load load事件:当页面完全加载后(包括所有图片、javascript文件、css文件等外部资源),就会触发window上的load事件window.onload = function...
  • ruby_xc
  • ruby_xc
  • 2017年09月26日 12:20
  • 89

深入理解JavaScript运行机制

深入理解JavaScript运行机制 前言 本文是写作在给团队新人培训之际,所以其实本文的受众是对JavaScript的运行机制不了解或了解起来有困难的小伙伴。也就是说,其实真正的原理和本文阐...
  • Amos_liu
  • Amos_liu
  • 2016年12月10日 19:25
  • 1051

深入理解Java虚拟机第二版学习笔记(一)

深入理解Java虚拟机第二版学习笔记。 第一章,       走进Java。 1.2 Java技术体系 Sun官方定义的Java技术体系包括以下几个组成部分: Java程序设计语言; 各种硬...
  • lin20044140410
  • lin20044140410
  • 2017年12月12日 18:09
  • 94

深入理解javascript闭包(二)

一、什么是闭包? 官方”的解释是:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。 相信很少有人能直接看懂这句话,因为他描述的太学术。...
  • canlets
  • canlets
  • 2014年05月08日 20:25
  • 743

[深入理解Android卷二 全文-第一章]开发环境部署

由于《深入理解Android 卷一》和《深入理解Android卷二》不再出版,而知识的传播不应该因为纸质媒介的问题而中断,所以我将在CSDN博客中全文转发这两本书的全部内容。第1章 开发环境部署本章主...
  • Innost
  • Innost
  • 2015年08月03日 10:16
  • 4186

深入理解内存(1):原理简介

发现编程的很多问题最后整来整去,最后又是归结到内存上面来了.所以决定好好来研究下内存.   我们知道冯.诺伊曼体系结构中是把计算机划分为输入设备,输出设备,存储器,控制器,运算器. 输入设备主...
  • weiwenhp
  • weiwenhp
  • 2013年01月15日 15:03
  • 1448

深入理解JS异步编程五(脚本异步加载)

异步脚本加载阻塞性脚本JavaScript在浏览器中被解析和执行时具有阻塞的特性,也就是说,当JavaScript代码执行时,页面的解析、渲染以及其他资源的下载都要停下来等待脚本执行完毕浏览器是按照从...
  • wkyseo
  • wkyseo
  • 2016年06月04日 08:30
  • 1584
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深入理解JS异步编程二(分布式事件)
举报原因:
原因补充:

(最多只允许输入30个字)