Book
Search…
⌃K

Simple eventEmitter

实现目标

Event.on("test", function(result) {
console.log(result);
})
Event.on("test", function(result) {
console.log("test");
})
Event.emit("test", "hello world");
  1. 1.
    监听事件
  2. 2.
    发出事件
  3. 3.
    事件队列

思路

实现一个对象,监听方法on将事件加入到队列中,触发方法emit将找到对应的队列中的事件,并触发回调。

对象实现

let Event = {}; //
Object.defineProperty(Event, "_cbQueue", {
value: {},
writable: true,
enumerable: false, //将枚举设置为false,防止在copy属性的时候,不会被复制。
configurable: true
});
Event.on = function (type, handler) {
this._cbQueue = this._cbQueue || {};
this._cbQueue[type] = this._cbQueue[type] || [];
this._cbQueue[type].push(handler);
return this;
}
Event.emit = function (type, data) {
if (this._cbQueue[type]) {
this._cbQueue[type].forEach(cb => {
cb(data);
});
}else {
throw new Error('not found custom event : ' + type)
}
}
Event.off = function (type, handle) {
var handles = this._cbQueue[type];
if (handles) {
if (!handle) {
this._cbQueue[type] = [];
} else {
for (var i = 0; i < handles.length; i++) {
if (handles[i] === handle) {
this._cbQueue[type].splice(i, 1);
}
}
}
}
}
module.exports = Event;

ES6 Class 实现

class Event {
constructor() {
this._cbQueue = {};
}
on(type, handler) {
if (!this._cbQueue[type]) {
this._cbQueue[type] = [handler]
}else{
this._cbQueue[type].push(handler)
}
}
emit(type, data) {
if (this._cbQueue[type]) {
this._cbQueue[type].forEach(cb => {
cb(data)
});
} else {
throw new Error('not found custom event : ' + type)
}
}
off(type, handler) {
const handles = this._cbQueue[type];
if (handles) {
if (!handler) {
this._cbQueue[type] = [];
} else {
for (var i = 0; i < handles.length; i++) {
if (handles[i] === handler) {
this._cbQueue[type].splice(i, 1);
}
}
}
}
}
}
module.exports = Event
Last modified 3yr ago