Как правильно написать функционал подписки на события как addEventListener или .on в jQuery?

Question

[Макс]

Здравствуйте!
Написал подобный функционал:

class SomeClass{
    // тут определенные условия когда должны запускаться коллбеки
    eventTrigger(){
        //...
        this.onType1.bind(this)(data);
        //...
        //...
        this.onType2.bind(this)(data);
        //...
        //...
        this.onType3.bind(this)(data);
        //...
    }
    // добавление коллбеков событий
    on(event, callback){

        switch (event) {

            case 'eventType1':

                this.callbacksType1.push(callback);

                break;

            case 'eventType2':

                this.callbacksType2.push(callback);

                break;

            case 'eventType3':

                this.callbacksType3.push(callback);

                break;
        }
    }
    // выполнение коллбеков для eventType1
    onType1(...args){

        if(this.callbacksType1.length)
            for(let func of this.callbacksType1)
                    func.apply(this, args);
    }
    // выполнение коллбеков для eventType2
    onType2(...args){

        if(this.callbacksType2.length)
            for(let func of this.callbacksType2)
                    func.apply(this, args);
    }
    // выполнение коллбеков для eventType3
    onType3(...args){

        if(this.callbacksType3.length)
            for(let func of this.callbacksType3)
                    func.apply(this, args);
    }

    constructor(){
        //...
            this.callbacksType1 = [];
            this.callbacksType2 = [];
            this.callbacksType3 = [];
        //...
    }
}

const someClass = new SomeClass();

    someClass.on('eventType1', (data)=> {
        //...
        console.log('eventType1 triggered', data);
    });

    someClass.on('eventType2', (data) => {
        //...
        console.log('eventType2 triggered', data);
    });

    someClass.on('eventType3', (data) => {
        //...
        console.log('eventType3 triggered', data);
    });

Как все это упростить и обобщить, чтобы не создавать одинаковый код в функциях onType1, onType2, ...onTypeN ?

Answer 1

[Stockholm Syndrome]

class SomeClass {
  callbacks = []; 

  
  on(eventType, cb) {
    this.callbacks.push({
      type: eventType, 
      callback: cb
    });
  }


  emit(type, ...args) {
    this.callbacks
      .filter((n) => n.type === type)
      .forEach((n) => n.callback.call(this, ...args));
  }
}

Answer 2

[RAX7]

class EventsBus {
  constructor() {
    this._callbacks = {};
    this._id = 1;
  }

  emmit(eventType, data) {
    if (!this._callbacks[eventType]) {
      return;
    }
    this._callbacks[eventType].forEach(item => item.cb(data));
  }

  on(type, callback) {
    if (!this._callbacks[type]) {
      this._callbacks[type] = [];
    }

    const id = this._id++;
    this._callbacks[type].push({
      id: id,
      cb: callback,
    });
    return { id, type: type };
  }

  revoke(prop) {
    const { type, id } = prop;

    if (!this._callbacks[type]) return;

    const index = this._callbacks[type].findIndex(item => item.id === id);
    if (index !== -1) {
      this._callbacks[type].splice(index, 1);
    }
  }
}

const bus = new EventsBus();

bus.on('hello', (data) => console.log('hello', data));

const evt1 = bus.on('boom', (data) => console.log('boom1', data));
const evt2 = bus.on('boom', (data) => console.log('boom2', data));
const evt3 = bus.on('boom', (data) => console.log('boom3', data));

bus.revoke(evt1);

bus.emmit('boom', 42);
bus.emmit('hello', '!!!');