美文网首页
每日一条JS精华片段:创建一个发布/订阅 事件器

每日一条JS精华片段:创建一个发布/订阅 事件器

作者: _夏之_ | 来源:发表于2020-09-08 20:11 被阅读0次

    创建一个发布/订阅事件器,拥有emit,on和off方法。

    Javascript方法

    const createEventHub = () => ({
      hub: Object.create(null),
      emit(event, data) {
        (this.hub[event] || []).forEach(handler => handler(data));
      },
      on(event, handler) {
        if (!this.hub[event]) this.hub[event] = [];
        this.hub[event].push(handler);
      },
      off(event, handler) {
        const i = (this.hub[event] || []).findIndex(h => h === handler);
        if (i > -1) this.hub[event].splice(i, 1);
        if (this.hub[event].length === 0) delete this.hub[event];
      }
    });
    

    示例

    const handler = data => console.log(data);
    const hub = createEventHub();
    let increment = 0;
    
    // 订阅:监听不同类型的事件 
    hub.on('message', handler);
    hub.on('message', () => console.log('Message event fired'));
    hub.on('increment', () => increment++);
    
    // 发布
    hub.emit('message', 'hello world'); // 会打印出 'hello world' 和 'Message event fired'
    hub.emit('message', { hello: 'world' }); // 会打印出这个对象 和'Message event fired'
    hub.emit('increment'); // `increment`变量现在为1
    
    // 取消订阅:停止监听'message'事件 
    hub.off('message', handler);
    

    请关注我,每天获得一条精华小片段!

    相关文章

      网友评论

          本文标题:每日一条JS精华片段:创建一个发布/订阅 事件器

          本文链接:https://www.haomeiwen.com/subject/qmvjektx.html