El patrón observador permite la definición de dependencia de uno a muchos entre objetos para que todos sus dependientes sean notificados y actualizados automáticamente cuando un objeto cambia de estado.

En este ejemplo, estamos creando un producto de clase simple que otras clases pueden observar registrando cambios en el método register(). Cuando se actualiza algo, el método notifyAll() se comunicará con todos los observadores sobre estos cambios.

class ObservedProduct {
  constructor() {
    this.price = 0;
    this.actions = [];
  }

  setBasePrice(val) {
    this.price = val;
    this.notifyAll();
  }

  register(observer) {
    this.actions.push(observer);
  }

  unregister(observer) {
    this.actions.remove.filter(function (el) {
      return el !== observer;
    });
  }

  notifyAll() {
    return this.actions.forEach(
      function (el) {
        el.update(this);
      }.bind(this)
    );
  }
}

class Fees {
  update(product) {
    product.price = product.price * 1.2;
  }
}

class Profit {
  update(product) {
    product.price = product.price * 2;
  }
}

export { ObservedProduct, Fees, Profit };

¿Aquí hay un ejemplo completo? https://stackblitz.com/edit/vitejs-vite-kyucyd?file=main.js

Conclusión

Utilice este patrón cuando los cambios en el estado de un objeto puedan requerir cambiar otros objetos y el conjunto real de objetos se desconozca de antemano o cambie dinámicamente.

Espero que te haya resultado útil. Gracias por leer. ?

¡Conectémonos! Puedes encontrarme en:

• Medio: https://medium.com/@nhannguyendevjs/
• Desarrollador: https://dev.to/nhannguyendevjs/
• Hashnode: https://nhannguyen.hashnode.dev/
• Linkedin: https://www.linkedin.com/in/nhannguyendevjs/
• X (anteriormente Twitter): https://twitter.com/nhannguyendevjs/
• Cómprame un café: https://www.buymeacoffee.com/nhannguyendevjs