2010-08-06 2 views
5

J'ai besoin d'une communication inter-composant dans une application web et je réfléchis à différentes façons d'y parvenir. J'ai quelques idées, mais j'accueillerais d'autres idées.Communication inter-composants en javascript

D'abord, un exemple simple et rapide. J'ai deux composants distincts sur une page qui sont chargés de manière asynchrone. Par composant, je veux dire un morceau de HTML auquel est associé un objet javascript qui inclut des comportements basés sur jquery sur les noeuds du html. Lorsqu'un utilisateur interagit avec un composant, les modifications doivent avoir lieu dans l'autre composant, et vice-versa.

La chose la plus importante à retenir ici est que chaque composant doit être une unité autonome. Il pourrait être réutilisé dans différentes parties d'une application, ou même dans différentes applications. Donc, il ne connaît pas l'existence des autres composants sur la page. Mes réflexions actuelles sur une solution impliquent que les composants écoutent les événements personnalisés qui les intéressent et qu'ils envoient des événements personnalisés lorsqu'une action a eu lieu. Par conséquent, chaque composant écoute les événements déclenchés par l'autre. Le problème est que, en raison du chargement asynchrone, un composant peut prendre plus de temps à charger que l'autre. Il est possible qu'un événement soit envoyé trop tôt et soit perdu. Dans certains cas, cela peut être correct, mais dans certains cas, je dois m'assurer que tous les événements envoyés par un composant sont consommés.

Alors, voici quelques questions connexes:

  1. Qu'advient-il un événement après son déclenchement? Est-ce qu'il disparaît simplement s'il n'y a pas d'écouteurs au moment où il a été déclenché?

  2. Existe-t-il un moyen de détecter si un déclencheur a même été consommé ou perdu?

  3. Quels sont les bons moyens pour chaque composant à connaître les autres composants? Y a-t-il des projets javascript open-source existants ou des plugins jquery traitant de ce genre de choses?

En ce qui concerne la question n ° 3, je pense que chaque composant pourrait envoyer un événement de type registre qui inclut les types d'événements qu'il écoute et une liste des composants qu'il a enregistré avec. Les composants écouteraient ces événements de registre. Une sorte de logique d'enregistrement utilisant des minuteurs serait utilisée pour s'assurer que les bons composants sont enregistrés ensemble pendant le processus de chargement des composants. Une fois l'enregistrement terminé, les composants pourront envoyer leurs événements normaux.

Répondre

1

Les services Web sont un bon modèle de référence ici. Lorsque vous avez des services Web interconnectés qui sont utilisés pour le cloud computing (ou toute plate-forme informatique distribuée), ils implémentent généralement une sorte de file d'attente de messages ou «bus» entre eux. Vous pouvez penser à créer une file d'attente de messages globale qui gère les "événements" et qui peut soit les publier aux abonnés, soit les conserver jusqu'à ce qu'une action soit entreprise (généralement appelée travail).

+1

C'est une bonne idée. Le bus de messages pourrait être au niveau de l'application et démarré lors du chargement de la page. Alors les composants envoient simplement des événements, le bus les attrape et les pousse aux abonnés appropriés ou les maintient jusqu'à ce qu'un abonné s'enregistre. Si la durée de vie d'un événement expire, il peut même informer le composant d'origine que l'événement a échoué. – Tauren

1

Je ne suis pas sûr si cela encapsule totalement ce que vous essayez de faire, mais il semble qu'un projet open source comme JavaScriptMVC peut vous être utile.Ce framework open source permet aux contrôleurs de gérer la délégation d'événements et fournit une partie de cette séparation que vous recherchez. Il exploite également jQuery sous le capot.

Le site est un peu difficile à naviguer (ou au moins trouver beaucoup d'informations concrètes) mais la vidéo d'introduction est utile (12 minutes de longueur).

Espérons que cela aide! Bonne chance!

+0

Merci! J'ai déjà regardé JavascriptMVC, mais je ne l'ai pas encore utilisé. Je ne suis pas sûr que ce soit le bon outil pour le travail car une grande partie de ce qu'il fait est déjà géré différemment dans mon application. Mais je vais regarder plus en ce qui concerne la gestion des événements. J'espérais trouver quelque chose d'un peu plus léger avec une courbe d'apprentissage plus petite. – Tauren

4

La mise en file d'attente des messages est en effet ce que vous semblez rechercher. Je suis sûr que vous pouvez imaginer différents schémas impliquant un objet observateur écoutant des événements personnalisés, recevant des messages, jouant avec le timing et la séquence, la limitation, la diffusion, etc. Mais avant d'entrer dans tout cela, jetez un oeil à ce jQuery message queuing plug-in. Peut-être un bon point de départ.

+0

Très cool! J'ai déjà exploré les plugins de Ben Alman, mais je n'avais pas besoin de quelque chose comme ça à l'époque et j'ai oublié ça. Merci de l'avoir signalé, cela pourrait être parfait. – Tauren

1

Une autre chose à considérer autour de la gestion des événements est le Reactive Extensions for JavaScript de Microsoft (RxJS). C'est le même type de lignes du contrôleur dans JavaScriptMVC où vous enregistrez des événements dans des séquences observables, mais vous pouvez ensuite interagir avec eux dans une syntaxe semblable à LINQ.

Matthew Podwysocki a publié de nombreux articles sur son travail avec RxJS. Voici quelques bons messages:

Introduction to RxJS (bonne intro)
Error Handling Pt. 2 avec des liens vers ses nombreux autres postes

Et un lien vers quelques hands on labs pour RxJS.

Espérons que cela aide aussi!

Questions connexes