Tasarım deseni, yazılım tasarımında yaygın olarak yinelenen bir sorunu çözen bir şablondur.

Yayınla-abone ol modeli olarak da bilinen gözlemci modeli, davranışsal bir modeldir. Gözlemledikleri nesnede yayınlanan herhangi bir olay hakkında birden çok nesneyi veya aboneyi bilgilendirmenizi sağlar.

Burada gözlemci tasarım modelini TypeScript'te nasıl uygulayacağınızı öğreneceksiniz.

Gözlemci Modeli

Gözlemci modeli, yayıncı ve aboneleri arasında birden çoğa bir ilişki tanımlayarak çalışır. Yayıncıda bir olay meydana geldiğinde, o olaya ilişkin tüm aboneleri bilgilendirir. Bu modelin yaygın bir örneği, JavaScript olay dinleyicileri.

Bağlam açısından, mağazanızdaki ürün sayısını izleyen bir envanter izleyici oluşturduğunuzu varsayalım. Bu durumda, mağazanız konu/yayıncı, envanteriniz ise gözlemci/abone olur. Gözlemci tasarım modelini kullanmak bu durumda en uygun olacaktır.

Gözlemci tasarım modelinde, konu sınıfınızın üç yöntemi uygulaması gerekir:

  • Bir eklemek yöntem. Bu yöntem, konuya bir gözlemci ekler.
    • instagram viewer
  • A ayırmak yöntem. Bu yöntem, bir özneden bir gözlemciyi kaldırır.
  • A bildir/güncelle yöntem. Bu yöntem, öznede durum değiştiğinde öznenin gözlemcilerine bildirimde bulunur.

Gözlemci sınıfınız bir yöntem uygulamalıdır, güncelleme yöntem. Bu yöntem, konusunun durumunda bir değişiklik olduğunda tepki verir.

Konu ve Gözlemci Sınıflarının Uygulanması

Bu modeli uygulamanın ilk adımı, doğru yöntemleri uyguladıklarından emin olmak için özne ve gözlemci sınıfı için arabirimler oluşturmaktır:

// Konu/Yayıncı Arayüzü
arayüzDers{
 insertObserver (gözlemci: Gözlemci): geçersiz;
 detachObserver (gözlemci: Gözlemci): geçersiz;
 notifyObserver(): geçersiz;
}
// Gözlemci/Abone Arayüzü
arayüzGözlemci{
güncelleme(konu: Konu): geçersiz;
}

Yukarıdaki kod bloğundaki arabirimler, somut sınıflarınızın uygulaması gereken yöntemleri tanımlar.

Somut Konu Sınıfı

Bir sonraki adım, aşağıdakileri uygulayan somut bir ders sınıfı uygulamaktır: Ders arayüz:

// Ders
sınıfMağazauygularDers{}

Ardından, Ders' nin durumu Mağaza sınıf. Öznenin gözlemcileri bu durumdaki değişikliklere tepki verecektir.

Bu durumda, durum bir sayıdır ve gözlemciler sayının artmasına tepki gösterecektir:

// konu durumu
özel Ürün Sayısı: sayı;

Ardından, bir dizi gözlemciyi başlatın. Bu dizi, gözlemcileri nasıl takip edeceğinizdir:

// gözlemcileri başlatıyoruz
özel gözlemciler: Gözlemci[] = [];

Gözlemci modelinin bazı uygulamalarını kullanarak bulabilirsiniz. a Set veri yapısı gözlemciyi takip etmek için bir dizi yerine. Set kullanmak, aynı gözlemcinin iki kez görünmemesini sağlayacaktır. Bunun yerine bir dizi kullanmak istiyorsanız, dizinizde yinelenen gözlemciler olup olmadığını kontrol etmelisiniz. eklemek yöntem.

Ardından, Dersyöntemleri—eklemek, ayırmak, Ve bildir/güncelle- beton sınıfınızda.

uygulamak için eklemek yöntemi, önce gözlemcinin zaten eklenmiş olup olmadığını kontrol edin ve eklenmişse bir hata atın. Aksi takdirde, kullanarak gözlemciyi diziye ekleyin. JavaScript dizisi yöntemi, itmek:

// Gözlemci(ler) ekleniyor
insertObserver (gözlemci: Gözlemci): geçersiz {
// Gözlemcinin zaten eklenmiş olup olmadığını kontrol edin
sabit gözlemciVar = Bu.observers.includes (gözlemci);
eğer (gözlemciVarsa) {
fırlatmakyeniHata('Gözlemci zaten üye oldu');
 }
// yeni gözlemci ekle
Bu.gözlemciler.itmek(gözlemci);
}

