Шаблон наблюдатель позволяет определить зависимость «один ко многим» между объектами, так что все его зависимые объекты автоматически уведомляются и обновляются, когда один объект меняет состояние.

В этом примере мы создаем простой продукт класса, который другие классы могут наблюдать, регистрируя изменения в методе register(). Когда что-то обновляется, метод notifyAll() сообщит всем наблюдателям об этих изменениях.

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 };

Полный пример здесь? https://stackblitz.com/edit/vitejs-vite-kyucyd?file=main.js

Заключение

Используйте этот шаблон, когда изменения состояния одного объекта могут потребовать изменения других объектов, а фактический набор объектов заранее неизвестен или изменяется динамически.

Надеюсь, это было вам полезно. Спасибо за чтение. ?

Давайте соединяться! Вы можете найти меня:

• Средний: https://medium.com/@nhannguyendevjs/
• Разработчик: https://dev.to/nhannguyendevjs/
• Hashnode: https://nhannguyen.hashnode.dev/
• Linkedin: https://www.linkedin.com/in/nhannguyendevjs/
• X (ранее Twitter): https://twitter.com/nhannguyendevjs/
• Купи мне кофе: https://www.buymeacoffee.com/nhannguyendevjs