Heim  >  Artikel  >  Web-Frontend  >  JavaScript-Entwurfsmuster – Verhalten – Beobachter

JavaScript-Entwurfsmuster – Verhalten – Beobachter

王林
王林Original
2024-08-12 18:41:06925Durchsuche

JavaScript Design Patterns - Behavioral - Observer

Das Muster Beobachter ermöglicht die Definition einer Eins-zu-viele-Abhängigkeit zwischen Objekten, sodass alle abhängigen Objekte automatisch benachrichtigt und aktualisiert werden, wenn ein Objekt seinen Status ändert.

In diesem Beispiel erstellen wir ein einfaches Klassenprodukt, das andere Klassen beim Registrieren von Änderungen in der Methode register() beobachten können. Wenn etwas aktualisiert wird, kommuniziert die Methode notifyAll() mit allen Beobachtern über diese Änderungen.

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

Ein vollständiges Beispiel finden Sie hier? https://stackblitz.com/edit/vitejs-vite-kyucyd?file=main.js

Fazit

Verwenden Sie dieses Muster, wenn Änderungen am Zustand eines Objekts möglicherweise die Änderung anderer Objekte erfordern und der tatsächliche Satz von Objekten vorher unbekannt ist oder sich dynamisch ändert.


Ich hoffe, Sie fanden es hilfreich. Danke fürs Lesen. ?

Lassen Sie uns miteinander in Kontakt treten! Sie finden mich unter:

  • Medium: https://medium.com/@nhannguyendevjs/
  • Entwickler: https://dev.to/nhannguyendevjs/
  • Hashnode: https://nhannguyen.hashnode.dev/
  • Linkedin: https://www.linkedin.com/in/nhannguyendevjs/
  • X (ehemals Twitter): https://twitter.com/nhannguyendevjs/
  • Kauf mir einen Kaffee: https://www.buymeacoffee.com/nhannguyendevjs

Das obige ist der detaillierte Inhalt vonJavaScript-Entwurfsmuster – Verhalten – Beobachter. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn