Modèles de conception JavaScript - Comportementaux - Observateur

Le modèle observateur permet de définir une dépendance un-à-plusieurs entre les objets afin que toutes ses dépendances soient notifiées et mises à jour automatiquement lorsqu'un objet change d'état.

Dans cet exemple, nous créons un produit de classe simple que d'autres classes peuvent observer en s'enregistrant sur les modifications apportées à la méthode register(). Lorsque quelque chose est mis à jour, la méthode notifyAll() communiquera avec tous les observateurs au sujet de ces changements.

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

Un exemple complet est ici ? https://stackblitz.com/edit/vitejs-vite-kyucyd?file=main.js

Conclusion

Utilisez ce modèle lorsque les modifications de l'état d'un objet peuvent nécessiter la modification d'autres objets et que l'ensemble réel d'objets est inconnu au préalable ou change dynamiquement.

---

J'espère que cela vous a été utile. Merci d'avoir lu. ?

Connectons-nous ! Vous pouvez me trouver sur :

• Moyen : https://medium.com/@nhannguyendevjs/
• Dév : https://dev.to/nhannguyendevjs/
• Hashnode : https://nhannguyen.hashnode.dev/
• Linkedin : https://www.linkedin.com/in/nhannguyendevjs/
• X (anciennement Twitter) : https://twitter.com/nhannguyendevjs/
• Achetez-moi un café : https://www.buymeacoffee.com/nhannguyendevjs

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!