Понимание шаблона проектирования PubSub в JavaScript
В JavaScript многие действия управляются событиями. В нашей повседневной практике мы часто используем такие события и действия. onClick onChange являются примерами некоторых событий, и мы выполняем определенные действия всякий раз, когда эти события происходят.
Используя Pub/Sub, мы можем использовать этот подход, основанный на событиях, и представить его в нашей логической части приложения. Чтобы изолировать бизнес-логику от нашего прикладного уровня.
Прежде чем перейти к коду, давайте разберемся с Pub/Sub по аналогии с подпиской на рассылку. Предположим 🤔 у нас есть подписка на рассылку новостей. Всякий раз, когда публикуется новая статья, свежеиспеченная ♨️ статья доставляется на наш почтовый ящик 📧. Наш почтовый ящик отвечает на событие и обрабатывает полученное уведомление.
Аналогично в шаблоне PubSub мы подписываемся на событие по некоторому уникальному идентификатору (userDefined). И всякий раз, когда событие публикуется с идентификатором события, все обработчики, подписавшиеся на это событие, запускаются. 🚀.
Начальный скелет Pub/Sub ☠️ выглядит так
Объект cache используется как контейнер всех опубликованных и подписанных методов. Его форму можно определить как {eventId:[Array of callbacks]} .
Сначала заполним метод sub. В sub сначала я хочу проверить, подписываюсь ли я на событие в первый раз. Если я оформляю подписку в первый раз, то я напрямую назначу свой обратный вызов объекту cache, соответствующему переданному eventId, иначе я нажму callback в моем объекте cache, соответствующему переданному eventId. Поскольку у меня может быть более одной подписки на определенные события. После этого наш код будет выглядеть так:
Прежде чем перейти к методу pub, мы должны понять несколько концепций javascript:
👆🏻 arguments массив: каждая функция в JavaScript имеет специальную переменную arguments, подобную массиву, которая содержит все аргументы, переданные в функцию.
✌️ Методы call и apply можно использовать для вызова (вызова) метода с объектом-владельцем в качестве аргумента (параметра). Они встроены в JavaScript.
Теперь давайте перейдем к нашему методу pub:
Давайте заполним последнюю часть, т.е. метод unsub:
Как использовать это: (версия узла)
- Создайте файл с именем
product.js. Издатель . Добавьте следующий код:
- Создайте файл с именем
cart.js. Добавьте следующий код
- Создайте файл с именем
app.js. Основная точка входа или родительский файл. Добавьте следующий код:
Расширение функциональности: если вы вызываете product.onAdd() перед импортом cart . Тогда ваша подписка на cart не будет вызываться при ее импорте. Пример:
Мы можем решить эту проблему, расширив возможности pub/sub. Для этого нам просто нужно изменить форму нашего объекта cache и сделать дополнительную итерацию в методе sub.
