My Little World

实现一个 EventEmitter

实现一个 EventEmitter

EventEmitter 模块,它是一个类,它的实例具有以下几个方法:on、emit、off:
on(eventName, func):监听 eventName 事件,事件触发的时候调用 func 函数。
emit(eventName, arg1, arg2, arg3…):触发 eventName 事件,并且把参数 arg1, arg2, arg3… 传给事件处理函数。
off(eventName, func):停止监听某个事件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
class EventEmitter {
/* TODO */
constructor() {
this.listeners = [];
}

on(eventName, func){
for(let i=0;i<this.listeners.length;i++){
if(this.listeners[i].name === eventName){
this.listeners[i].funcs.push(func);
return
}
}
this.listeners.push({
name:eventName,
funcs:[]
})
this.listeners[this.listeners.length-1].funcs.push(func)
}
emit(eventName, ...args){
for(let j=0;j<this.listeners.length;j++){
if(this.listeners[j].name === eventName){
for(let k =0;k<this.listeners[j].funcs.length;k++){
this.listeners[j].funcs[k](args)
}
}
}
}
off(eventName, func){
for(let j=0;j<this.listeners.length;j++){
if(this.listeners[j].name === eventName){
if(func == undefined){ //整个事件不再监听
this.listeners.splice(j,1);
}
for(let k =0;k<this.listeners[j].funcs.length;k++){
if(func === this.listeners[j].funcs[k]){
this.listeners[j].funcs.splice(k,1);
return
}
}
}
}
}
}

const emitter = new EventEmitter()
const sayHi = (name) => console.log(`Hello ${name}`)
const sayHi2 = (name) => console.log(`Good night, ${name}`)

emitter.on('hi', sayHi)
emitter.on('hi', sayHi2)
emitter.on('hi2', sayHi)
emitter.on('hi2', sayHi2)
emitter.emit('hi', 'ScriptOJ')
// => Hello ScriptOJ
// => Good night, ScriptOJ

emitter.off('hi', sayHi)
emitter.emit('hi', 'ScriptOJ')
emitter.emit('hi2', 'ScriptOJ')

const emitter2 = new EventEmitter()
emitter2.on('hi', (name, age) => {
console.log(`I am ${name}, and I am ${age} years old`)
})
emitter2.emit('hi', 'Jerry', 12)