JavaScript’te Oluşturucu Modeli – JSManifest

JavaScript'te Oluşturucu Modeli – JSManifest

JavaScript’te uygulamalar geliştirirken bazen karmaşık nesneler oluşturmakta zorlanabilirsiniz. Kodunuzda bu belirli noktaya ulaştığında, uygulamanız büyüdükçe çok daha karmaşık hale gelebileceğinden daha önemli hale gelir.

İyi haber şu ki, bu karmaşıklığı basit ve daha küçük adımlara bölmenin yolları var. Ve bugün bunun üzerinden geçeceğiz.

Bu makale, bu durumlarda size yardımcı olacak bir tasarım modeli üzerinden geçecektir.

Oluşturucu Tasarım Modeli

Bugün üzerinde duracağımız tasarım deseni, yaygın olarak Oluşturucu Tasarım Deseni, karmaşık nesnelerin oluşturulmasına yardımcı olmak için kullanılan bir kalıptır. Nesne yapımını temsilinden ayırmaya yardımcı olur, bu da bunu farklı temsiller oluşturmak için yeniden kullanmamıza yardımcı olur.

Aşağıdaki adımları ortaya koymaktadır:

  1. bu temel sınıf iş mantığını içerir

    • Ayrıca oluşturulan nesneyi alır ve değerleri ayarlamaya devam eder.
  2. Nesneleri oluşturmaktan sorumlu kodu ayırın inşaatçılar— sonuçta aynı zamanda sadece nesneler/sınıflardır.

    • Tüm bu inşaatçılar sorumlu olacak adımları tanımlama karmaşık nesneleri oluşturmak için.
  3. adı verilen isteğe bağlı bir sınıf kullanabilir. Müdür

    • Yöneticiler, yaygın olarak oluşturulmuş nesneleri oluşturmak için adımların belirli bir sırayla yürütülmesini sağlayan yöntemlerin tanımlanmasına dahil olurlar.

Oluşturucu Modeli başka hangi sorunları çözüyor?

Daha önce belirtildiği gibi, oluşturucu desenine genellikle en çok, karmaşık nesnelerin yapılarını basitleştirmeye yardımcı olacak bir yola ihtiyacımız olduğunda ihtiyaç duyulur, bu nedenle bunu kodunuza dahil etmenin en iyi zamanı, o noktaya ulaştığınız veya büyük hale geldikleri zamandır.

Aşağıdaki örnek koda bir göz atalım ve gelecekte yönetmenin neden zor olabileceğini görelim:

class Frog {
  constructor(name, weight, height, gender) {
    this.name = name
    this.weight = weight 
    this.height = height 
    this.gender = gender
  }

  eat(target) {
    console.log(`Eating target: ${target.name}`)
  }
}

Burada bir Frog sınıf. Yukarıdaki örneğe bakarak bulabileceğiniz sorunlardan bazıları nelerdir?

Karşılaştığınız veya gelmemiş olabileceğiniz bir konu parametrelerdir. Özellikle bu satıra atıfta bulunuyorum:

