EventEmitter是Node.js的内置模块events提供的一个类,它是Node事件流的核心,EventEmitter是服务端的东西,
前端已经有event-emitter的npm库
地址: https://www.npmjs.com/package/event-emitter
高级浏览器也有原生提供的EventTarget这种实现事件监听和触发的API
地址: https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget
但是它们和Node.js的事件API都有或多或少的区别,今天我们就来实现一个前端版本的EventEmitter
我本章demo的github地址如下
https://github.com/penghuwan/event-emitter
我们要实现的API有:
为了保证兼容性和简单性,下面的编码全部基于ES5语法实现
首先我们需要写一个EventEmitter构造函数,给它设置两个属性listeners和maxListener
function EventEmitter() {
this.listeners = {};
this.maxListener = 10;
}
listeners用于存放事件监听器函数,结构如下:
{
"event1": [f1,f2,f3],
"event2": [f4,f5],
...
}
而maxListener 是设置的某个事件能够添加的监听器的最大数量,超过这个值,需要在控制台输出警告,但不会报错阻止。按照Node的设计,这个值能够通过setMaxListeners动态调整
EventEmitter.prototype.on = function (event, cb) {
var listeners = this.listeners;
if (listeners[event] && listeners[event].length >= this.maxListener) {
throw console.error('监听器的最大数量是%d,您已超出限制', this.maxListener)
}
if (listeners[event] instanceof Array) {
if (listeners[event].indexOf(cb) === -1) {
listeners[event].push(cb);
}
} else {
listeners[event] = [].concat(cb);
}
}
EventEmitter.prototype.addListener = EventEmitter.prototype.on;
EventEmitter.prototype.emit = function (event) {
var args = Array.prototype.slice.call(arguments);
args.shift();
this.listeners[event].forEach(cb => {
cb.apply(null, args);
});
}
EventEmitter.prototype.removeListener = function (event, listener) {
var listeners = this.listeners;
var arr = listeners[event] || [];
var i = arr.indexOf(listener);
if (i >= 0) {
listeners[event].splice(i, 1);
}
}
once方法是on方法和removeListener方法的结合:用on方法监听,在回调结束的最后位置,通过removeListener删掉监听函数自身
EventEmitter.prototype.once = function (event, listener) {
var self = this;
function fn() {
var args = Array.prototype.slice.call(arguments);
listener.apply(null, args);
self.removeListener(event, fn);
}
this.on(event, fn)
}
清空listeners[event]数组
EventEmitter.prototype.removeAllListener = function (event) {
this.listeners[event] = [];
}
EventEmitter.prototype.listeners = function (event) {
return this.listeners[event];
}
EventEmitter.prototype.setMaxListeners = function (num) {
this.maxListener = num;
}