深入理解JS异步编程二(分布式事件)
来源:互联网 发布:炉石传说mac版下载 编辑:程序博客网 时间:2024/06/03 19:33
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');
0 0
- 深入理解JS异步编程二(分布式事件)
- 深入理解JS异步编程(一)
- 深入理解JS异步编程三(promise)
- 深入理解node.js异步编程(闭包,事件,内存回收,eventloop,io)
- 深入理解JS异步编程五(脚本异步加载)
- 深入理解node.js异步编程:基础篇
- 深入理解JS异步编程四(HTML5 Web Worker)
- 理解Node.js的事件驱动和异步编程
- 深入理解 Python 异步编程
- js的事件深入理解
- 深入理解JS事件委托
- js深入理解(二)
- JS异步编程二:自由落体
- [Python]深入理解 Python 异步编程(上)
- 深入理解Android事件处理(二)
- 深入理解js中的加载事件
- Node.js 异步编程基础理解
- 动态编程深入理解(二)
- RadioGroup+ViewPager+Fragment+滚动条
- 最全电商分类信息(09)
- (GeekBand或极客班) 你的内存泄漏了--- 之 virtual 析构
- Packet for query is too large(mysql查询数据过大)
- 【NodeJs】Linux安装NodeJs并配合Nginx实现反向代理
- 深入理解JS异步编程二(分布式事件)
- 最全电商分类信息(10)
- CSS块级元素、内联元素
- eclipse 修改后台代码
- String 类型 保留后两位小数
- python3深入学习教程
- org.apache.commons.lang3.StringUtils工具类常用方法
- 最全电商分类信息(11)
- 关于log4j的日志操作