Aprende en casa Ir a KODOTI
Aprende en casa KODOTI

Patrón Observador con Javascript (Observer Pattern)

Mediante un ejemplo vamos a entender como funciona e implementa el patrón Observador en javascript.

Rodríguez Patiño, Eduardo
Rodríguez Patiño, Eduardo
2020-07-08 | 9,310 lecturas
Actualizado:

He reescrito toda esta publicación porque la primera vez que lo hice fue hace 4 años y luego de volverla a leer no entendí nada, así que he decidido hacer un ejemplo más simple usando la programación orientada a objetos.

¿Qué es este patrón?

Observa los cambios de estado que tenga un sujeto u objeto para notificar sus suscripciones.

¿Qué vamos hacer?

Vamos a crear un ejemplo muy simple donde crearemos una clase para incrementar el valor númerico de su propiedad y cada vez que este valor sea alterado vamos a notificar el cambio de este estado a través de la consola.

A la acción

Lo primero que necesitamos hacer es definir una clase que será nuestro observador y permita suscribir o desuscribir las notificaciones para nuestro sujeto.

Definiendo nuestra clase observadora

class Observable {
    constructor() {
        this.observers = [];
    }

    // Suscribe una clase notificadora
    subscribe(c) {
        this.observers.push(c);
    }

    // Desuscribe la clase notificadora
    unsubscribe(c) {
        this.observers = this.observers.filter(observer => observer instanceof c !== true);
    }

    // Llama a todos nuestros suscriptores
    notify(model) {
        this.observers.forEach(observer => {
            observer.notify(model);
        });
    }
}

Definiendo nuestro sujeto

Creemos al sujeto, que para nuestro caso será la clase con la que vamos a probar el ejercicio.

class NumberExample extends Observable {
    constructor() {
        super();
        this.value = 0;
    }

    increment() {
        this.value++;

        // Llama a los suscriptores
        this.notify(this);
    }
}
  • Dicha clase hereda de la clase Observable para que pueda suscribir a los suscriptores.
  • Cada vez que incrementamos el valor de nuestra propiedad se dispara la notificación llamando a todas las suscripciones que hayamos definido.

Definiendo nuestros suscriptores

Vamos a definir 2 suscriptores, el cual serán 2 clases que enviarán un mensaje a la consola del browser en español y en inglés.

class NumberExampleSpanishConsole {
    notify(model) {
        console.log(`El nuevo número es ${model.value}`);
    }
}

class NumberExampleEnglishConsole {
    notify(model) {
        console.log(`The new number is ${model.value}`);
    }
}

Hora de suscribir

// Instanciamos al sujeto
let numberExample = new NumberExample();

// Le suscribimos sus suscriptores o listeners
numberExample.subscribe(new NumberExampleEnglishConsole());
numberExample.subscribe(new NumberExampleSpanishConsole());

Cada vez que llamemos al método incrementar serán invocados los suscriptores o listeners.

numberExample.increment();
// El nuevo número es 1
// The new number is 1

numberExample.increment();
// El nuevo número es 2
// The new number is 2

numberExample.increment();
// El nuevo número es 3
// The new number is 3

Conclusión

Tranquilamente pudieramos haber programado las impresiones de la consola en el método incrementar y nos olvidábamos de crear tantas clases.

Pero, el problema radica en que le daríamos muchas responsabilidades al método incrementar, ya que su objetivo del método es solo incrementar, más no imprimir.

Por eso, al plantearlo de esta manera y resolverlo a través del patrón observador creamos un módelo más escalable y fácil de mantener porque ya no programamos todo en el mismo lugar evitando de esta manera el fuerte acomplamiento y nos volvemos menos propensos a errores.


Estudia con nosotros

🚀 Mejora tus oportunidades laborales