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

Pola pengamat, juga dikenal sebagai pola terbitkan-berlangganan, adalah pola perilaku. Ini memungkinkan Anda memberi tahu banyak 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 suatu peristiwa terjadi di penerbit, itu akan memberi tahu semua pelanggan untuk acara itu. Salah satu contoh luas dari pola ini adalah pendengar acara JavaScript.

Untuk konteksnya, asumsikan Anda sedang membuat 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 mengimplementasikan tiga metode:

instagram viewer
  • Sebuah menempel metode. Metode ini menambahkan pengamat ke subjek.
  • A melepaskan metode. Metode ini menghilangkan pengamat dari subjek.
  • A 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 pada keadaan 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:

// Antarmuka Subjek/Penerbit
antarmukaSubjek{
 attachObserver (pengamat: Pengamat): ruang kosong;
 detachObserver (pengamat: Pengamat): ruang kosong;
 beri tahuObserver(): ruang kosong;
}
// Antarmuka Pengamat/Pelanggan
antarmukaPengamat{
memperbarui(subjek: Subjek): ruang kosong;
}

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

Kelas Pelajaran Konkrit

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

// Subjek
kelasTokoalatSubjek{}

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

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

// Status subjek
pribadi numberOfProducts: nomor;

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

// inisialisasi pengamat
pribadi pengamat: Pengamat[] = [];

Anda mungkin menemukan beberapa implementasi dari pola pengamat menggunakan a Atur struktur data di tempat array untuk melacak pengamat. Menggunakan Set akan memastikan bahwa pengamat yang sama tidak akan muncul dua kali. Jika Anda ingin menggunakan array, Anda harus memeriksa pengamat duplikat di file menempel metode.

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

Untuk menerapkan menempel metode, periksa dulu apakah pengamat sudah terpasang dan berikan kesalahan jika sudah terpasang. Jika tidak, tambahkan pengamat ke array menggunakan Metode larik JavaScript, dorongan:

// Melampirkan Pengamat (s)
attachObserver (pengamat: Pengamat): ruang kosong {
// Periksa apakah pengamat sudah terpasang
const pengamatAda = ini.pengamat.termasuk (pengamat);
if (pengamatAda) {
melemparkanbaruKesalahan('Pengamat telah berlangganan');
 }
// Tambahkan pengamat baru
ini.pengamat.dorongan(pengamat);
}

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 telah dilepaskan 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.

// Melepaskan Pengamat (s)
detachObserver (pengamat: Pengamat): ruang kosong {
menghibur.catatan(`Memisahkan pengamat ${JSON.stringify (pengamat)}`);
const indekspengamat = ini.pengamat.indeksDari (pengamat);
if (pengamatIndex -1) {
melemparkanbaruKesalahan('Pengamat tidak ada');
 }
ini.pengamat.sambatan(observerIndex, 1);
 konsol.log('Pengamat terpisah...');
}

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

// Memberitahu Pengamat
beri tahuObserver(): ruang kosong {
 konsol.log('Memberi tahu pengamat...');
untuk (const pengamat dariini.pengamat) {
 pengamat.update(ini);
 }
}

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

// Mengubah status dan memberi tahu pengamat
Produk baru (produk: nomor): ruang kosong {
ini.jumlahProduk += produk;
 konsol.log('Produk baru ditambahkan ke toko');
ini.notifyObserver();
}

Kelas Pengamat Beton

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

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

// Pengamat Beton 1
kelasInventarisalatPengamat{
memperbarui(): ruang kosong {
 konsol.log('Produk baru ditambahkan ke toko, memperbarui inventaris...');
// Logika bisnis sebenarnya ada di sini...
	}
}
// Pengamat Beton 2
kelasPelangganalatPengamat{
memperbarui(): ruang kosong {
 konsol.log('Produk baru ditambahkan ke toko, saya harus memeriksanya...');
// Logika bisnis sebenarnya ada di sini...
 }
}

Menggunakan Pola Pengamat

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

// Instansiasi Subjek dan Pengamat
const toko = baru Toko();
const persediaan = baru Inventaris();
const pelanggan = baru Pelanggan()
// Berlangganan objek ke penerbit
toko.attachObserver(inventaris);
toko.attachObserver(pelanggan);
// Mengubah status subjek
toko.produk baru(30);

Kode ini mensimulasikan perubahan keadaan. Perubahan tersebut akan memicu metode notify pada Subjek kelas. Metode ini, pada gilirannya, memanggil memberitahu metode pada masing-masing pengamatnya. Setiap pengamat kemudian akan menjalankan logika bisnisnya sendiri.

Anda sebaiknya hanya menggunakan pola ini saat 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 mempertahankan prinsip buka/tutup. Anda dapat menambahkan pelanggan sebanyak yang Anda inginkan, dan menjalin hubungan antar objek saat runtime, tanpa mengubah kode subjek.