JavaScript デザイン パターン - 動作 - オブザーバー

observer パターンを使用すると、オブジェクト間の 1 対多の依存関係を定義できるため、1 つのオブジェクトの状態が変化すると、そのすべての依存オブジェクトが通知され、自動的に更新されます。

この例では、他のクラスが 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-kycyd?file=main.js

結論

1 つのオブジェクトの状態を変更するために他のオブジェクトの変更が必要になる可能性があり、実際のオブジェクトのセットが事前に不明であるか動的に変化する場合に、このパターンを使用します。

---

お役に立てば幸いです。読んでいただきありがとうございます。 ?

つながりましょう!私を見つけるには:

• 中: https://medium.com/@nhannguyendevjs/
• 開発: https://dev.to/nhannguyendevjs/
• ハッシュノード: https://nhannguyen.hashnode.dev/
• Linkedin: https://www.linkedin.com/in/nhannguyendevjs/
• X (旧 Twitter): https://twitter.com/nhannguyendevjs/
• コーヒーを買ってください: https://www.buymeacoffee.com/nhannguyendevjs

以上がJavaScript デザイン パターン - 動作 - オブザーバーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。