觀察者模式允許定義物件之間的一對多依賴關係，以便當一個物件更改狀態時，所有其依賴項都會被通知並自動更新。

在此範例中，我們正在創建一個簡單的類別產品，其他類別可以觀察到註冊 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