Skip to content
导航栏

事件总线

  • constructor(): 这是一个构造函数,在生成对象时会自动调用。这里初始化了一个名为events的Map对象,用来存储所有的事件和对应的监听器。
  • on(type, fn): 这个方法是用来监听一个名为type的事件,当该事件被触发时,会调用相应的处理函数fn
  • emit(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