Menerapkan Pola Desain Pengamat di TypeScript

Pola desain adalah templat yang memecahkan masalah yang sering muncul dalam desain perangkat lunak.

Pola pengamat, juga dikenal sebagai pola publish-subscribe, adalah pola perilaku. Ini memungkinkan Anda untuk memberi tahu beberapa objek atau pelanggan tentang peristiwa apa pun yang dipublikasikan di objek yang mereka amati.

Di sini Anda akan belajar bagaimana menerapkan pola desain pengamat di TypeScript.


Pola Pengamat

Pola pengamat bekerja dengan mendefinisikan hubungan satu-ke-banyak antara penerbit dan pelanggannya. Ketika sebuah acara terjadi di penerbit, itu akan memberi tahu semua pelanggan acara itu. Salah satu contoh luas dari pola ini adalah pendengar acara JavaScript.

Untuk konteksnya, anggap Anda sedang membangun pelacak inventaris yang melacak jumlah produk di toko Anda. Dalam hal ini, toko Anda adalah subjek/penerbit, dan inventaris Anda adalah pengamat/pelanggan. Menggunakan pola desain pengamat akan optimal dalam situasi ini.

Dalam pola desain pengamat, kelas subjek Anda harus menerapkan tiga metode:

  • Sebuah menempel metode. Metode ini menambahkan pengamat ke subjek.
  • SEBUAH melepaskan metode. Metode ini menghilangkan pengamat dari subjek.
  • SEBUAH beri tahu/perbarui metode. Metode ini memberi tahu pengamat subjek ketika keadaan berubah pada subjek.

Kelas pengamat Anda harus menerapkan satu metode, yaitu memperbarui metode. Metode ini bereaksi ketika ada perubahan status subjeknya.

Menerapkan Kelas Subjek dan Pengamat

Langkah pertama untuk menerapkan pola ini adalah membuat antarmuka untuk kelas subjek dan pengamat, untuk memastikan bahwa mereka menerapkan metode yang benar:


interface Subject {
attachObserver(observer: Observer): void;
detachObserver(observer: Observer): void;
notifyObserver(): void;
}


interface Observer {
update(subject: Subject): void;
}

Antarmuka dalam blok kode di atas menentukan metode yang harus diterapkan oleh kelas konkret Anda.

See also  Cara Menerapkan Protokol Grafik Terbuka di Next.js

Kelas Mata Pelajaran Konkret

Langkah selanjutnya adalah mengimplementasikan kelas mata pelajaran konkrit yang mengimplementasikan Subjek antarmuka:


class Store implements Subject {}

Selanjutnya, inisialisasi Subjekkeadaan di Toko kelas. Pengamat subjek akan bereaksi terhadap perubahan keadaan ini.

Dalam hal ini, keadaan adalah angka, dan pengamat akan bereaksi terhadap peningkatan angka:


private numberOfProducts: number;

Selanjutnya, inisialisasi array pengamat. Array ini adalah cara Anda melacak pengamat:


private observers: Observer[] = [];

Anda mungkin menemukan beberapa implementasi pola pengamat menggunakan struktur data Tetapkan sebagai pengganti larik untuk melacak pengamat. Menggunakan Set akan memastikan bahwa pengamat yang sama tidak akan muncul dua kali. Jika Anda ingin menggunakan array sebagai gantinya, Anda harus memeriksa duplikat pengamat di . Anda menempel metode.

Selanjutnya, Anda harus menerapkan Subjekmetode-menempel, melepaskandan beri tahu/perbarui—di kelas konkret Anda.

Untuk mengimplementasikan menempel metode, pertama periksa apakah pengamat sudah terpasang dan lempar kesalahan jika sudah. Jika tidak, tambahkan pengamat ke larik menggunakan metode larik JavaScript, dorongan:


attachObserver(observer: Observer): void {
const observerExists = this.observers.includes(observer);

if (observerExists) {
throw new Error('Observer has already been subscribed ');
}


this.observers.push(observer);
}

Selanjutnya, implementasikan melepaskan metode dengan menemukan indeks dan menghapusnya dari array menggunakan JavaScript sambatan metode.

Mungkin ada skenario di mana pengamat yang Anda coba lepaskan sudah terlepas atau tidak berlangganan sejak awal. Anda harus menangani skenario ini dengan menambahkan pernyataan bersyarat untuk memeriksa apakah pengamat ada dalam larik atau set sesuai kasusnya.


detachObserver(observer: Observer): void {
console.log(`Detaching observer ${JSON.stringify(observer)}`);
const observerIndex = this.observers.indexOf(observer);

if (observerIndex === -1) {
throw new Error('Observer does not exist');
}

this.observers.splice(observerIndex, 1);
console.log('Observer detached...');
}

Selanjutnya, implementasikan beri tahu/perbarui metode dengan mengulang daftar pengamat Anda dan memanggil memperbarui metode masing-masing:


notifyObserver(): void {
console.log('Notifying observers...');

for (const observer of this.observers) {
observer.update(this);
}
}

Akhirnya, untuk Subjek kelas, implementasikan metode yang memanipulasi keadaan dan kemudian memberi tahu pengamat tentang perubahan dengan memanggil mereka beri tahu/perbarui metode. Contoh ini adalah penyederhanaan tentang bagaimana subjek dapat melakukan suatu tindakan dan kemudian memberi tahu pengamat:


newProduct(products: number): void {
this.numberOfProducts += products;
console.log('New product added to the store');
this.notifyObserver();
}

Kelas Pengamat Beton

Buat kelas pengamat atau kelas, untuk berlangganan penerbit. Setiap kelas pengamat harus menerapkan Pengamat antarmuka.

See also  5 Cara Hemat Biaya untuk Menerapkan Keamanan Siber dengan Anggaran

Kelas pengamat akan menerapkan a beri tahu/perbarui metode yang hanya subjek yang mereka amati harus memanggil. Metode ini harus berisi semua logika bisnis yang perlu Anda jalankan sebagai respons terhadap perubahan status subjek:


class Inventory implements Observer {
update(): void {
console.log('New product added to the store, updating inventory...');
}
}


class Customer implements Observer {
update(): void {
console.log('New product added to the store, I have to go check it out...');
}
}

Menggunakan Pola Pengamat

Untuk menggunakan pola ini, buat instance kelas subjek dan pengamat yang konkret. Setelah Anda melakukannya, hubungi Subjek menempel metode dan meneruskan instance Observer sebagai argumen. Sebagai tanggapan, subjek akan menambahkan instance itu ke daftar pengamatnya:


const store = new Store();
const inventory = new Inventory();
const customer = new Customer()


store.attachObserver(inventory);
store.attachObserver(customer);
store.newProduct(30);

Kode ini mensimulasikan perubahan status. Perubahan akan memicu metode notifikasi di Subjek kelas. Metode ini, pada gilirannya, memanggil memberitahukan metode pada masing-masing pengamatnya. Setiap pengamat kemudian akan menjalankan logika bisnisnya sendiri.

Anda hanya boleh menggunakan pola ini ketika perubahan status satu objek memengaruhi objek lain, dan kumpulan objek yang terlibat tidak diketahui atau dinamis.

Keuntungan Menggunakan Pola Pengamat

Menggunakan pola ini dalam kode Anda memungkinkan Anda untuk mempertahankan prinsip buka/tutup. Anda dapat menambahkan pelanggan sebanyak yang Anda inginkan, dan membuat hubungan antar objek saat runtime, tanpa mengubah kode subjek.