事件总线
constructor()
: 这是一个构造函数,在生成对象时会自动调用。这里初始化了一个名为events的Map对象,用来存储所有的事件和对应的监听器。on(type, fn)
: 这个方法是用来监听一个名为type的事件,当该事件被触发时,会调用相应的处理函数fnemit(type, ...args)
: 这个方法是用来触发一个名为type的事件,并且会将args作为参数传递给处理函数。这里用到了ES6的扩展运算符。off(type)
: 这个方法是用来移除一个名为type的事件。once(type, fn)
: 这个方法也是用来监听一个名为type的事件,但是这个事件只会被触发一次,触发后就会被自动移除。
js
class EventBus {
constructor() {
this.events = this.events || new Map();
}
// 监听事件
on(type, fn) {
if(!this.events.get(type)) {
this.events.set(type, fn);
}
}
// 触发事件
emit(type, ...args) {
let handler;
if(this.events.get(type)) {
handler = this.events.get(type);
handler.apply(this, args);
}
}
// 移除事件
off(type) {
let handler = this.events.get(type);
if(handler) {
this.events.delete(type);
}
}
// 只监听一次
once(type, fn) {
const onceWrapper = (...args) => {
fn.apply(this, args);
this.off(type);
}
this.on(type, onceWrapper);
}
}
// 使用示例
let bus = new EventBus();
bus.on('greet', (name) => {
console.log(`Hello, ${name}!`);
});
bus.emit('greet', 'World'); // Hello, World!
bus.off('greet');
bus.emit('greet', 'World'); // Nothing will happen
bus.once('greetOnce', (name) => {
console.log(`Hello, ${name}! This will not be shown next time.`);
});
bus.emit('greetOnce', 'World'); // Hello, World! This will not be shown next time.
bus.emit('greetOnce', 'World'); // Nothing will happen