✅ 1. Membuat Project Baru
Buka terminal dan jalankan:
Design Pattern Observer Nodejs
|
1 2 3 |
mkdir Design-Pattern cd Design-Pattern npm init -y |
✅ 2. Penjelasan Design Pattern “Observer”
A. Contoh Penggunaan Observer
Observer cocok digunakan pada aplikasi berita di mana user (observer) ingin mendapatkan notifikasi otomatis saat ada berita baru (subject). Ketika berita baru ditambahkan, semua user yang berlangganan akan langsung diberi tahu.
B. Langkah-langkah Implementasi Observer
- Subject: Objek yang diamati, menyimpan daftar observer.
- Observer: Objek yang menerima notifikasi dari subject.
- Subject akan:
- Menyediakan metode untuk menambah/menghapus observer.
- Memanggil method
update()pada semua observer saat ada perubahan.
- Observer akan:
- Mengimplementasikan method
update()yang menangani notifikasi.
- Mengimplementasikan method
C. Kelebihan dan Kekurangan
Kelebihan:
- Menghubungkan objek secara longgar (low coupling).
- Mendukung komunikasi satu-ke-banyak secara otomatis.
Kekurangan:
- Sulit dilacak jika terlalu banyak observer.
- Performa bisa menurun jika observer terlalu banyak dan kompleks.
✅ 3. Implementasi Observer di Node.js
📄 observer.js
|
1 2 3 4 5 6 7 8 |
// observer.js class Observer { update(message) { throw new Error("Method 'update()' must be implemented."); } } module.exports = Observer; |
📄 subject.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
// Subject (Publisher) class Subject { constructor() { this.observers = []; } attach(observer) { console.log('Observer ditambahkan.'); this.observers.push(observer); } detach(observer) { const index = this.observers.indexOf(observer); if (index > -1) { this.observers.splice(index, 1); console.log('Observer dihapus.'); } } notify(data) { console.log('Notifikasi ke semua observer...'); for (const observer of this.observers) { observer.update(data); } } } module.exports = Subject; |
📄 concreteObserver.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
const Observer = require('./observer'); class ConcreteObserver extends Observer { constructor(name) { super(); this.name = name; } update(data) { console.log(`${this.name} menerima data: ${data}`); } } module.exports = ConcreteObserver; |
📄 main.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
const Subject = require('./subject'); const ConcreteObserver = require('./concreteObserver'); // Inisialisasi subject const subject = new Subject(); // Inisialisasi observers const observer1 = new ConcreteObserver('Observer 1'); const observer2 = new ConcreteObserver('Observer 2'); // Menambahkan observer ke subject subject.attach(observer1); subject.attach(observer2); // Notifikasi ke semua observer subject.notify("Update terbaru: Versi 1.0"); // Menghapus satu observer dan notifikasi ulang subject.detach(observer1); subject.notify("Update terbaru: Versi 2.0"); |
✅ Penjelasan Baris Kode di main.js
|
1 2 |
const Subject = require('./subject'); const ConcreteObserver = require('./concreteObserver'); |
👉 Mengimpor class Subject dan Observer konkret.
|
1 |
const subject = new Subject(); |
👉 Membuat objek subject yang diamati.
|
1 2 |
const observer1 = new ConcreteObserver('Observer 1'); const observer2 = new ConcreteObserver('Observer 2'); |
👉 Membuat dua observer dengan nama berbeda.
|
1 2 |
subject.attach(observer1); subject.attach(observer2); |
👉 Mendaftarkan observer ke subject agar mendapat notifikasi.
|
1 |
subject.notify("Update terbaru: Versi 1.0"); |
👉 Subject mengirim notifikasi ke semua observer yang sudah terdaftar.
|
1 |
subject.detach(observer1); |
👉 Menghapus observer1 dari daftar.
|
1 |
subject.notify("Update terbaru: Versi 2.0"); |
Tugas
Fitur Unsubscribe Otomatis
Tambahkan fitur agar observer bisa berhenti berlangganan sendiri setelah menerima 3 notifikasi.
Hint: Buat counter notifikasi di ConcreteObserver.
