Design Pub Sub Pattern в ванили JS

Паттерн издателя/абонента или «pubsub» – это дизайн -шаблон, который позволяет нам создавать мощные динамические приложения с модулями, которые могут общаться друг с другом, не зависящие друг от друга.

Чтобы реализовать это, нам нужно-

Метод издателя
Метод абонента
Некоторое место для хранения обратных вызовов и событий, которые зарегистрированы от подписчиков

Итак, мы идем –

// publisher
// Subscriber
// unsubscribe
// Some place to store callbacks that are registered from subscribers.

function pubSub() {

  // object which will track of all events and subscription
  const subscribers = {}

  // Publisher: 
  function publish(eventName, data) {

    // return if event is not subscribed
    if (!Array.isArray(subscribers[eventName])) {
      return
    }

    // Whenever you publish any event, it will trigger callback for all stored event in subscriber object
    subscribers[eventName].forEach((callback) => {
      callback(data)
    })
  }

  // Subscriber
  function subscribe(eventName, callback) {

    if (!Array.isArray(subscribers[eventName])) {
      subscribers[eventName] = []
    }
    //on subscribe we will we will push callback to subscribers[eventName] array
    subscribers[eventName].push(callback);
    const index = subscribers[eventName].length - 1

    // subscribed callbacks to be removed when they are no longer necessary.
    return {
      unsubscribe() {
        subscribers[eventName].splice(index, 1);
      },
    }
  }

  return {
    publish,
    subscribe,
  }
}

Реализация PubSub обычно наблюдается в том, где есть –

Существует такая портлет, где есть несколько портлетов, которые общаются с помощью автобуса событий.
Это помогает в создании в архитектуре Aync. В системе, омраченной жесткой связью, Pubsub является механизмом, который помогает в общении между различными модулями.

Это очень важная концепция с точки зрения интервью, так как его часто спрашивают в интервью JavaScript.

.kln

Оригинал: “https://dev.to/unalo_baayriyo/design-a-pub-sub-pattern-in-vanilla-js-4aa1”

Реализация PubSub обычно наблюдается в том, где есть –

Читайте ещё по теме: