Межкомпонентное общение в JavaScript

Question

Мне нужна межкомпонентная связь в веб-приложении, и я рассматриваю различные способы сделать это. У меня есть некоторые идеи, но я бы приветствовал другие идеи.

Во-первых, быстрый и простой пример. У меня есть два отдельных компонента на странице, которые загружаются асинхронно. Под компонентом я подразумеваю кусок HTML, с которым связан объект javascript, который включает поведения на основе jquery для узлов в html. Когда пользователь взаимодействует с одним компонентом, изменения должны происходить в другом компоненте, и наоборот.

Ключевым моментом, который следует помнить здесь, является то, что каждый компонент должен быть автономным блоком. Он может быть повторно использован в разных частях приложения или даже в разных приложениях. Так что он не знает о существовании других компонентов на странице.

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

Проблема в том, что из-за асинхронной загрузки один компонент может загружаться дольше, чем другой. Существует вероятность того, что событие может быть отправлено слишком рано и потеряно. В некоторых ситуациях это может быть хорошо, но в некоторых случаях мне нужно убедиться, что все события, отправляемые компонентом, потребляются.

Итак, вот несколько связанных вопросов:

1. Что происходит с событием после его запуска? Он просто исчезает, если на момент запуска не было слушателей?

2. Есть ли способ определить, был ли сработавший чёт даже уничтожен или потерян?

3. Какие есть хорошие способы для каждого компонента узнать о других компонентах ?

4. Существуют ли какие-либо проекты с открытым исходным кодом javascript или плагины jquery, которые имеют дело с этими типами вещей?

Что касается вопроса № 3, я думаю, что каждый компонент может отправить какое-то событие register , которое включает типы прослушиваемых им событий и список компонентов, которые он зарегистрировал с. Компоненты будут прослушивать эти события регистра. Некоторая логика регистрации, использующая таймеры, будет использоваться для того, чтобы убедиться, что нужные компоненты регистрируются вместе в процессе загрузки компонента. После завершения регистрации компоненты смогут отправлять свои обычные события.

Answer 1

Очередь сообщений - это действительно то, что вы, похоже, ищете. Я уверен, что вы можете представить различные схемы, включающие объект-наблюдатель, прослушивающий пользовательские события, принимающий сообщения, играющий с синхронизацией и последовательностью, регулирование, вещание и т. Д. Но прежде чем приступить ко всему этому, взгляните на это сообщение jQuery плагин очередей . Может быть хорошей отправной точкой.

Answer 2

Что еще нужно учитывать при управлении событиями - это Reactive Extensions for JavaScript от Microsoft (RxJS).Это тот же тип линий контроллера в JavaScriptMVC, где вы регистрируете события в наблюдаемых последовательностях, но затем вы можете взаимодействовать с ними в синтаксисе, похожем на LINQ.работа с RxJS.Вот несколько хороших сообщений:

Введение в RxJS (хорошее вступление)
Обработка ошибок Pt.2 со ссылками на многие другие его посты

И ссылка на некоторые руки в лабораториях для RxJS.

Надеюсь, это также поможет!

Answer 3

Я не уверен, полностью ли это инкапсулирует то, что вы пытаетесь сделать, но это звучит как проект с открытым исходным кодом, например JavaScriptMVC , может быть вам полезен Эта платформа с открытым исходным кодом позволяет контроллерам обрабатывать делегирование событий и обеспечивает часть того разделения, которое вы ищете. Он также использует JQuery под капотом.

На сайте немного сложно ориентироваться (или, по крайней мере, найти много конкретной информации), но вступительное видео полезно (12 минут).

Надеюсь, это поможет! Удачи!

Answer 4

Веб-сервисы - хорошая модель для ссылки здесь. Когда у вас есть взаимосвязанные веб-службы, которые используются для облачных вычислений (или любой распределенной вычислительной платформы), они обычно реализуют какую-то очередь сообщений или «шину» между ними.

Вы можете подумать о создании глобальной очереди сообщений, которая обрабатывает «события» и может либо опубликовать ее подписчикам, либо удерживать до тех пор, пока над ней не будет выполнено действие (обычно называемое заданием).