Ardından, ayırmak dizini bulup JavaScript kullanarak diziden kaldırarak yöntem ekleme yöntem.

Ayırmaya çalıştığınız gözlemcinin zaten ayrılmış olduğu veya en başta abone olmadığı senaryolar olabilir. Gözlemcinin duruma göre dizide mi yoksa kümede mi olduğunu kontrol etmek için bir koşullu ifade ekleyerek bu senaryoları ele almalısınız.

// Gözlemci(ler)i ayırma
detachObserver (gözlemci: Gözlemci): geçersiz {
konsol.kayıt(`Gözlemciyi ayırmak ${JSON.stringify (gözlemci)}`);
sabit gözlemci Dizini = Bu.observers.indexOf (gözlemci);
eğer (observerIndex -1) {
fırlatmakyeniHata("Gözlemci mevcut değil");
 }
Bu.gözlemciler.splice(gözlemci dizini, 1);
 konsol.log('Gözlemci ayrıldı...');
}

Ardından, bildir/güncelle yöntemi, gözlemciler listeniz üzerinde döngü yaparak ve güncelleme her birinin yöntemi:

// Gözlemcileri Bildirmek
notifyObserver(): geçersiz {
 konsol.log('Gözlemcilere bildiriliyor...');
için (sabit gözlemci ile ilgiliBu.gözlemciler) {
 gözlemci.güncelleme(Bu);
 }
}

Son olarak, için Ders sınıf, durumu manipüle eden bir yöntem uygular ve ardından gözlemcileri çağırarak değişikliği gözlemcilere bildirir. bildir/güncelle yöntem. Bu örnek, bir öznenin bir eylemi nasıl gerçekleştirebileceğinin ve ardından gözlemcileri nasıl bilgilendirebileceğinin basitleştirilmesidir:

// Durumu değiştirme ve gözlemcileri bilgilendirme
yeniÜrün (ürünler: numara): geçersiz {
Bu.numberOfProducts += ürünler;
 konsol.log('Mağazaya yeni ürün eklendi');
Bu.notifyObserver();
}

Beton Gözlemci Sınıfları

Yayıncıya abone olmak için bir gözlemci sınıfı veya sınıfları oluşturun. Her gözlemci sınıfı, Gözlemci arayüz.

Gözlemci sınıfları bir uygulayacak bildir/güncelle sadece gözlemledikleri öznenin çağırması gereken yöntem. Bu yöntem, konunun durumundaki bir değişikliğe yanıt olarak çalıştırmanız gereken tüm iş mantığını içermelidir:

// Somut Gözlemci 1
sınıfEnvanteruygularGözlemci{
güncelleme(): geçersiz {
 konsol.log('Mağazaya yeni ürün eklendi, envanter güncelleniyor...');
// Gerçek iş mantığı buraya gelir...
	}
}
// Beton Gözlemcisi 2
sınıfMüşteriuygularGözlemci{
güncelleme(): geçersiz {
 konsol.log('Mağazaya yeni ürün eklendi, gidip bakmalıyım...');
// Gerçek iş mantığı buraya gelir...
 }
}

Gözlemci Modelini Kullanma

Bu modeli kullanmak için somut özne ve gözlemci sınıflarını örnekleyin. Bunu yaptıktan sonra, Konuyu arayın eklemek yöntemini kullanın ve Observer örneğini argüman olarak iletin. Yanıt olarak, özne bu örneği gözlemci listesine ekleyecektir:

// Özne ve Gözlemci Örnekleme
sabit mağaza = yeni Mağaza();
sabit envanter = yeni Envanter();
sabit müşteri = yeni Müşteri()
// Nesneleri yayıncıya kaydetme
mağaza.attachObserver(envanter);
mağaza.attachObserver(müşteri);
// Konu durumunu değiştirme
mağaza.yeni ürün(30);

Bu kod bir durum değişikliğini simüle eder. Değişiklik, bildirim yöntemini tetikleyecektir. Ders sınıf. Bu yöntem, sırayla, çağırır bildirmek gözlemcilerinin her biri üzerinde yöntem. Her gözlemci daha sonra kendi iş mantığını çalıştıracaktır.

Bu kalıbı yalnızca bir nesnenin durumundaki değişiklikler diğer nesneleri etkilediğinde ve ilgili nesne kümesi bilinmiyor veya dinamik olduğunda kullanmalısınız.

Gözlemci Modelini Kullanmanın Avantajları

Kodunuzda bu kalıbı kullanmak, açma/kapama ilkesini korumanıza olanak tanır. Konu kodunu değiştirmeden istediğiniz kadar abone ekleyebilir, çalışma zamanında nesneler arasında ilişki kurabilirsiniz.