¿Cómo implementar el patrón Observer en JavaScript?

El patrón Observer es fundamental para gestionar la comunicación entre objetos en diversas aplicaciones. Implementarlo en JavaScript permite manejar actualizaciones automáticas cuando ciertos eventos tienen lugar. Aquí te mostraré cómo hacerlo de manera eficaz y con ejemplos prácticos.

¿Qué son las interfaces en el patrón Observer?

Antes de adentrarnos en la implementación, necesitamos definir algunas interfaces clave:

1. Subject Interface: Esta interface incluirá dos métodos esenciales:
   • subscribe(observer): que permite agregar un Observador a la lista.
   • unsubscribe(observer): que lo elimina de la lista.

El código correspondiente sería:

interface Subject {
    subscribe(observer: Observer): void;
    unsubscribe(observer: Observer): void;
}

2. Observer Interface: Los objeto que desean recibir notificaciones deben implementar esta interfaz. Incluirá un método para recibir actualizaciones:

interface Observer {
    update(data: any): void;
}

¿Cómo crear una clase concreta que implemente estas interfaces?

Creamos la clase EditPrice, que se encargará de gestionar las notificaciones a los observadores:

class EditPrice implements Subject {
    private observers: Observer[] = [];

    subscribe(observer: Observer): void {
        this.observers.push(observer);
    }

    unsubscribe(observer: Observer): void {
        const index = this.observers.findIndex(obs => obs === observer);
        if (index >= 0) {
            this.observers.splice(index, 1);
        }
    }

    notify(data: any): void {
        this.observers.forEach(observer => observer.update(data));
    }
}

¿Cómo manejar los cambios de valor para notificar a los Observadores?

Necesitamos capturar cambios en el input y notificar a todos los observadores suscritos. Así se puede gestionar el elemento que cambiará y disparará las notificaciones:

constructor(selector: string) {
    const element = document.querySelector(selector);
    element.addEventListener('input', () => {
    this.notify(element.value);
    });
}

¿Cómo desplegar la información para los Observadores?

Implementamos un Observador concreto para mostrar los cambios en la interfaz:

class PriceDisplay implements Observer {
    constructor(private selector: string) {
        this.element = document.querySelector(selector);
    }

    update(data: any): void {
        this.element.innerText = data;
    }
}

¿Cómo suscribir y manejar dinámicamente las subscripciones?

Finalmente, suscribe el PriceDisplay a EditPrice y maneja cambios dinámicos en las suscripciones:

const price = new EditPrice('#priceInput');
const display = new PriceDisplay('#priceDisplay');

price.subscribe(display);

// Desmaterializando la suscripción después de ciertos segundos
setTimeout(() => {
    price.unsubscribe(display);
}, 5000);

Inicia tu proyecto y ¡observa cómo el patrón Observer cobra vida en tu aplicación! Cambia el valor en el input y visualiza cómo el PriceDisplay actualiza su información en tiempo real. Si el desarrollo de aplicaciones reactivas te apasiona, sigue explorando herramientas como Redux en React para gestionar estados globales con este patrón. ¡Nunca dejes de aprender y asombrarte con el mundo del desarrollo!