Рубрики
Без рубрики

Образец шины событий через Native EventEmitter Class

Автобус событий является одним из самых популярных шаблонов для развязки частей вашей системы (компонентов) или любых … Tagged с помощью TypeScript, JavaScript, шаблонов, WebDev.

Автобус Event Bus – это один из самых популярных шаблонов для развязки частей вашей системы (компонентов) или чего -либо еще, что не должно быть тесно связано. Если у вас есть крупномасштабное применение с большим количеством компонентов, взаимодействующих друг с другом, вы можете заставить ваши компоненты общаться через посредника и поддерживать свободную связь и разделение принципов.

В этой статье я собираюсь познакомить вас с Внедрение автобуса моего события через Native Node.js EventEmitter класс.

Как это устроено

Точка схема шины событий состоит в том, чтобы компоненты могли выпускать обновления в их состояние или запросить некоторые действия, которые будут предприняты через посредник (шина событий), чтобы они полностью отделены от остальной части системы (другие компоненты), и и и и Из -за этого их можно легко удалить из системы, и другие компоненты могут быть легко добавлены.

Реализация

Моя реализация шаблона шины событий не отправляет просто простые сообщения, у нее есть две концепции: канал и Тема Анкет

Автобус событий может содержать любое количество каналы и каждый канал может содержать любое количество темы .

Вы можете послушать канал и получить уведомление по любой теме по этому каналу или вы можете прослушать определенную тему и быть уведомленными только Когда есть обновления по этой конкретной теме.

На приведенной выше диаграмме TODO Component Попросите автобус событие создать канал: Тодо с темами добавлено , удалено и Обновлено Анкет Когда канал создан, он доступен для трансляции.

В зависимости от того, что происходит внутри TODO Component В какой -то момент компонент попросит автобус мероприятия транслировать на Тодо канал с различными темами.

Компонент ведения журнала хочет уведомить обо всем, что касается Тодо (добавлено, обновлено, удалено), поэтому в этом случае компонент подпишится на Тодо канал напрямую (не нужно подписаться на каждую тему индивидуально).

Компонент x Только хочет знать, когда Тодос удаленный Таким образом, он будет слушать (подписаться на) только на удалено Тема на Тодо канал.

Компонент y подписаться только на Обновлено Тема на Тодо канал.

Мероприятие

Каждый слушатель получает мероприятие с этими свойствами

const event = {
    channel:'TODO', // channel name
    topic:'removed' // topic name
    payload:{ // custom object with your custom payload (data)
        anyting:'you want'
    }
}

Давайте создадим предыдущую диаграмму в коде:

const { EventBus } = require("estacion")
// or import { EventBus } from 'estacion'

// create the event bus
const bus = new EventBus()

// create the channel
const todoChannel = bus.channel("TODO")

// create topics on the channel (optional)
const todoCreatedTopic = todoChannel.topic("created")
const todoUpdatedTopic = todoChannel.topic("updated")
const todoRemovedTopic = todoChannel.topic("removed")

// create listeners
// logingComponent ( in this case just a simple function)
const loggingComponent = event => {
  console.log(event.channel) //channel name: TODO
  console.log(event.topic) // topic name: removed OR added or UPDATED
  console.log(event.payload) // custom payload (data) from the event
}

const componentX = event => {
  console.log(event.channel) // TODO
  console.log(event.topic) // removed only !
  console.log(event.payload) // custom payload from the event
}

const componentY = event => {
  console.log(event.channel) // TODO
  console.log(event.topic) // updated only !
  console.log(event.payload) // custom payload from the event
}

// Connect listeners to the appropriate channel or topic

// add loggingComponent directly to the channel
todoChannel.addListener(loggingComponent)

// add componentX only to the "removed" topic
todoRemovedTopic.addListener(componentX)
// or get to the topic from the channel
todoChannel.topic("removed").addListener(componentX)

// add componentY only to the "updated" topic
todoUpdatedTopic.addListener(componentY)
// or get to the topic from the channel
todoChannel.topic("updated").addListener(componentY)

// emit when todo is removed
todoRemovedTopic.emit({ id: "3413241" })
// or
todoChannel.topic("removed").emit({ id: "3413241" })

// emit when todo is created
todoCreatedTopic.emit({
  id: "3413241",
  title: "Buy Milk",
  content: "Lorem Ipsum"
})

Вывод

  • Вы можете иметь любое количество экземпляров автобусов, каналов и тем.
  • Легко создавать и удалять каналы и темы (все слушатели автоматически отписываются, когда канал или тема уничтожаются)

Его можно использовать в браузере через События модуль, который автоматически включен в борьеры, такие как WebPack и Browserify.

Это просто простая, минимальная демонстрация, чтобы вы начали с автобуса. Этот модуль шины событий написан в TypeScript, и в нем есть все, что вам нужно для управления вашими событиями.

Перейти к Репозиторий Для получения дополнительных примеров и подробных объяснений.

Или скачать из npm

Оригинал: “https://dev.to/ivandotv/event-bus-pattern-via-native-eventemmiter-class-72a”

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