Observer Pattern – Javascript Design Paterns Series

Observer Pattern (Gözlemci Deseni), bir nesnenin durumu değiştiğinde, bu değişikliği otomatik olarak bildirmek için kullanılan bir tasarım kalıbıdır. Bu desene, bir “subject” ve bir veya daha fazla “observer” (gözlemci) bulunur. Konunun durumu değiştiğinde, gözlemciler bu değişiklikten haberdar edilir ve gerekli işlemleri yaparlar.

Neden ve Nerede Kullanılır?

• Gevşek Bağlantı (Loose Coupling): Konu ve gözlemciler arasında sıkı bir bağlantı kurulmaz. Bu sayede, gözlemcilerin konudan bağımsız olarak değiştirilebilmesi sağlanır.
• Reaktive: Bir nesnenin durumunu sürekli kontrol etmek yerine, değişiklik olduğunda otomatik olarak bildirim almayı sağlar.
• Event Handlig: Olay işleme ve dinamik kullanıcı arayüzleri oluşturmak için kullanılır. Örneğin, kullanıcı arayüzlerinde, model verileri değiştiğinde görüntü güncellemeleri yapmak için kullanılır.
• Haberleşme: Birçok bileşen arasında haberleşmeyi düzenlemek ve organize etmek için kullanılır.

Örnek Kod:

class Subject {
  constructor() {
    this.observers = [];
  }

  addObserver(observer) {
    this.observers.push(observer);
  }

  removeObserver(observer) {
    this.observers = this.observers.filter(obs => obs !== observer);
  }

  notifyObservers(data) {
    this.observers.forEach(observer => observer.update(data));
  }
}

class Observer {
  constructor(name) {
    this.name = name;
  }

  update(data) {
    console.log(`${this.name} received data: ${data}`);
  }
}

// Kullanım
const subject = new Subject();

const observer1 = new Observer("Observer 1");
const observer2 = new Observer("Observer 2");

subject.addObserver(observer1);
subject.addObserver(observer2);

subject.notifyObservers("Hello, Observers!");

// Observer 1 ve Observer 2'nin güncelleme alacağını gösterir
// "Observer 1 received data: Hello, Observers!"
// "Observer 2 received data: Hello, Observers!"

subject.removeObserver(observer1);
subject.notifyObservers("Another update!");

// Sadece Observer 2'nin güncelleme alacağını gösterir
// "Observer 2 received data: Another update!"

Açıklama

• ‘Subject’ sınıfı, gözlemcileri yönetir. ‘addObserver’ ve ‘removeObserver’ yöntemleri ile gözlemciler eklenir veya çıkartılır. ‘notifyObservers’ yöntemi ile tüm gözlemcilere bildirim gönderilir.
• ‘Observer’ sınıfı, gözlemcileri temsil eder ve ‘update’ yöntemi ile güncellemeleri alır.
• Kullanım kısmında, ‘subject’ nesnesi oluşturduk ve ili gözlemci (‘observer1’ ve ‘observer2’) ekledik. ‘notifyObservers’ yöntemi çağrıldığında, her iki gözlemciye de bildirim gönderilir. ‘observer1’ çıkarıldıktan sonra, sadece ‘observer2’ güncelleme alır.

Özetle

Observer Pattern, bir nesnenin durum değişikliklerini diğer nesnelere bildirmek için kullanır. Bu desen, gevşek bağlılı sağlayarak bileşenler arasındaki bağımlılığı azaltır ve dinamik, reaktif uygulamalar geliştirmeyi kolaylaştırır. Özellikle olay işleme ve kullanıcı arayüzü güncellemelerinde sıkça kullanılır.