JavaScript’te Kompozit Tasarım Modelinin Gücü – JSManifest

JavaScript'te Kompozit Tasarım Modelinin Gücü – JSManifest

Bu yazıda, üzerinden geçeceğiz Kompozit Tasarım Deseni JavaScript’te. Yazılım mühendisliğinde, bileşik desen, bir grup nesnenin tek bir nesnenin tek bir örneği gibi ele alınacağı ve bu nesneler ve kompozisyonlarla tek biçimlilikle sonuçlanan bir modeldir.

Bir kompozitin amaçları, oluşturmak birden fazla nesneyi belirli bir ağaç yapısı. Bu ağaç yapısı bir parça-bütün hiyerarşisi.

Bileşik deseni daha ayrıntılı olarak anlamak için, parça-bütünün ne olduğunu ve görsel bir perspektifte nasıl görüneceğini anlamamız gerekir.

Terim olarak, bir parça-bütün ilişkisi, temelde bir koleksiyondaki her nesnenin bir Bölüm arasında tüm kompozisyon. Bu “tüm” kompozisyon bir koleksiyondur parçalar. Şimdi bir parça bütünü düşündüğümüzde hiyerarşiher birinin bulunduğu bir ağaç yapısı bireysel “yaprak” veya “düğüm” aynı muamele ağaçtaki diğer her yaprak veya düğüm gibi. Bu, bir grup veya nesne koleksiyonunun (yaprakların/düğümlerin alt ağacı) aynı zamanda bir yaprak veya düğüm olduğu anlamına gelir.

Görsel bir perspektiften bakıldığında, bunun bir örneği şöyle görünebilir:

Parça-bütün kavramını daha net anladığımıza göre, şimdi terime geri dönelim. bileşik. Bir kompozitin amacının, oluşturmak Bu nesnelerden herhangi biri (yapraklar/düğümler) bu kavramı temsil eden bir ağaca dönüştürülür.

Ve böylece bileşik tasarım deseni, bir koleksiyondaki her bir öğenin diğer koleksiyonları tutabilir derinden iç içe yapılar oluşturmalarını sağlar.

anatomi

Ağaç yapısındaki her düğüm ortak bir dizi özellik ve yöntemi paylaşır bu, bireysel nesneleri desteklemelerini ve onlara bir nesneler topluluğu gibi davranmalarını sağlar. Bu arayüz, bileşik koleksiyondaki her nesne üzerinde özyinelemeli ve yinelenen algoritmaların oluşturulmasını ve tasarımını destekler.

Deseni kim kullanıyor?

İşletim sistemleri, diğer dizinlerin içinde dizinler oluşturmamıza izin vermek gibi faydalı özelliklere yol açan modeli kullanır.

Dosyalar (bir dizindeki herhangi bir şeye başvurabiliriz ve “öğe” bu noktada daha mantıklı olan) yapraklar/düğümler (parçalar) tüm bileşik (dizin). Bu dizinde bir alt dizin oluşturmak aynı zamanda videolar, resimler vb. diğer öğeleri içeren bir yaprak/düğümdür. Ancak, bir dizin veya alt dizin aynı zamanda bir bileşiktir çünkü aynı zamanda bir parça koleksiyonudur (nesneler/dosyalar/vb).

React ve Vue gibi popüler kitaplıklar, sağlam, yeniden kullanılabilir arabirimler oluşturmak için bileşik desenden kapsamlı bir şekilde yararlanır. Bir web sayfasında gördüğünüz her şey bir bileşen. Web sayfasının her bileşeni ağacın bir yaprağıdır ve yeni bir yaprak oluşturmak için birden çok bileşeni bir araya getirebilir (bu olduğunda, bu bir bileşik ancak hala ağacın bir yaprağı). Bu, birçok nesneyi kullanan ölçeklenebilir uygulamalar oluşturmayı son derece uygun hale getirmenin yanı sıra, kitaplığın tüketicileri için geliştirmeyi çok daha kolay hale getirmeye yardımcı olduğu için güçlü bir kavramdır.

Bu modeli neden önemsemeliyiz?

Bunu koymanın en kolay yolu: Çünkü güçlü.

Bileşik tasarım desenini bu kadar güçlü yapan şey, bir nesneyi bileşik bir nesne olarak ele alma yeteneğidir. Bu mümkündür çünkü hepsinin ortak bir arayüzü vardır.

Bunun anlamı, başkalarıyla uyumsuzluk endişesi duymadan nesneleri yeniden kullanabilmenizdir.

Bir uygulama geliştirirken ve ağaç yapısına sahip nesnelerle uğraştığınız bir durumla karşılaştığınızda, bu kalıbı kodunuza uyarlamak çok iyi bir karar olabilir.

Örnekler

Diyelim ki, asıl amacı doktorların teletıp platformlarına hak kazanmasına yardımcı olmak olan yeni bir iş için bir uygulama oluşturuyoruz. Bunu, kanunen zorunlu kılınan zorunlu belgeler için imza toplayarak yaparlar.

