JavaScript
Observer deseni
Bir konunun birden fazla gözlemciyi haberdar etmesi desenini öğrenirsin.
Observer deseni
Observer deseni, bir konunun (subject) birden fazla gözlemciyi (observer) haberdar etmesini sağlar. Bir durum değiştiğinde konu tüm abonelere olay yayar.
JavaScript'te olaylar bu modele dayanır: addEventListener abone olur, olay gerçekleşince tarayıcı aboneleri çağırır.
Kendi EventEmitter sınıfımızı yazarak aynı modeli uygulayabiliriz: on abone ekler, emit olay yayınlar.
EventEmitter uygulaması
EventEmitter sınıfı, olay adlarını dizilere eşleyen bir listeners nesnesi tutar. on(event, callback) ilgili dizinin sonuna callback'i ekler.
emit(event, data) ise o olaya abone olan tüm callback'leri sırayla data argümanıyla çağırır.
emitter.on('login', cb);
emitter.emit('login', user);
Bu yapı, modern kütüphanelerin çoğunun temelidir.
Uygulama EventEmitter sınıfı
Bir EventEmitter sınıfı tanımla. Yapıcısı this.listeners özelliğini boş nesne {} yapar. on(event, callback) yöntemi, this.listeners[event] dizisine callback'i ekler (dizi yoksa önce boş dizi ata). emit(event, data) yöntemi, o olaya abone olan tüm callback'leri data ile çağırır.
Örnek çözümü göster
class EventEmitter ile başla, yapıcıda this.listeners = {} yap, on(event, callback) içinde this.listeners[event].push(callback) çağır, emit(event, data) içinde aboneleri cb(data) ile çağır.
Örnek çözüm:
class EventEmitter {
constructor() {
this.listeners = {};
}
on(event, callback) {
if (!this.listeners[event]) {
this.listeners[event] = [];
}
this.listeners[event].push(callback);
}
emit(event, data) {
if (this.listeners[event]) {
for (const cb of this.listeners[event]) {
cb(data);
}
}
}
}
Kendini test et
-
Observer deseninde 'emit' ne yapar?
- Yeni nesne üretir
- Abone listesini temizler
- Sınıfı gizler
- Bir olayı tüm abonelere bildirir
Cevabı göster
Bir olayı tüm abonelere bildirir — Doğru! emit, kayıtlı tüm callback'leri olay verisiyle çağırır.
-
Abone eklemeyi tamamla
class EventEmitter {
on(event, callback) {
this.listeners[event].____(callback);
}
}
Cevabı göster
class EventEmitter {
on(event, callback) {
this.listeners[event].push(callback);
}
}
-
Observer kavramlarını eşleştir
- Subject
- Olay kaynağı
- Observer
- Olay dinleyici
- on(event, cb)
- Abonelik ekleme
- emit(event, data)
- Olay yayınlama
Sıradaki ders: Module deseni - modern karşılaştırma
