В мире JavaScript существует множество шаблонов проектирования, и каждый из них был изобретен для решения конкретных проблем, с которыми мы сталкиваемся много лет назад и по сей день. Шаблон Publish-Subscribe является одним из них.
Когда мы хотим получать данные во время завершения события в разных файлах, хорошим выбором будет шаблон Pub-Sub.
Для одного издателя существует несколько подписчиков, что означает, что несколько файлов или объектов могут подписаться на имя события, и когда издатель публикует данные, все подписчики получают данные немедленно.
Давайте начнем и посмотрим, как выглядит код:
Создаем класс с именем YLNotificationMessages, и там есть конструктор, и мы создаем переменную события self.event, которая будет включать в себя все события и обратные вызовы.
class YLNotificationMessages { constructor () { this.events = {}; } }
И мы создаем функцию подписки, которая подпишется на все обратные вызовы с именем своего события, если имя события существует, а затем поместит обратный вызов в этот список событий.
subscribe (eventName, callback) { if (!this.events[eventName]) { this.events[eventName] = [callback]; } else { this.events[eventName].push(callback); } }
А затем мы создаем функцию публикации с аргументами: (имя события, аргументы) и используем имя события, чтобы узнать функцию обратного вызова и передать ей аргументы и, наконец, немедленно вызвать функцию.
forEach является циклом for и вызывает функцию с аргументами во время цикла. cb(…args) очень важен, потому что он вызывает функцию.
publish (eventName, …args) { this.events[eventName] && this.events[eventName].forEach(cb => cb(…args)); }
Затем мы собираемся найти обратный вызов в соответствии с его именем события и удалить его из списка событий. Мы используем метод фильтра, который отфильтрует все несопоставленные методы, а затем сохранит совпавшие методы.
unsubscribe (eventName, callback) { if (this.events[eventName]) { this.events[eventName].filter(cb => cb != callback); } }
Наконец, зарегистрируйте класс YLNotificationMessages для объектов Windows как вызов в JavaScript.
window[“YLNotificationMessages”] = new YLNotificationMessages();
Полный код выглядит так, как показано ниже, вы можете щелкнуть здесь, чтобы открыть его на главной странице Github.
Мы определили наш класс Pub-Sub Pattern и как мы используем его в нашем коде?
Всякий раз, когда вы хотите подписаться на определенные файлы, функции или модули, это выглядит следующим образом:
window.YLNotificationMessages.subscribe("ReceiveMessages", function(data) { console.log(data); });
Функцию подписки можно вызывать во многих местах проекта с одним именем события «ReceiveMessages», и вы можете определить несколько имен событий по своему желанию.
Как публиковать события, чтобы подписчики получали? Фрагмент кода выглядит так, как показано ниже, вы просто вызываете функцию «публикации» в окне, и все подписчики получат переменную значений «данные».
var data = { "user_id": 28648, "user_name": "jd", "user_language": "en", "user_uuid": "8b3d1204-e2ee-11e9-9d7c-1f8e47066aae", "user_email": "[email protected]", "user_avatar": "https://google.com/icon.png" }; window.YLNotificationMessages.publish("ReceiveMessages", data);
Если вы считаете, что эта статья помогает, пожалуйста, проголосуйте за меня.
Спасибо и получайте удовольствие от кода~