biz bir olacak Document sahip olacak bir sınıf signature varsayılan değeri olan özellik false. Doktor belgeyi imzalarsa, signature değerini imzalarına çevirmelidir. Ayrıca bir tanımlıyoruz sign Bu işlevselliğin gerçekleşmesine yardımcı olmak için üzerine bir yöntem.

Bu nasıl Document gibi görünecek:

class Document {
  constructor(title) {
    this.title = title
    this.signature = null
  }
  sign(signature) {
    this.signature = signature
  }
}

Şimdi bileşik deseni uyguladığımızda, benzer yöntemleri destekleyeceğiz. Document tanımlamıştır.

class DocumentComposite {
  constructor(title) {
    this.items = []
    if (title) {
      this.items.push(new Document(title))
    }
  }

  add(item) {
    this.items.push(item)
  }

  sign(signature) {
    this.items.forEach((doc) => {
      doc.sign(signature)
    })
  }
}

Şimdi desenin güzelliği geliyor. En son iki kod parçacığımıza dikkat edin. Bunu görsel bir perspektiften görelim:

bileşik desen belgesi 1

Harika! Doğru yoldayız gibi görünüyor. Bunu biliyoruz çünkü elimizdekiler daha önce sahip olduğumuz diyagrama benziyor:

bileşik desen belgesi 2

Böylece ağaç yapımız 2 yaprak/düğüm içerir, Document ve DocumentComposite. İkisi de aynı arayüzü paylaşır, böylece ikisi de aynı işlevi görür. “parçalar” arasında bütün bileşik ağaç.

Buradaki şey, ağacın bir yaprağının/düğümünün olmasıdır. olumsuzluk bir bileşik ( Document) dır-dir olumsuzluk bir koleksiyon veya nesne grubu, bu yüzden orada duracak. Ancak, bir yaprak/düğüm dır-dir bir bileşik, bir parça koleksiyonunu tutar (bizim durumumuzda, items). Ve unutmayın, Document ve DocumentComposite bir arayüzü paylaşır, sign yöntem.

Peki güç bunun neresinde? Her ne kadar DocumentComposite sahip olduğu için aynı arayüzü paylaşır. sign yöntem aynen şu şekilde Document değil, nihai hedefi korurken aslında daha sağlam bir yaklaşım uyguluyor.

Yani bunun yerine:

const pr2Form = new Document(
  'Primary Treating Physicians Progress Report (PR2)',
)
const w2Form = new Document('Internal Revenue Service Tax Form (W2)')

const forms = []
forms.push(pr2Form)
forms.push(w2Form)

forms.forEach((form) => {
  form.sign('Bobby Lopez')
})

Bileşikten yararlanarak daha sağlam hale getirmek için kodumuzu değiştirebiliriz:

const forms = new DocumentComposite()
const pr2Form = new Document(
  'Primary Treating Physicians Progress Report (PR2)',
)
const w2Form = new Document('Internal Revenue Service Tax Form (W2)')
forms.add(pr2Form)
forms.add(w2Form)

forms.sign('Bobby Lopez')

console.log(forms)

Bileşik yaklaşımda, sadece sign Bir kez ihtiyacımız olan belgeleri ekledikten sonra tüm belgeleri imzalıyor.

sonucuna bakarak bunu teyit edebiliriz. console.log(forms):

bileşik desen belgesi 3

Bundan önceki örnekte, öğeleri bir diziye manuel olarak eklememiz, her belgede kendimiz döngü oluşturmamız ve sign onlara.

Şunu da unutmayalım ki bizim DocumentComposite öğelerin bir koleksiyonunu tutabilir.

Yani bunu yaptığımızda:

forms.add(pr2Form) 
forms.add(w2Form) 

Diyagramımız şuna dönüştü:

bileşik desen belgesi 4

Bu, 2 formu eklediğimiz için orijinal diyagramımıza çok benziyor:

bileşik desen belgesi 5

Ancak, ağacın son yaprağı yalnızca 2 yaprak oluşturduğu için ağacımız duruyor, bu son ekran görüntüsüyle tam olarak aynı değil. yerine yapsaydık w2form bunun yerine bir bileşik:

const forms = new DocumentComposite()
const pr2Form = new Document(
  'Primary Treating Physicians Progress Report (PR2)',
)
const w2Form = new DocumentComposite('Internal Revenue Service Tax Form (W2)')
forms.add(pr2Form)
forms.add(w2Form)

forms.sign('Bobby Lopez')

console.log(forms)

O zamanlar ağacımız büyümeye devam edebilir:

bileşik belge bileşik 7

Ve sonunda, zorunlu belgelerimizin imzalanmasına ihtiyaç duyduğumuz noktada yine aynı hedefe ulaştık:

nihai sonuç kompozit tasarım deseni

Ve bu, bileşik desenin gücüdür.

Çözüm

Ve bu yazının sonu burada bitiyor! Umarım bunu değerli bulmuşsunuzdur ve gelecekte daha fazlasını ararsınız!

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.