В мире 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);

Если вы считаете, что эта статья помогает, пожалуйста, проголосуйте за меня.

Спасибо и получайте удовольствие от кода~