constructor(name, weight, height, gender) {

Bizim Frog sınıf tanımı, ne kadar az satır tükettiğimizi görünce anlaşılması kolay görünüyor. Ancak, somutlaştırmaya çalıştığımızda tamamen farklı bir hikaye. Frog örnekler:

const bob = new Frog('Bob', 9, 2.2, 'male')

Karayipler’e altı aylık bir tatil gezisine çıkmaya karar verdiyseniz, ortadaki bu iki parametrenin ne anlama geldiğini ne kadar iyi hatırlayacağınızı düşünüyorsunuz? Gerçekten ne anlama geldiklerini açıkça anlayabilmek için geri dönüp kaynak kodunu kontrol etmek zorunda kalacaksınız.

Bu, özellikle bu parametrelerin her ikisi de geçerli olduğunda bir sorundur. aynı tip! Herhangi bir geliştirici, dizinin konumunu kolayca karıştırabilir. weight veya height bir örneği başlatırken parametreler Frogve gerçek dünya senaryosunda bu durumlar özellikle sağlık sektörü gibi sektörlerde önemlidir çünkü bir veri uyuşmazlığı potansiyel olarak şirketlere büyük paralara mal olabilir!

Peki bu nasıl basitleştirilir? kullanarak tahmin ettin Oluşturucu deseni!

Modelle basitleştirilmiş, kodun nasıl görüneceği aşağıda açıklanmıştır:

class FrogBuilder {
  constructor(name, gender) {
    this.name = name
    this.gender = gender
  }

  setWeight(weight) {
    this.weight = weight
    return this
  }

  setHeight(height) {
    this.height = height
    return this
  }

  build() {
    if (!('weight' in this)) {
      throw new Error('Weight is missing')
    }
    if (!('height' in this)) {
      throw new Error('Height is missing')
    }
    return new Frog(this.name, this.weight, this.height, this.gender)
  }
}

const leon = new FrogBuilder('Leon', 'male')
  .setWeight(14)
  .setHeight(3.7)
  .build()

Artık oluştururken neler olduğunu açıkça görebiliyoruz. Frog örnekler!

Devam edelim ve yapıcıya bakalım ve yeniden çalışmadan ne kazandığımızı görelim:

constructor(name, gender) {
    this.name = name
    this.gender = gender
  }

bu FrogBuilder aşağı doğru başlatırken parametre sayısını azaltır 4 ile 2 çünkü onları uygulama detaylarına taşır. Bu, yalnızca anlamayı kolaylaştırmakla kalmaz, aynı zamanda somutlaştırırken okunması daha doğal görünür:

const sally = new FrogBuilder('Sally', 'female')

Önceden kolayca unutabilirdik nerede, ne zamanveya nasıl biz ayarladık weight ve height özellikleri Frog:

const bob = new Frog('Bob', 9, 2.2, 'male')

Yeni yaklaşımla, inşaatçı (FrogBuilder) bu sorunu, şu konularda yolumuza devam etmek için daha açık fırsatları teşvik ederek basitleştirir:

const sally = new FrogBuilder('Sally', 'female')
  .setWeight(5)
  .setHeight(7.8)
  .build()

console.log(sally)

Ve aynen böyle, sonunda aynı sonuç ancak şimdi biz insanlar için daha kolay yönetilebilir ve okunabilir hale geldi!

Devam edelim ve başka bir örnek alalım.

Bol alanların ve iç içe nesnelerin büyük, sistematik adım adım başlatılmasını gerektiren karmaşık bir nesneye sahip olduğumuzu hayal edelim. Bu, birçok parametreye sahip büyük bir kurucunun içine gömülebilir veya hatta kodunuz boyunca dağılabilir.

Örneğin, devam edelim ve bir Car nesnesinin nasıl oluşturulacağını düşünelim. Basit bir araba yapmak için dört tekerlek, bir direksiyon simidi, frenler ve gaz pedalları yapmanız gerekir. Peki ya açılır tavan ve klima gibi ek özelliklere sahip bir kamyon istiyorsanız?

Bu görevin görünüşte en kolay çözümü, temel Car sınıfını genişletmek ve her biri parametrelerin parçalarını kapsayan bir dizi alt sınıf oluşturmaktır. Ancak, bunu düşünürseniz, renkli pencereler gibi yeni parametrelerle her karşılaştığınızda yeni alt sınıflar oluşturmak zorunda kalma sorunuyla karşı karşıya kalacaksınız. Ve bu her gerçekleştiğinde hiyerarşiniz daha da büyüyecek.

bu başka yaklaşım, tabanda devasa bir kurucu oluşturmayı içerir Car araba nesnesini kontrol eden tüm olası parametre çeşitlerini işleyen sınıf. Bu, alt sınıflar için herhangi bir ihtiyacı ortadan kaldırırken, yine de yeni bir problem ortaya çıkarmaktadır:

Her parametreyi işlemeye çalışan dev bir kurucunuz olduğunda, çoğu durumda bu kötü bir fikirdir çünkü parametrelerin çoğu aslında kullanılmayacaktır. Bu, yapıcı bloğun anlaşılmasını ve sürdürülmesini gereksiz yere zorlaştırır.

Örneğin, çoğu arabanın açılır tavana ihtiyacı bile yoktur, bu nedenle açılır tavanla ilgili parametreler zamanın %99’unda oldukça işe yaramaz hale gelebilir.

Çö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.