Corak Reka Bentuk JavaScript - Tingkah Laku - Pemerhati

Corak pemerhati membenarkan definisi pergantungan satu-ke-banyak antara objek supaya semua tanggungannya dimaklumkan dan dikemas kini secara automatik apabila satu objek berubah keadaan.

Dalam contoh ini, kami mencipta produk kelas mudah yang kelas lain boleh perhatikan mendaftar tentang perubahan dalam kaedah register(). Apabila sesuatu dikemas kini, kaedah notifyAll() akan berkomunikasi dengan semua pemerhati tentang perubahan ini.

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

Contoh lengkap ada di sini ? https://stackblitz.com/edit/vitejs-vite-kyucyd?file=main.js

Kesimpulan

Gunakan corak ini apabila perubahan kepada keadaan satu objek mungkin memerlukan menukar objek lain dan set objek sebenar tidak diketahui terlebih dahulu atau berubah secara dinamik.

---

Saya harap anda dapati ia membantu. Terima kasih kerana membaca. ?

Jom berhubung! Anda boleh menemui saya di:

• Sederhana: https://medium.com/@nhannguyendevjs/
• Dev: https://dev.to/nhannguyendevjs/
• Hashnode: https://nhannguyen.hashnode.dev/
• Linkedin: https://www.linkedin.com/in/nhannguyendevjs/
• X (dahulunya Twitter): https://twitter.com/nhannguyendevjs/
• Beli Saya Kopi: https://www.buymeacoffee.com/nhannguyendevjs

Atas ialah kandungan terperinci Corak Reka Bentuk JavaScript - Tingkah Laku - Pemerhati. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!