{"draftJsState":{"blocks":[{"data":{"image":{"id":"63b74282502c28190686a7cf"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"dclvj"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":22,"offset":10}],"inlineStyleRanges":[],"text":"Источник: Nuances of Programming","type":"unstyled","key":"dta2s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Кратко о целях","type":"header-three","key":"ccglf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"С нуля напишем паттерн передачи событий Event Bus (пер. шина событий), содержащий всего 60 строк!","type":"unordered-list-item","key":"6m5sn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рассмотрим наилучший способ применения Event Bus в React.","type":"unordered-list-item","key":"c41n6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Используем Event Bus в демо-примере с Google Maps API.","type":"unordered-list-item","key":"2594h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как-то в процессе работы я натолкнулся на один интересный пример с Event Bus — упрощенный модуль, организующий процесс логирования для аналитики в веб-приложениях глобального масштаба. Он придает большой базе кода предельную ясность. В статье представлены результаты изучения этого эффективного паттерна проектирования.","type":"unstyled","key":"7ntmd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Приступим!","type":"unstyled","key":"3n3vi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что такое Event Bus?","type":"header-three","key":"c09ip"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Event Bus — это паттерн проектирования, обеспечивающий взаимодействие между слабо связанными компонентами по принципу “публикатор события-подписчик на событие”.","type":"unstyled","key":"t3ih"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Компонент может отправить сообщение в шину событий, не зная конечного получателя. С другой стороны, компонент может прослушать сообщение в шине событий и решить, что с ним делать, не располагая информацией об его отправителе. Посредством данного паттерна независимые компоненты могут взаимодействовать между собой, не зная друг друга.","type":"unstyled","key":"2ecqb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Наглядное представление принципа паттерна Event Bus:","type":"unstyled","key":"fedlv"},{"data":{"image":{"id":"63b742b123064044f320fed7"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"bjaoa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"Событие (англ. Event) — сообщение, которое отправляется и принимается в шине событий.","type":"unordered-list-item","key":"1u9km"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Публикатор (англ. Publisher) — отправитель, запускающий событие.","type":"unordered-list-item","key":"bio73"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":"Подписчик (англ. Subscriber) — получатель, прослушивающий событие.","type":"unordered-list-item","key":"5hrct"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рассмотрим паттерн Event Bus поподробнее.","type":"unstyled","key":"a41a2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создание Event Bus с нуля","type":"header-three","key":"d7afk"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":10,"offset":13}],"inlineStyleRanges":[],"text":"Вдохновляясь Events API от Vue, реализуем следующие API для Event Bus:","type":"unstyled","key":"dvcl7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"type EventHandler = (payload: any) => void\n\ninterface EventBus {\n on(key: string, handler: EventHandler): () => void\n off(key: string, handler: EventHandler): void\n emit(key: string, ...payload: Parameters): void\n once(key: string, handler: EventHandler): void\n}","type":"blockquote","key":"f6djj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"on: для подписчика с целью прослушивания события (подписки на событие) и регистрации его обработчика.","type":"unordered-list-item","key":"392bk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"off: для подписчика с целью удаления события (отмены подписки на событие) и его обработчика.","type":"unordered-list-item","key":"7gct"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"once: для подписчика с целью однократного прослушивания события.","type":"unordered-list-item","key":"d0s49"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"emit: для публикатора с целью отправки события в шину событий.","type":"unordered-list-item","key":"fp9g4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Структура данных для Event Bus должна решать 2 задачи:","type":"unstyled","key":"1uql8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"запускать для публикаторов зарегистрированные обработчики события, связанные с его ключом при вызове emit;","type":"unordered-list-item","key":"bscfk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"добавлять или удалять обработчики событий для подписчиков при вызове on, once и off.","type":"unordered-list-item","key":"7909v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"С этой целью задействуется структура “ключ-значение”, как показано ниже:","type":"unstyled","key":"fdbo6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"type Bus = Record","type":"blockquote","key":"5dbtt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для реализации метода on достаточно добавить ключ события в шину, а обработчик события — в массив обработчика. Помимо этого, потребуется вернуть функцию отмены подписки для удаления обработчика события:","type":"unstyled","key":"bkdu0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"export function eventbus(config?: {\n // обработчик ошибок для последующего использования \n onError: (...params: any[]) => void\n}): EventBus {\n const bus: Bus = {}\n const on: EventBus['on'] = (key, handler) => {\n if (bus[key] === undefined) {\n bus[key] = []\n }\n bus[key]?.push(handler)\n // функция отмены подписки \n return () => {\n off(key, handler)\n }\n }\n return { on }\n}","type":"blockquote","key":"bpnt2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для реализации off просто удаляем обработчик события из шины.","type":"unstyled","key":"608f4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const off: EventBus['off'] = (key, handler) => {\n const index = bus[key]?.indexOf(handler) ?? -1\n bus[key]?.splice(index >>> 0, 1)\n}","type":"blockquote","key":"fnb3q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При вызове emit должны запускаться все обработчики, связанные с событием. Здесь мы добавляем обработку ошибок. Это позволяет убедиться, что все обработчики событий будут запущены, несмотря на ошибки:","type":"unstyled","key":"4ed2l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const emit: EventBus['emit'] = (key, payload) => {\n bus[key]?.forEach((fn) => {\n try {\n fn(payload)\n } catch (e) {\n config?.onError(e)\n }\n })\n}","type":"blockquote","key":"3a8g5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поскольку once только единожды прослушивает событие, его можно рассмотреть как метод, регистрирующий обработчик, который отменяет свою регистрацию после запуска. Один из способов решения заключается в создании функции высшего порядка handleOnce. А вот и код:","type":"unstyled","key":"4fong"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const once: EventBus['once'] = (key, handler) => {\n const handleOnce = (payload: Parameters) => {\n handler(payload)\n off(key, handleOnce as typeof handler)\n }\n on(key, handleOnce as typeof handler)\n}","type":"blockquote","key":"evsdt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итак, мы обеспечили Event Bus всеми необходимыми методами!","type":"unstyled","key":"cuk6u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Улучшение типизации TypeScript","type":"header-three","key":"bj4fr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Текущая типизация для Event Bus характеризуется чрезмерной открытостью. Ключ события может быть любой строкой, а обработчик — любой функцией. В целях безопасного применения паттерна воспользуемся проверкой типов для добавления ключа и нужного обработчика в EventBus:","type":"unstyled","key":"5i722"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const once: EventBus['once'] = (key, handler) => {\n const handleOnce = (payload: Parameters) => {\n handler(payload)\n off(key, handleOnce as typeof handler)\n }\n on(key, handleOnce as typeof handler)\n}","type":"blockquote","key":"d1oeq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Здесь мы указываем TypeScript, что ключ должен быть одним из keyof T, а обработчик должен иметь соответствующий тип. Например:","type":"unstyled","key":"3ncul"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"interface MyBus {\n 'on-event-1': (payload: { data: string }) => void\n}const myBus = eventbus()","type":"blockquote","key":"fg9pi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При разработке необходимо видеть четкое определение типов:","type":"unstyled","key":"fejac"},{"data":{"image":{"id":"63b742b1db6c747914c68f2e"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"f3173"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Применение Event Bus в React","type":"header-three","key":"bddaj"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":5,"offset":20}],"inlineStyleRanges":[],"text":"Я создал приложение Remix, демонстрирующее работу только что созданного Event Bus:","type":"unstyled","key":"2cekm"},{"data":{"image":{"id":"63b742b105f13443f3823cb8"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"bqcmu"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":6,"offset":73}],"inlineStyleRanges":[{"length":80,"offset":0,"style":"ITALIC"}],"text":"Репозиторий GitHub для рассматриваемого демо-примера представлен по этой ссылке.","type":"blockquote","key":"8qeo4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Демо показывает, как организовать процесс логирования с помощью Event Bus в изоморфном приложении React. Для логирования выбраны 3 события:","type":"unstyled","key":"1gcr4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"onMapIdle: событие происходит, когда карта завершает инстанцирование или пользователь прекращает перемещение или масштабирование карты;","type":"unordered-list-item","key":"e25iu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"onMapClick: событие происходит при нажатии пользователем на карту;","type":"unordered-list-item","key":"40rir"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"onMarkerClick: событие происходит при нажатии пользователем на маркер.","type":"unordered-list-item","key":"eao5q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создаем 2 канала событий: для карты и маркера:","type":"unstyled","key":"58mg7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { eventbus } from 'eventbus'\nexport const mapEventChannel = eventbus<{\n onMapIdle: () => void\n onMapClick: (payload: google.maps.MapMouseEvent) => void\n}>()","type":"blockquote","key":"er926"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { eventbus } from 'eventbus'\nimport type { MarkerData } from '~/data/markers'\n\nexport const markerEventChannel = eventbus<{\n onMarkerClick: (payload: MarkerData) => void\n}>()","type":"blockquote","key":"1q3b5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Разделение каналов событий вызвано необходимостью четкого разграничения задач. С ростом приложения данный паттерн может разрастаться горизонтально.","type":"unstyled","key":"dbo04"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Применяем каналы событий в компонентах React:","type":"unstyled","key":"a41vi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { markers } from '~/data/marker'\nimport { logUserInteraction } from '~/utils/logger'\nimport { mapEventChannel } from '~/eventChannels/map'\nimport { markerEventChannel } from '~/eventChannels/marker'\n\nexport async function loader() {\n return json({\n GOOGLE_MAPS_API_KEY: process.env.GOOGLE_MAPS_API_KEY,\n })\n}\n\nexport default function Index() {\n const data = useLoaderData()\n const portal = useRef(null)\n const [selectedMarker, setSelectedMarker] = useState()\n \n useEffect(() => {\n // подписка на события при монтировании\n const unsubscribeOnMapIdle = mapEventChannel.on('onMapIdle', () => {\n logUserInteraction('on map idle.')\n })\n const unsubscribeOnMapClick = mapEventChannel.on(\n 'onMapClick',\n (payload) => {\n logUserInteraction('on map click.', payload)\n }\n )\n const unsubscribeOnMarkerClick = markerEventChannel.on(\n 'onMarkerClick',\n (payload) => {\n logUserInteraction('on marker click.', payload)\n }\n )\n // отмена подписки на событие при размонтировании\n return () => {\n unsubscribeOnMapIdle()\n unsubscribeOnMapClick()\n unsubscribeOnMarkerClick()\n }\n }, [])\n \n const onMapIdle = (map: google.maps.Map) => {\n mapEventChannel.emit('onMapIdle')\n setZoom(map.getZoom()!)\n const nextCenter = map.getCenter()\n if (nextCenter) {\n setCenter(nextCenter.toJSON())\n }\n }\n const onMapClick = (e: google.maps.MapMouseEvent) => {\n mapEventChannel.emit('onMapClick', e)\n }\n const onMarkerClick = (marker: MarkerData) => {\n markerEventChannel.emit('onMarkerClick', marker)\n setSelectedMarker(marker)\n }\n \n return (\n <>\n \n \n {selectedMarker && }\n \n

\n \n )\n}","type":"blockquote","key":"45l8a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы подписались на события в компоненте Index и порождаем события при взаимодействии с картой и маркерами. Более того, подписываясь и отписываясь на этапах жизненного цикла компонента, мы регистрируем только необходимые обработчики события в момент перемещения пользователя по карте.","type":"unstyled","key":"b1sp8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Заключение","type":"header-three","key":"80pd4"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":6,"offset":84}],"inlineStyleRanges":[],"text":"Если вы ищите библиотеку Event Bus, то можете рассмотреть варианты, рекомендованные Vue.js:","type":"unstyled","key":"20d1k"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":4,"offset":0}],"inlineStyleRanges":[],"text":"Mitt;","type":"unordered-list-item","key":"bl6p0"},{"data":{},"depth":0,"entityRanges":[{"key":6,"length":12,"offset":0}],"inlineStyleRanges":[],"text":"tiny-emitter.","type":"unordered-list-item","key":"fms76"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Советую изучить материал об использовании Redux в качестве Event Bus. Для обработки событий можно воспользоваться следующими инструментами на основе Redux:","type":"unstyled","key":"2p3ha"},{"data":{},"depth":0,"entityRanges":[{"key":7,"length":39,"offset":0}],"inlineStyleRanges":[],"text":"redux-toolkit’s new Listener Middleware;","type":"unordered-list-item","key":"8h5na"},{"data":{},"depth":0,"entityRanges":[{"key":8,"length":16,"offset":0}],"inlineStyleRanges":[],"text":"redux-observable;","type":"unordered-list-item","key":"bsc6s"},{"data":{},"depth":0,"entityRanges":[{"key":9,"length":10,"offset":0}],"inlineStyleRanges":[],"text":"Redux-Saga.","type":"unordered-list-item","key":"5mjk8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Читайте также:","type":"unstyled","key":"2kfod"},{"data":{},"depth":0,"entityRanges":[{"key":10,"length":55,"offset":0}],"inlineStyleRanges":[],"text":"12 хуков React, которые должен знать каждый разработчик","type":"unordered-list-item","key":"cjm3f"},{"data":{},"depth":0,"entityRanges":[{"key":11,"length":30,"offset":0}],"inlineStyleRanges":[],"text":"Почему пора завязывать с React","type":"unordered-list-item","key":"eiotc"},{"data":{},"depth":0,"entityRanges":[{"key":12,"length":64,"offset":0}],"inlineStyleRanges":[],"text":"Как создать библиотеку компонентов для совместного использования","type":"unordered-list-item","key":"c7kub"},{"data":{},"depth":0,"entityRanges":[{"key":13,"length":8,"offset":14},{"key":14,"length":2,"offset":24}],"inlineStyleRanges":[],"text":"Читайте нас в Telegram, VK","type":"unstyled","key":"5dha2"},{"data":{},"depth":0,"entityRanges":[{"key":15,"length":13,"offset":15},{"key":16,"length":42,"offset":30}],"inlineStyleRanges":[{"length":14,"offset":0,"style":"ITALIC"}],"text":"Перевод статьи Daw-Chih Liou: How to Use Event Bus in React Architecture","type":"unstyled","key":"39ldb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"wNmcDt9ktqTzyA5VSK5R"}],"entityMap":{"11":{"data":{"href":"https://nuancesprog.ru/p/13173/","url":"https://nuancesprog.ru/p/13173/"},"mutability":"MUTABLE","type":"LINK"},"12":{"data":{"href":"https://nuancesprog.ru/p/4427/","url":"https://nuancesprog.ru/p/4427/"},"mutability":"MUTABLE","type":"LINK"},"13":{"data":{"href":"https://t.me/nuancesproghumor","url":"https://t.me/nuancesproghumor"},"mutability":"MUTABLE","type":"LINK"},"14":{"data":{"href":"https://vk.com/nuancesprog","url":"https://vk.com/nuancesprog"},"mutability":"MUTABLE","type":"LINK"},"15":{"data":{"href":"https://medium.com/@dawchihliou?source=post_page-----f90485477647--------------------------------","url":"https://medium.com/@dawchihliou?source=post_page-----f90485477647--------------------------------"},"mutability":"MUTABLE","type":"LINK"},"16":{"data":{"href":"https://betterprogramming.pub/how-to-use-event-bus-in-react-architecture-f90485477647","url":"https://betterprogramming.pub/how-to-use-event-bus-in-react-architecture-f90485477647"},"mutability":"MUTABLE","type":"LINK"},"0":{"data":{"url":"https://nuancesprog.ru/p/16623/"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://v3-migration.vuejs.org/breaking-changes/events-api.html","url":"https://v3-migration.vuejs.org/breaking-changes/events-api.html"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://remix.run/","url":"https://remix.run/"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://github.com/DawChihLiou/eventbus-demo","url":"https://github.com/DawChihLiou/eventbus-demo"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"href":"https://v3-migration.vuejs.org/breaking-changes/events-api.html#event-bus","url":"https://v3-migration.vuejs.org/breaking-changes/events-api.html#event-bus"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"href":"https://github.com/developit/mitt","url":"https://github.com/developit/mitt"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"href":"https://github.com/scottcorgan/tiny-emitter","url":"https://github.com/scottcorgan/tiny-emitter"},"mutability":"MUTABLE","type":"LINK"},"7":{"data":{"href":"https://github.com/reduxjs/redux-toolkit/releases/tag/v1.8.0","url":"https://github.com/reduxjs/redux-toolkit/releases/tag/v1.8.0"},"mutability":"MUTABLE","type":"LINK"},"8":{"data":{"href":"https://github.com/redux-observable/redux-observable/","url":"https://github.com/redux-observable/redux-observable/"},"mutability":"MUTABLE","type":"LINK"},"9":{"data":{"href":"https://github.com/redux-saga/redux-saga","url":"https://github.com/redux-saga/redux-saga"},"mutability":"MUTABLE","type":"LINK"},"10":{"data":{"href":"https://nuancesprog.ru/p/16589/","url":"https://nuancesprog.ru/p/16589/"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}