实现EventHub
image.png
在文件1中的f1需要在某种情况下调用文件2中的f2, 用全局变量是不好的，此时可以通过创建一个EventHub,在f1中emit一个事件，然后f2接收到这个事件后，进行相应的操作。
on 和 emit
/src/index.ts
class EventHub {
cache: { [key: string]: Array<(data: unknown) => void> } = {};
// {'报社1':[f1,f2,f3],'报社2':[f11,f22,f33]}
on(eventName: string, fn: (data: unknown) => void) {
// eventName = 报社1, fn
if (this.cache[eventName] === undefined) {
this.cache[eventName] = [];
}
const array = this.cache[eventName];
array.push(fn);
}
emit(eventName:string) {
let array = this.cache[eventName];
if (array === undefined) {
array = [];
}
array.forEach((fn) => {
fn();
});
}
}
export default EventHub;
/test/index.ts
import EventHub from '../src/index';
const eventHub = new EventHub();
let called = false;
eventHub.on('xxx', () => {
console.log('被调用');
called = true;
console.log('called:' + called);
});
eventHub.emit('xxx');
此时called经过eventHub的调用，顺利变为true
class EventHub {
cache: { [key: string]: Array<(data: unknown) => void> } = {};
// {'报社1':[f1,f2,f3],'报社2':[f11,f22,f33]}
on(eventName: string, fn: (data: unknown) => void) {
// eventName = 报社1, fn
this.cache[eventName] = this.cache[eventName] || [];
this.cache[eventName].push(fn);
}
emit(eventName: string, data?: unknown) {
(this.cache[eventName] || []).forEach((fn) => fn(data));
}
}
export default EventHub;
简化emit和on中的逻辑，通常情况下emit中还需传递一个data的参数，我们通过在on中console.assert来断言data的顺利传递
import EventHub from '../src/index';
const eventHub = new EventHub();
const test1 = () => {
eventHub.on('xxx', (y) => {
console.log('被调用');
console.assert(y === 'data1');
});
eventHub.emit('xxx', 'data1');
};
test1()
此时，我们在on中接受的参数!== 'data1',得到了Assertion failed的错误
off操作
/test/index.ts
const test2 = () => {
const eventHub2 = new EventHub();
let called2 = false;
const fn1 = eventHub2.on('yyy', () => {
called2 = true;
});
eventHub2.off('yyy', fn1);
eventHub2.emit('yyy', fn1);
setTimeout(() => {
console.log('--called2---');
console.log(called2);
}, 1000);
};
test2()
创建一个eventHub2,在监听一个事件后，马上取消该事件，called2将不会被修改
/src/index.ts
off(eventName: string, fn) {
// 把fn从this.cache[eventName]中删除
let index;
this.cache[eventName] = this.cache[eventName] || [];
for (let i = 0; i < this.cache[eventName].length; i++) {
if (this.cache[eventName][i] === fn) {
index = i;
break;
}
}
if (index === undefined) {
return;
}
this.cache[eventName].splice(index, 1);
}
我们从cache[eventName]中移除fn方法
此时，我们能从顺利看到called2没有被赋值为true
