events.js 源码分析
events.js 源码分析
1. 初始化
// 使用
this.ee = new EventEmitter();
// 源码
// 绑定this域,初始化 _events,_eventsCount和_maxListeners对象
function EventEmitter() {
EventEmitter.init.call(this);
}
EventEmitter.init = function() {
if (
this._events === undefined ||
this._events === Object.getPrototypeOf(this)._events
) {
this._events = Object.create(null);
this._eventsCount = 0;
}
this._maxListeners = this._maxListeners || undefined;
};
2.注册监听事件
// 使用
this.ee.on("message", function(text) {
console.log(text);
that.setState({
text: text
});
});
// 调用的是addListener
EventEmitter.prototype.on = EventEmitter.prototype.addListener;
EventEmitter.prototype.addListener = function addListener(type, listener) {
// 注意最后一个参数为false
return _addListener(this, type, listener, false);
};
function _addListener(target, type, listener, prepend) {
var m;
var events;
var existing;
// 判断是否是方法
if (typeof listener !== "function") {
throw ...
}
// this._events为单个EventEmitter对象中,注册事件的总对象,例如:{login:funcation(){xxxx},loginOut:funcation(){}}
events = target._events;
if (events === undefined) {
events = target._events = Object.create(null);
target._eventsCount = 0;
} else {
// To avoid recursion in the case that type === "newListener"! Before
// adding it to the listeners, first emit "newListener".
// 在添加监听时,判断是否有注册type='newListener'的监听,有的话,每_addListener便调用
// newListener
if (events.newListener !== undefined) {
target.emit(
"newListener",
type,
listener.listener ? listener.listener : listener
);
// Re-assign `events` because a newListener handler could have caused the
// this._events to be assigned to a new object
events = target._events;
}
// 获取是否已经注册过了
existing = events[type];
}
if (existing === undefined) {
// Optimize the case of one listener. Don't need the extra array object.
// 没有注册过,赋值
existing = events[type] = listener;
++target._eventsCount;
} else {
if (typeof existing === "function") {
// Adding the second element, need to change to array.
// 如果有相同的type,则将 新,旧listener封装成数组,并且根据prepend
// 决定先后执行顺序
existing = events[type] = prepend
? [listener, existing]
: [existing, listener];
// If we've already got an array, just append.
} else if (prepend) {
existing.unshift(listener);
} else {
existing.push(listener);
}
// Check for listener leak
// 检查listener是否超过最大值,m初始化为10
m = $getMaxListeners(target);
if (m > 0 && existing.length > m && !existing.warned) {
...
}
}
return target;
}
获取
EventEmitter
对象events = target._events;
events == null
进行判断- true: 初始化
events = target._events = Object.create(null); target._eventsCount = 0;
- false:
- 判断是否存在
newListener
- 存在: 调用
target.emit("newListener",xxxx)
- 存在: 调用
existing = events[type];
获取缓存数据,没有为undefined
- 判断是否存在
- true: 初始化
判断
existing === undefined
true: 赋值
existing = events[type] = listener;
++target._eventsCount;
相当于给EventEmitter赋值
{xxxx,'type':listener}
false: 意味着注册了相同的type,将会生成
{xxxx,'type':[listener1,listener2]}
类似对象.ps:
prepend == true
的时候,新listener
,将会排列在数组的最前面.
检查listener是否超过最大值,初始化为10
返回
target
也就是当前EventEmitter
对象.
3.发送事件
// 使用
this.ee.emit("message", "hello world 按钮1");
EventEmitter.prototype.emit = function emit(type) {
var args = [];
// 获取除了type之外的参数,也就是传递参数
for (var i = 1; i < arguments.length; i++) args.push(arguments[i]);
var doError = type === "error";
// this._events为单个EventEmitter对象中,注册事件的总对象,例如:{login:funcation(){xxxx},loginOut:funcation(){}}
var events = this._events;
// 进行error判断 暂时不关注
...
// 获取到type对应的执行函数listener
var handler = events[type];
// 没有执行函数 return
if (handler === undefined) return false;
// 根据是funcation还是数组,分别执行对应的调用函数方法
if (typeof handler === "function") {
ReflectApply(handler, this, args);
} else {
var len = handler.length;
var listeners = arrayClone(handler, len);
for (var i = 0; i < len; ++i) ReflectApply(listeners[i], this, args);
}
return true;
};
// 兼容处理
var ReflectApply =
R && typeof R.apply === "function"
? R.apply
: function ReflectApply(target, receiver, args) {
return Function.prototype.apply.call(target, receiver, args);
};
- 通过
arguments
获取到除type
外其他的传入参数,用于最后调用方法时传递给执行函数 - 错误处理
- 获取到
handler
,并判断是否为undefined
- 根据获取到的
handler
,判断是funcation
还是数组
,分别执行对应的调用函数方法.
4.once解析
// 使用
// 注册
this.ee.once("message3", function(text) {
alert(text);
});
// 发送
this.ee.emit("message3", "按钮3,只调用一次this.ee.once");
EventEmitter.prototype.once = function once(type, listener) {
if (typeof listener !== "function") {
throw ....
}
// 包装 listener
this.on(type, _onceWrap(this, type, listener));
return this;
};
function _onceWrap(target, type, listener) {
var state = {
fired: false,
wrapFn: undefined,
target: target,
type: type,
listener: listener
};
// 将onceWrapper的this绑定为上面创建的state对象
var wrapped = onceWrapper.bind(state);
wrapped.listener = listener;
state.wrapFn = wrapped;
return wrapped;
}
function onceWrapper() {
var args = [];
for (var i = 0; i < arguments.length; i++) args.push(arguments[i]);
if (!this.fired) {
// 判断是否使用过,没使用过的话先删除type--onceWrapper
this.target.removeListener(this.type, this.wrapFn);
this.fired = true;
// 执行listener,并且传递数据
ReflectApply(this.listener, this.target, args);
}
}
包装执行函数
listener
创建
state
对象,将onceWrapper
的this
绑定为state
调用发送事件
emit
后调用到onceWrapper
方法,先删除EventEmitter
对应的type:onceWrapper
,然后执行
state
中的listener
再次发送事件则在
EventEmitter
找不到对应的type
,实现了只能监听一次.
- removeListener解析
- removeAllListeners解析
events.js 源码分析的更多相关文章
- basket.js 源码分析
basket.js 源码分析 一.前言 basket.js 可以用来加载js脚本并且保存到 LocalStorage 上,使我们可以更加精准地控制缓存,即使是在 http 缓存过期之后也可以使用.因此 ...
- Backbone.js源码分析(珍藏版)
源码分析珍藏,方便下次阅读! // Backbone.js 0.9.2 // (c) 2010-2012 Jeremy Ashkenas, DocumentCloud Inc. // Backbone ...
- Require.js 源码分析
本文将简单介绍下个人对require.js的源码分析,简单分析实现原理 一.require加载资源的流程 require中,根据AMD(Asynchronous Module Definition)的 ...
- Vue.js 源码分析(二十八) 高级应用 transition组件 详解
transition组件可以给任何元素和组件添加进入/离开过渡,但只能给单个组件实行过渡效果(多个元素可以用transition-group组件,下一节再讲),调用该内置组件时,可以传入如下特性: n ...
- Vue.js 源码分析(二十二) 指令篇 v-model指令详解
Vue.js提供了v-model指令用于双向数据绑定,比如在输入框上使用时,输入的内容会事实映射到绑定的数据上,绑定的数据又可以显示在页面里,数据显示的过程是自动完成的. v-model本质上不过是语 ...
- Vue.js 源码分析(十六) 指令篇 v-on指令详解
可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码,例如: <!DOCTYPE html> <html lang="en"& ...
- Vue.js 源码分析(十四) 基础篇 组件 自定义事件详解
我们在开发组件时有时需要和父组件沟通,此时可以用自定义事件来实现 组件的事件分为自定义事件和原生事件,前者用于子组件给父组件发送消息的,后者用于在组件的根元素上直接监听一个原生事件,区别就是绑定原生事 ...
- Vue.js 源码分析(三十一) 高级应用 keep-alive 组件 详解
当使用is特性切换不同的组件时,每次都会重新生成组件Vue实例并生成对应的VNode进行渲染,这样是比较花费性能的,而且切换重新显示时数据又会初始化,例如: <!DOCTYPE html> ...
- Vue.js 源码分析(三十) 高级应用 函数式组件 详解
函数式组件比较特殊,也非常的灵活,它可以根据传入该组件的内容动态的渲染成任意想要的节点,在一些比较复杂的高级组件里用到,比如Vue-router里的<router-view>组件就是一个函 ...
随机推荐
- # kubernetes节点不可调度
查看node [root@k8s-masterb ~]# kubectl get nodes NAME STATUS ROLES AGE VERSION k8s-mastera Ready maste ...
- 关于alertmanager报No private IP address found, and explicit IP not provided
./alertmanager --config.file=alertmanager.yml level=info ts=2021-11-22T05:53:11.195Z caller=main.go: ...
- 关于linux下的open()write()read()close()函数
http://blog.sina.com.cn/s/blog_71d1a98701010s0v.html 1.read和write函数调用时,都会记录下当前写的位置,下次调用时就会从这个位置开始读或写 ...
- centOS 7 离线安装 MySQL 5.6 完美安装
centOS 7 离线安装 MySQL 5.6 centOS 7 离线安装 MySQL 5.6 准备环境 1.离线 centOS 7(此处为 centOS 7 最小安装) 2.nginx 安装文件 ( ...
- webapi_3 今天真真真全是大经典案例
这个项目一多起来了,还是分个序号比价好一点,你好我好大家好,然后关于这个标点符号的问题,我打字真的很不喜欢打标点符号,不是不好按,按个逗号其实也是顺便的事情,可能就是养成习惯了,就喜欢按个空格来分开, ...
- Kafka 高效文件存储设计特点?
Kafka把topic中一个parition大文件分成多个小文件段,通过多个小文件段,就容易定期清除或删除已经消费完文件,减少磁盘占用. 通过索引信息可以快速定位message和确定response的 ...
- 为什么线程通信的方法 wait(), notify()和 notifyAll()被定 义在 Object 类里?
Java 的每个对象中都有一个锁(monitor,也可以成为监视器) 并且 wait(),notify() 等方法用于等待对象的锁或者通知其他线程对象的监视器可用.在 Java 的线程中 并没有可供任 ...
- linux java7升级到java8
转自:https://blog.csdn.net/u010199866/article/details/81744382 linux java7升级到java8 版权 1.第一步先卸载所有老的jd ...
- 路径规划—BUG算法
- poj_1852_Ants(复杂问题简单化)
原题传送门 描述 一群蚂蚁走在长度为l cm的水平细杆上,以1cm/s的匀速.当一只行走的蚂蚁到达杆的一端,它就会掉下去.当两只蚂蚁相遇,它们会掉头像反方向走去.我们知道一只蚂蚁在杆上的初始位置,然而 ...