Про організацію простого каналу обміну повідомленнями між модулями на сторінці

У мене є конкретний приклад: на сторінці є основна форма для створення посту і в ній є кнопка для додавання файлу. Значить потрібен завантажувач файлів (file uploader). Можно одразу в файлі-контроллері форми описати роботу з завантаженням файлу, проте коли аплоадер буде потрібен в іншому місці (а це дуже верогідно), то доведеться копипастити код, а я цього робити не хочу. Тому потрібен модуль “uploader”, котрий буде відповідальний за завантаження файлу.

Якщо модуль “uploader” підключити в контроллер форми напряму, то хоча модуль і знаходиться в іншому місці, наша форма стає сильно залежна від цього модуля. Будь які зміни в файлах модуля або його переміщення так чи інакше будуть мати побічні ефекти.

Проте є Event API яке чудово працює вже не один десяток років. Головна відмінність від прямого підключення модуля – спілкування між модулями через події. Подія має імʼя та прікріплені дані, в декотрих випадках – функції. Подію можно почати слухати та в будь який момент припинити. Модулі навіть не знають один про одного, просто обмінюються повідомленнями.

Повернемося до завантажувача файлів. Нехай у нас буде контроллер аплоадера та контроллер форми. Контроллер аплоадера може викидати наступні події “почав завантажувати файл” (uploader-started), “завантажив файл” (uploader-completed). Контролер форми буде підписаний на ці події та зможе реагувати на uploader-started – показувати спіннер, а на uploader-completed показувати результат завантаження.

Складніше може бути, коли у нас декілька місць де потрібно використовувати аплоадер, тут нам в пригоді стануть ідентефікатори до якого конкретно місця відноситься поточне завантаження. Для цього в моменті виклика діалогового вікна для вибору файлів буде передаватися ID місця з якого відбувся виклик, далі цей ID повинен бути присутнім в івентах uploader-completed та uploader-started щоб форма або форми змогли обробити тільки свої результати.