深入理解JS异步编程二(分布式事件)
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');
深入理解JS异步编程二(分布式事件)的更多相关文章
- 理解js异步编程
Promise 背景 javascript语言的一大特点就是单线程,在某个特定的时刻只有特定的代码能够被执行,并阻塞其它的代码,也就是说,同一个时间只能做一件事. 怎么做到异步编程?回调函数.直到no ...
- 深入理解JS异步编程五(脚本异步加载)
异步脚本加载 阻塞性脚本 JavaScript在浏览器中被解析和执行时具有阻塞的特性,也就是说,当JavaScript代码执行时,页面的解析.渲染以及其他资源的下载都要停下来等待脚本执行完毕 浏览器是 ...
- 深入理解JS异步编程四(HTML5 Web Worker)
>Web Workers 是 HTML5 提供的一个javascript多线程解决方案,我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面. 一:如何使用Worker We ...
- 深入理解JS异步编程(一)
js事件概念 异步回调 首先了讲讲js中 两个方法 setTimeout()和 setInterval() 定义和用法: setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. 语法 ...
- 深入理解JS异步编程三(promise)
jQuery 原本写一个小动画我们可能是这样的 $('.animateEle').animate({ opacity:'.5' }, 4000,function(){ $('.animateEle2' ...
- js异步编程
前言 以一个煮饭的例子开始,例如有三件事,A是买菜.B是买肉.C是洗米,最终的结果是为了煮一餐饭.为了最后一餐饭,可以三件事一起做,也可以轮流做,也可能C需要最后做(等A.B做完),这三件事是相关的, ...
- 前端分享----JS异步编程+ES6箭头函数
前端分享----JS异步编程+ES6箭头函数 ##概述Javascript语言的执行环境是"单线程"(single thread).所谓"单线程",就是指一次只 ...
- 深入理解 Python 异步编程(上)
http://python.jobbole.com/88291/ 前言 很多朋友对异步编程都处于"听说很强大"的认知状态.鲜有在生产项目中使用它.而使用它的同学,则大多数都停留在知 ...
- 深入理解Python异步编程(上)
本文代码整理自:深入理解Python异步编程(上) 参考:A Web Crawler With asyncio Coroutines 一.同步阻塞方式 import socket def blocki ...
随机推荐
- Scalding初探之三:Hadoop实战
Java版本 如果在Scala工程中混入Java类导致java版本不match,可能会抛错 java.lang.UnsupportedClassVersionError: XXX Unsupporte ...
- ThreadPoolExecutor机制探索-我们到底能走多远系列(41)
我们到底能走多远系列(41) 扯淡: 这一年过的不匆忙,也颇多感受,成长的路上难免弯路,这个世界上没人关心你有没有变强,只有自己时刻提醒自己,不要忘记最初出发的原因. 其实这个世界上比我们聪明的人无数 ...
- 讨论贴:在sp_executesql 中生成的临时表的可见性
首先创建数据表 IF object_id('TestTable') IS NOT NULL DROP TABLE TestTable GO ,),Info )) GO INSERT TestTable ...
- “__doPostBack”未定义
项目中发现IE10等高级浏览器报错 ASP.NET无法检测IE10,导致_doPostBack未定义JavaScript错误 为此微软工程师解释如果发布asp2.0 asp4.0发布时,这些浏览器还未 ...
- Spring总结
此君也是使用过多时了,却从来没有系统的总结过 以下,弥补,盼不晚: Spring为什么是框架&容器 1.框架的原因: 其提供多个组件的搭建,和支持其他事务事件,符合框架定义 ps:什么是框架呢 ...
- foreach属性-动态-mybatis中使用map类型参数,其中key为列名,value为列值
http://zhangxiong0301.iteye.com/blog/2242723 最近有个需求,就是使用mybatis时,向mysql中插入数据,其参数为map类型,map里面的key为列名, ...
- Install Qt creator
download qt for linux yum install dialog move download qt file(qt-opensource-linux-x64-5.6.0.run) fr ...
- jquery datatables双击,获取行号。
function dbClickDatatables(rows) { $("#@(Perfix)tbData tbody tr").dblclick(function(e){ de ...
- IOS开发-项目实战-点赞功能的实现
实现思路: 1.每一条新闻就是一个cell,在cell上添加点赞按钮. 2.让cell的控制器成为自定义cell的代理,将点击了哪一个cell放在代理方法中传出去. 3.并将这条新闻的ID和当前用户的 ...
- vi编辑器的基本使用
进入vi为命令模式,需要按 i/a/o 键进入插入模式(在左下角最后一行有“-- INSERT --”字样). i:光标所在位置,进行输入(相似命令cw) a:光标所在位置的下一个位置,进行输入o ...