¿Cómo implementar el patrón de diseño observador y publicador/suscriptor con Javascript?

El patrón de diseño observador permite tener una dependencia de uno a muchos objetos de una manera libre, sin estar fuertemente acoplados, consiguiendo que un objeto observado, llamado sujeto, al cambiar su estado, todos los demás objetos interesados en estos cambios sean notificados y actualizados automáticamente. A estos objetos interesados se les llama observadores y pueden recibir del sujeto datos relacionados sobre los cambios.

Si aún no sabes que es un patrón de diseño, revisa primero esta publicación sobre patrones de diseño.

Este patrón de diseño también es llamado publicador/suscriptor, en lugar de que un objeto invoque el método de otro directamente, un objeto se suscribe a una actividad especifica de otro objeto para poder ser notificado sobre esa actividad. El suscriptor es el observador, mientas el objeto que es observado es el publicador o sujeto. El publicador notifica a todos los objetos suscritos cuando un evento importante ocurre y puede enviar datos a los observadores.

Si has utilizado eventos del navegador, como escuchar el evento click sobre un botón, ahí estas utilizando el patrón observador definido por el navegador, tu función callback es tu objeto observador y el botón es el sujeto, tu función callback esta interesada en la actividad de dar click sobre el botón.

El patrón observador se compone de un Sujeto y uno o más Observadores. Veamos el diagrama tomado del libro Design Patterns: Elements of reusable Object-Oriented software:

El Sujeto o publicador está compuesto por las siguientes propiedades importantes que usaremos en nuestro código javascript:

  • Una colección de observers o subscribers
  • Método attach()o subscribe()
  • Método detach()o unsubscribe()
  • Método notify()o publish()

Normalmente un Observador contiene un método update() que el Sujeto utiliza.

Para tener más claro esto, vamos a ver dos ejemplos del patrón observador, el primero será el Observador puro y el segundo en su modo Publicador/Suscriptor.

Simplificando el diagrama anterior, el patrón observador funciona así:

Juega con el ejemplo de abajo, y agrega nuevos checkbox, si has agregado más de un nuevo checkbox, podemos notar que cuando damos click en el checkbox ‘Seleccionar‘ todos los demás checkbox nuevos se enteran de esa actividad y se actualizan automáticamente. Todo esto sin necesidad de estar al pendiente de que el checkbox ‘seleccionar‘ ha cambiado su estado, el encargado de notificar del cambio es el Sujeto o publicador y solo si existe algún cambio. Esto es muy eficiente si tienes cientos o miles de checkbox observando ese cambio.

Ahora veamos el ejemplo del modo Publicador/suscriptor, Publisher/subscriber en ingles, y aquí dejo el diagrama simple de como funciona esta versión:

El patrón observador en modo Publicador/Suscriptor se parece más a los eventos del DOM y a eventos personalizados, pero no deja de ser el patrón de diseño Observador. También en esta versión podemos definir de que actividad especifica del sujeto/publicador nos interesa ser notificados, además como observadores, podemos suscribirnos a más de una actividad o evento.

En el ejemplo queremos ser notificados de cambios en la actividad check a través del siguiente pedazo de código:

publisherSeleccionar.subscribe('check', subscriberCheckbox.update, subscriberCheckbox);

En conclusión el patrón observador es muy útil para reaccionar a determinados eventos de manera que seamos notificados, sin estar revisando si algo cambio, lo mejor de todo es que se puede notificar a más de un observador. Y puede tener más de una variación como la versión publisher/subscriber. Actualmente es utilizado en muchos ámbitos tales como la programación reactiva, por ejemplo en ReactiveX,  frameworks de componentes web como angular, vue, polymer y librarías de control de estado como flux y redux.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

This site uses Akismet to reduce spam. Learn how your comment data is processed.