# 如何实现一个简易的 evenBus?
# 废话不多说,直接上代码 👇
export default class EvenBus {
constructor(maxListeners) {
this._events = this._events || new Map(); // 储存事件/回调键值对
this._listeners = this._listeners || 0; // 当前监听数量
this._maxListeners = maxListeners || 10; // 设立监听上限
}
// 监听
on = (type, fn) => {
let handle = this._events.get(type);
if (!handle) {
this._events.set(type, fn);
} else if (handle && typeof handle === "function") {
// 如果handle是函数说明只有一个监听者
this._events.set(type, [handle, fn]);
} else {
handle.push(fn);
}
this.getListeners(type);
};
// 触发
emit = (type, ...args) => {
let handle = this._events.get(type);
// 多个回调说明有多个监听
if (Array.isArray(handle)) {
for (let fn of handle) {
if (args.length > 0) {
fn.apply(this, args);
} else {
fn.call(this);
}
}
} else {
if (args.length > 0) {
handle.apply(this, args);
} else {
handle.call(this);
}
}
};
// 移除
remove = type => {
if (type) {
this._events.delete(type);
} else {
this._events.clear();
}
};
// 计算当前监听数
getListeners = type => {
if (type) this._listeners++;
if (this._listeners > this._maxListeners)
throw "The current number of listens is greater than the maximum number";
else return true;
};
}
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
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
# 使用 rollup 发布 npm,可 👉如何使用 rollup 构建代码?
← 数组去重 箭头函数与普通函数的区别 →