Как сделать кастомную систему событий?

Question

[Лев Александров]

У меня есть такой вот класс для попапов, который я переношу из проекта в проект.
Недавно добавил возможность подписываться на события, например, показа или скрытия попапа, чтобы выполнять какие-то действия.

Но я подумал, что такую систему можно было бы использовать в других классах, например, в аккордеоне, в табах и пр. Не хотелось бы каждому классу писать одни и те же методы .on, .off, .emit и т. д. и поле .eventListeners.

Как бы всё это красиво организовать, выделить в отдельный модуль и подключать во всех классах? Как назвать такой модуль?

class Popup {
    static active = null;

    constructor($element) {
        this.$container = $element;
        this.$triggers = document.querySelectorAll(`[data-popup=${$element.id}]`);
        this.$closer = $element.querySelector(".popup__closer");
        this.eventListeners = {};

        this.listenEvents();
    }

    listenEvents() {
        for (const trigger of this.$triggers) {
            trigger.addEventListener("click", this.onTriggerClick.bind(this));
        }

        this.$closer.addEventListener("click", this.hide.bind(this));
        this.$container.addEventListener("click", this.onContainerClick.bind(this));

        document.addEventListener("keydown", this.onKeyDown.bind(this));
    }

    show() {
        this.$container.classList.add("active");

        Popup.active = this;

        this.emit("show");
    }

    hide() {
        this.$container.classList.remove("active");

        Popup.active = null;

        this.emit("hide");
    }

    emit(eventName) {
        if (!this.eventListeners[eventName]) {
            this.eventListeners[eventName] = new Set();
        }

        for (const eventHandler of this.eventListeners[eventName]) {
            eventHandler(this);
        }
    }

    on(eventName, eventHandler) {
        if (!this.eventListeners[eventName]) {
            this.eventListeners[eventName] = new Set();
        }

        this.eventListeners[eventName].add(eventHandler);
    }

    off(eventName, eventHandler) {
        if (!this.eventListeners[eventName]) {
            return;
        }

        this.eventListeners[eventName].delete(eventHandler);
    }

    onTriggerClick({currentTarget}) {
        this.$trigger = currentTarget;

        this.show();
    }

    onContainerClick({target, currentTarget}) {
        if (target === currentTarget) {
            this.hide();
        }
    }

    onKeyDown({key}) {
        if (!Popup.active || key !== "Escape") {
            return;
        }

        Popup.active.hide();
    }
}

export default Popup;

Пример использования:

const feedbackPopup = new Popup(document.getElementById("feedbackPopup"));

feedbackPopup.on("show", popup => {
    // ...
});

Answer 1

[Сергей Соколов]

Trait'ов в JavaScript не завезли, к сожалению. Поэтому только наследоваться от этого класса, наверное.

Первый из принципов SOLID требует, чтобы у класса было единственное предназначение. Не стоит делать из класса швейцарский набор зубочисток.

Для событийного вдохновения посмотрите библиотеку RxJS – займёт на какое-то время )

Comments

[Лев Александров]

Спасибо большое, как-нибудь гляну доку этой библиотеки, может, почерпну что-нибудь еще для себя

Answer 2

[Rsa97]

Подключайте как миксин

const Eventable = (Base) => class extends Base {
  // Здесь ваши общие свойства и методы для событий
};

const Popup = Eventable(
  class {
    // Здесь основная часть класса
  },
);
или
class Popup extends Eventable(
  class {
    // Здесь основная часть класса
  },
) { };

Comments

[Сергей Соколов]

mixin'ы вроде поизящнее делаются:

// mixin
let sayHiMixin = {
  sayHi() {
    alert(`Hello ${this.name}`);
  },
  sayBye() {
    alert(`Bye ${this.name}`);
  }
};

// usage:
class User {
  constructor(name) {
    this.name = name;
  }
}

// copy the methods
Object.assign(User.prototype, sayHiMixin);

// now User can say hi
new User("Dude").sayHi(); // Hello Dude!

[Rsa97]

Сергей Соколов, Миксины по разному делаются. Это функциональные миксины:

const Harvestable = (Base) => class extends Base {
  harvest() { console.log('Harvesting'); }
};
const Waterable = (Base) => class extends Base {
  water() { console.log('Watering'); }
};
const Repottable = (Base) => class extends Base {
  repot() { console.log('Repotting'); }
};

class Plant { }

class Flower extends Waterable(Repottable(Plant)) { }
class Vegetable extends Waterable(Harvestable(Plant)) { }
class Fruit extends Waterable(Repottable(Harvestable(Plant))) { }

const daffodil = new Plant();
daffodil.harvest(); // undefined

const banana = new Fruit();
banana.harvest(); // Harvesting

[Лев Александров]

Ого, не слышал про миксины, попробую попрактиковаться с ними. Спасибо большое

[Лев Александров]

Сергей Соколов, кстати, в вашем примере быстрее понял, в чем суть

[Лев Александров]

Rsa97, Сергей Соколов, еще часто в библиотеках на глаза попадается такая штука как EventDispatcher. Не могли бы в 2-х словах рассказать что это и нужно ли оно здесь? Я думал это то, о чем мне подскажут здесь исходя из моего вопроса, но нет.

[Rsa97]

Лев Александров, Суть в том, что создаётся единый диспетчер сообщений, иногда называемый общей шиной (EventBus).
Каждый, кто хочет получать сообщения, подписывается в диспетчере, указывая идентификатор отправителя сообщений, типы сообщений и каллбэк-функцию, вызываемую при поступлении сообщений.
Отправитель отправляет сообщение в диспетчер, указывая свой идентификатор, тип сообщения и, возможно, данные.
Диспетчер вызывает все каллбэки, ожидающие сообщение такого типа от данного отправителя, передавая им данные.
Зачастую, диспетчер позволяет в каллбэках модифицировать данные и/или остановить обработку цепочки рассылки сообщения.

В получателе:

Dispatcher.addListener('HelloPopup', 'beforeShow', onBeforeShow);

В отправителе:
Dispatcher.dispatch('HelloPopup', 'beforeShow');

[Лев Александров]

Rsa97, интересно. Спасибо за разъяснения, примерно уловил!

[Лев Александров]

Получается каждый раз при добавлении миксина будет создавать новый класс? Это же ужасно