日常的学习笔记，包括 ES6、Promise、Node.js、Webpack、http 原理、Vue全家桶，后续可能还会继续更新 Typescript、Vue3 和 常见的面试题 等等。
Events模块
Events 模块是Node最重要的模块，它提供了一个属性 EventEmitter，EventEmitter 的核心是事件发射与事件监听器。
Node中大部分的模块，都继承自 Events 模块。
Events模块是Node对 发布订阅模式（publish/subscribe）的实现。一个对象通过这个模块，向另一个对象传递消息。- 该模块通过
EventEmitter属性，提供了一个构造函数。该构造函数的实例具有on方法，可以用来监听指定事件，并触发回调函数。 - 任意对象都可以发布指定事件，被
EventEmitter实例的on方法监听到。
发布订阅模式
关于 发布订阅模式 ，可以参考我之前的博客文章。
关于 Events 中的发布订阅模式，我们要先清楚它的几个常用方法。
- 订阅方法：
on方法用来订阅事件，订阅是将方法对应成一种一对多的关系。 - 发布方法：
emit用来执行订阅的事件。 - 取消订阅：
off方法可以移除对应的事件监听。 - 订阅一次：
once绑定事件当执行后自动删除订阅的事件。
on 和 emit
on 方法的第一个参数用来设定类名，第二个参数也是一个函数，里面可以接收发布时传入的参数。
emit 方法第一个参数是类名，之后的参数都是传入 on 方法函数中的参数。
on 和 emit 具体应用可以参考下面这个简单的Demo。
const EventEmitter = require('events');
// 自定义一个 构造函数
function Cat() {}
// 原型继承 需要通过实例来调用继承方法
Object.setPrototypeOf(Cat.prototype, EventEmitter.prototype);
let cat = new Cat();
const sleep = (a, b) => {
console.log(a, '睡');
};
const eat = (a, b) => {
console.log(b, '吃');
};
cat.on('猫咪', sleep)
cat.on('猫咪', eat)
setTimeout(() => {
// 小胡子 吃
// 小胖仙 睡
cat.emit('猫咪', '小胖仙', '小胡子')
}, 1000);
现在我们可以实现一套 on 和 emit 方法。
function EventEmitter() {
this._event = {}
}
// on 方法
EventEmitter.prototype.on = function (eventName, callBack) {
if (!this._event) {
this._event = {}
}
if (this._event[eventName]) {
this._event[eventName].push(callBack) // 相当于 {eventName:[fn1,fn2]}
} else {
this._event[eventName] = [callBack]; // 相当于 {eventName:[fn1]}
}
}
// emit 方法
EventEmitter.prototype.emit = function (eventName, ...args) {
this._event[eventName].forEach(fn => {
fn(...args)
});
}
off
off 方法的第一个参数用来设定类名，第二个参数传入需要被移除的函数回调。
// ...
setTimeout(() => {
// 小胡子 吃
// 小胖仙 睡
cat.emit('猫咪', '小胖仙', '小胡子')
cat.off('猫咪', sleep);
// 小胡子 吃
cat.emit('猫咪', '小胖仙', '小胡子')
}, 1000);
这样我们可以大概判断出来，移除掉和我们传入函数相同的函数，我们很快想到 filter 方法。
// off 方法
EventEmitter.prototype.off = function (eventName, callBack) {
if (this._event && this._event[eventName]) {
this._event[eventName] = this._event[eventName].filter(
fn => fn !== callBack && fn.c !== callBack // fn.c参考下面的once方法实现
)
}
}
once
once 方法的第一个参数用来设定类名，第二个参数传入只需要执行一次的函数回调。
// ...
const demolition =() => {
console.log('拆家');
}
cat.once('猫咪', demolition)
setTimeout(() => {
// ...... 拆家
cat.emit('猫咪', '小胖仙', '小胡子')
}, 1000);
这样我们可以根据之前实现的 on 和 off 来实现此方法。
// once 方法
EventEmitter.prototype.once = function (eventName, callBack) {
const one = () => {
callBack();
this.off(eventName, one);
}
this.on(eventName, one);
}
看起来这个方法好像没有什么问题，执行起来也全都是正确的。
但是在一种特殊情况下的时候，还是出现了错误。
那种情况就是如果我们在执行 once 方法之前，就已经通过 off 方法将其移除了。
我们实现的方法就不能实现这个需求了，所以我们还需要对 once 方法进行一些修改 （ off 方法已经处理过了）。
添加一个自定义属性，用来对函数进行 “缓存” 。
EventEmitter.prototype.once = function (eventName, callBack) {
const one = () => {
// ...
}
one.c = callBack; // 自定义一个属性
// ...
}
这样我们就实现了 once 方法。
本篇文章由 莫小尚 创作，文章中如有任何问题和纰漏，欢迎您的指正与交流。
您也可以关注我的 个人站点、博客园 和 掘金，我会在文章产出后同步上传到这些平台上。
最后感谢您的支持！
