2010-08-06 21 views
5

Tengo una necesidad de comunicación entre componentes en una aplicación web y estoy considerando diferentes maneras de lograr esto. Tengo algunas ideas, pero agradecería otras ideas.Comunicación entre componentes en javascript

Primero, un ejemplo rápido y simple. Tengo dos componentes separados en una página que se cargan de forma asíncrona. Por componente, me refiero a un fragmento de HTML que tiene un objeto javascript asociado que incluye comportamientos basados ​​en jquery en los nodos en el html. Cuando un usuario interactúa con un componente, los cambios deben tener lugar en el otro componente, y viceversa.

La clave a recordar aquí es que cada componente debe ser una unidad autónoma. Podría ser reutilizado en diferentes partes de una aplicación, o incluso diferentes aplicaciones. Por lo tanto, no sabe acerca de la existencia de otros componentes en la página.

Mi idea actual sobre una solución consiste en hacer que los componentes escuchen los eventos personalizados que les interesan, así como enviar eventos personalizados cuando se ha producido una acción. Por lo tanto, cada componente escucha los eventos que se desencadenan por el otro.

El problema es que debido a la carga asincrónica, un componente puede tardar más en cargarse que el otro. Existe la posibilidad de que un evento se envíe demasiado pronto y se pierda. En algunas situaciones, esto podría estar bien, pero en algunos casos necesito asegurarme de que todos los eventos que envía un componente se consuman.

Así que aquí hay algunas preguntas relacionadas:

  1. ¿Qué ocurre con eventos una vez que se activa? ¿Simplemente desaparece si no hay oyentes en el momento en que se activó?

  2. ¿Hay alguna forma de detectar si se consumió o se perdió un generador activado?

  3. ¿Cuáles son algunas buenas maneras para que cada componente sepa sobre los otros componentes?

  4. ¿Existe algún proyecto javascript de código abierto o plugins jquery que se ocupen de este tipo de cosas?

En lo que respecta a la pregunta # 3, estoy pensando que cada componente podría enviar algún tipo de registro evento que incluye los tipos de eventos que se escucha y una lista de componentes que ha registrado con. Los componentes escucharían estos eventos de registro. Algún tipo de lógica de registro usando temporizadores se usaría para asegurar que los componentes correctos se registraran juntos durante el proceso de carga del componente. Una vez que se haya completado el registro, los componentes podrán enviar sus eventos normales.

Respuesta

1

Los servicios web son un buen modelo para hacer referencia aquí. Cuando tiene servicios web interconectados que se usan para la computación en la nube (o cualquier plataforma informática distribuida), generalmente implementan algún tipo de cola de mensajes o "bus" entre ellos.

Puede pensar en crear una cola de mensajes global que maneje "eventos" y pueda publicarla en los suscriptores o retenerla hasta que se realice una acción (generalmente llamada un trabajo).

+1

Esa es una buena idea. El bus de mensajes podría estar en el nivel de aplicación y comenzar a cargar la página. Luego, los componentes simplemente envían eventos, el autobús los captura y los envía a los suscriptores apropiados o los retiene hasta que se registra un suscriptor. Si el tiempo de vida de un evento expira, incluso podría notificar al componente de envío original que el evento falló. – Tauren

1

No estoy seguro de si esto encapsula por completo lo que está tratando de hacer, pero parece que un proyecto de código abierto como JavaScriptMVC puede ser útil para usted.Este marco de código abierto permite a los controladores manejar la delegación de eventos y proporciona parte de esa separación que está buscando. También aprovecha jQuery bajo el capó.

El sitio es un poco difícil de navegar (o al menos encontrar mucha información concreta) pero el video de introducción es útil (12 minutos de duración).

Espero que esto ayude! ¡Buena suerte!

+0

¡Gracias! Miré anteriormente a JavascriptMVC, pero aún no lo he usado. No estoy seguro de que sea la herramienta adecuada para el trabajo, ya que gran parte de lo que hace ya se maneja de manera diferente en mi aplicación. Pero lo investigaré más con respecto al manejo de eventos. Esperaba encontrar algo un poco más ligero con una curva de aprendizaje más pequeña. – Tauren

4

Message Queuing es de hecho lo que parece estar buscando. Estoy seguro de que puede imaginar varios esquemas que involucran un objeto observador escuchando eventos personalizados, recibiendo mensajes, jugando con el tiempo y la secuencia, acelerando, transmitiendo, etc. Pero antes de entrar en todo eso, eche un vistazo a este jQuery message queuing plug-in. Puede ser un buen punto de partida.

+0

¡Muy bueno! He explorado los complementos de Ben Alman antes, pero no debí haber necesitado algo así en ese momento y lo olvidé. Gracias por señalarlo, podría ser perfecto. – Tauren

1

Algo más a considerar en la gestión de eventos es el Reactive Extensions for JavaScript de Microsoft (RxJS). Está en el mismo tipo de líneas del controlador en JavaScriptMVC donde registra eventos en secuencias observables, pero luego puede interactuar con ellos en sintaxis tipo LINQ.

Matthew Podwysocki tiene una serie de buenas publicaciones en el blog sobre cómo trabajar con RxJS. He aquí algunos buenos mensajes:

Introduction to RxJS (buena introducción)
Error Handling Pt. 2 con enlaces a sus muchos otros mensajes

y un enlace a alguna hands on labs para RxJS.

Espero que esto también ayude!