Comportamiento de objetos

Para qué sirve el Patrón Observador

Los patrones de diseño, como el Patrón Observador (Pattern Observer), nos permiten contar con una amplia gama de soluciones a problemas habituales que se presentan en el diseño de softwares. Estos se pueden clasificar en tres grandes grupos, los patrones creacionales, estructurales y de comportamiento.

Tal como lo dicen sus nombres, los patrones creacionales se refieren a los aspectos de creación o iniciación de los objetos; los estructurales se ocupan de los componentes que dan forma a los objetos y finalmente los de comportamiento se refieren a la manera en que interactúan los objetos. Dentro de este último grupo podemos encontrar el patrón Observer o Patrón Observador.

En la web de hoy en día, existe un concepto que se ha vuelto “clave” en la interacción de las apps modernas. Dicho elemento es el “dinamismo”. A los usuarios que accedan a tu aplicación les interesará obtener respuestas de valor inmediatas a un estímulo o interacción.

Javascript (o algún framework basado en el mismo) es el encargado de percibir los intercambios entre el usuario y la aplicación, cuyas funcionalidades han ido evolucionando para reducir la cantidad de bugs y reducir el tiempo de respuesta del sistema.

Cambiando el estado de un objeto

El Patrón Observador (PO) es un patrón o modelo, ampliamente utilizado hoy en día, en aplicaciones de Javascript. Dicho patrón está compuesto por un Sujeto y un Observador. El Sujeto realizará una determinada acción, y el Observador, tal como indica su nombre, vigilará lo que el sujeto haga, atento a cualquier cambio. El Sujeto (o Instancia) mantiene almacenado una colección de Observadores (Objetos), a los cuales notifica cuando ocurre un cambio a su estado actual. No solo notifica del cambio a un objeto en específico, si no a todos los elementos, permitiendo así que un cambio de estado genere una respuesta desde múltiples observadores.

La Clase Observable

Para empezar a aplicar este modelo, en nuestro código debemos declarar una clase, que contenga los métodos que deseamos tenga nuestro Sujeto. La clase Observable y los métodos a utilizar, serán escritos en Javascript, sin la necesidad de usar algún Framework.

class Observable {

//Cada instancia de la clase Observable comienza con un arreglo vacío de
//Observadores, los cuales reaccionan a un cambio de estado
constructor() {
this.observadores = [];
}

//Agrega la habilidad de suscribir a un nuevo objeto, es decir, agrega un elemento
//al arreglo de Observadores
suscripcion(elemento) {
this.observadores.push(elemento);
}

//Permite eliminar un elemento del arreglo de Observadores
remover_suscripcion(elemento) {
this.observadores.filter(suscriptor => suscriptor !== elemento);
}

//Actualiza todos los objetos suscritos, pasándole información a cada uno de ellos
notificacion(data) {
this.observadores.forEach(observador => observador(data));
}

}

Ejemplo práctico del Patrón Observador

Luego de crear nuestra clase Observable, podemos crear algunas funciones que nos permitan poner a prueba la clase que creamos. En el ejemplo, agregaremos el valor de varios inputs, para luego actualizarlos a través de la clase Observable.

//Guardamos en variables objetos del DOM
const input_01 = document.querySelector(#input_01);
const input_02 = document.querySelector(#input_02);
const input_03 = document.querySelector(#input_03);
const input_04 = document.querySelector(#input_04);
const input_05 = document.querySelector(#input_05);

//Agregamos acciones al arreglo de Observadores. Estas serán llamadas luego
//para actualizar los valores de los inputs.
const actualizar_input_02 = text => input_02.textContent = text;
const actualizar_input_03 = text => input_03.textContent = text;
const actualizar_input_04 = text => input_04.textContent = text;
const actualizar_input_05 = text => input_05.textContent = text;

//Creamos una instancia de nuestra clase Observable
const observadorInputs = new Observable();

//Suscribimos algunos observadores a la instancia que acabamos de generar
observadorInputs.suscripcion(actualizar_input_02);
observadorInputs.suscripcion(actualizar_input_03);
observadorInputs.suscripcion(actualizar_input_04);
observadorInputs.suscripcion(actualizar_input_05);

input_01.addEventListener(‘keyup’, evento => {
observadorInputs.notificacion(evento.target.value);
});

Repasemos un poco lo que hicimos:

1. Almacenamos objetos del DOM (Document Object Model) en una constante.
2. Creamos las acciones que actualizarán el valor de los objetos.
3. Instanciamos la clase Observable.
4. Suscribimos observadores a nuestra instancia creada recientemente.
5. Agregamos el evento keyup para actualizar todos los Observadores del arreglo, cuando se produzca un cambio en el input identificado con el número 1.

El Patrón Observable es realmente útil a la hora de actualizar múltiples objetos, cuando se produce una acción en el sistema o una interacción con el usuario. A pesar de que frameworks como Angular o Vue simplifican estas acciones, también puedes usar tan solo Javascript y no sobrecargar tu aplicación.

Es posible relacionar los Observadores con llamadas asíncronas con el fin de, por ejemplo, actualizar un arreglo de Observadores utilizando información de la base de datos, o guardar en la misma, mientras el usuario sigue interactuando con la aplicación.