Rumah  >  Artikel  >  hujung hadapan web  >  Corak Reka Bentuk JavaScript - Tingkah Laku - Pemerhati

Corak Reka Bentuk JavaScript - Tingkah Laku - Pemerhati

王林
王林asal
2024-08-12 18:41:06944semak imbas

JavaScript Design Patterns - Behavioral - Observer

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn