Melaksanakan Corak Reka Bentuk Pemerhati dalam TypeScript

Corak reka bentuk ialah templat yang menyelesaikan masalah yang biasa berulang dalam reka bentuk perisian.

Corak pemerhati, juga dikenali sebagai corak publish-subscribe, ialah corak tingkah laku. Ia membolehkan anda memberitahu berbilang objek atau pelanggan tentang sebarang acara yang diterbitkan dalam objek yang mereka amati.

---

---

tema pemain desktop muzik google play

MAKEUSEOF VIDEO OF THE DAY

Di sini anda akan belajar bagaimana untuk melaksanakan corak reka bentuk pemerhati dalam TypeScript.

Corak Pemerhati

Corak pemerhati berfungsi dengan mentakrifkan hubungan satu-ke-banyak antara penerbit dan pelanggannya. Apabila acara berlaku dalam penerbit, ia akan memberitahu semua pelanggan kepada acara itu. Satu contoh yang meluas bagi corak ini ialah Pendengar acara JavaScript .

Untuk konteks, anggap anda sedang membina penjejak inventori yang menjejaki bilangan produk di kedai anda. Dalam kes ini, kedai anda ialah subjek/penerbit, dan inventori anda ialah pemerhati/pelanggan. Menggunakan corak reka bentuk pemerhati adalah optimum dalam keadaan ini.

cara meletakkan windows pada usb

Dalam corak reka bentuk pemerhati, kelas subjek anda mesti melaksanakan tiga kaedah:

• An lampirkan kaedah. Kaedah ini menambah pemerhati kepada subjek.
• A tanggalkan kaedah. Kaedah ini mengeluarkan pemerhati daripada subjek.
• A maklumkan/kemas kini kaedah. Kaedah ini memberitahu pemerhati subjek apabila keadaan berubah dalam subjek.

Kelas pemerhati anda mesti melaksanakan satu kaedah, iaitu kemas kini kaedah. Kaedah ini bertindak balas apabila terdapat perubahan dalam keadaan subjeknya.

---

---

Melaksanakan Kelas Mata Pelajaran dan Pemerhati

Langkah pertama untuk melaksanakan corak ini ialah mencipta antara muka untuk subjek dan kelas pemerhati, untuk memastikan mereka melaksanakan kaedah yang betul:

// Subject/Publisher Interface 
interface Subject { 
    attachObserver(observer: Observer): void; 
    detachObserver(observer: Observer): void; 
    notifyObserver(): void; 
} 
  
// Observer/Subscriber Interface 
interface Observer { 
    update(subject: Subject): void; 
} 

Antara muka dalam blok kod di atas mentakrifkan kaedah kelas konkrit anda mesti laksanakan.

---

---

Kelas Mata Pelajaran Konkrit

Langkah seterusnya ialah melaksanakan kelas mata pelajaran konkrit yang melaksanakan Subjek antara muka:

// Subject 
class Store implements Subject {} 

Seterusnya, mulakan Subjek negeri di Kedai kelas. Pemerhati subjek akan bertindak balas terhadap perubahan kepada keadaan ini.

Dalam kes ini, keadaan ialah nombor, dan pemerhati akan bertindak balas terhadap peningkatan bilangan:

aplikasi rakaman muzik terbaik untuk android

// Subject state 
private numberOfProducts: number; 

Seterusnya, mulakan tatasusunan pemerhati. Tatasusunan ini ialah cara anda menjejaki pemerhati:

// initializing observers 
private observers: Observer[] = [];