Javscript

JavaScript’te Cephe Tasarım Modeli – JSManifest

JavaScript’te uygulamalar geliştirirken, değer açısından olumlu etkisini sorgulamamıza neden olan gereksiz kodlarla karşılaşmak nadir değildir. Fazlalık, geliştiricilerin sıklıkla yapmaktan kaçınmaya çalıştıkları yaygın bir uygulamadır, çünkü fazla fazlalık, kod boyutundaki artışların yanı sıra kodun sürdürülebilirliğinde azalma gibi hoş olmayan geliştirme deneyimlerine kolayca yol açar.

Bu sorunu çözmenin harika bir yolu, Cephe Tasarım Modelidir. Bu yazıda Cephe ve buna benzer sorunları çözmek için nasıl etkili bir model olduğunu inceleyeceğiz.

Fazlalığı azaltmanın yanı sıra, cephe deseni, işleri daha da basitleştirmek amacıyla çeşitli arayüzleri daha zarif arayüzlerde birleştiren daha yüksek seviyeli bir arayüz tanımlamada da iyi bir iş çıkarır. Genellikle gereksiz yere karmaşık kod parçalarını daha basit bir yapıya sarmak için kullanılır, böylece müşteri umursamadıkları adımlardan sorumlu olmaz.

cephe-tasarım-desen-birleştirici-karmaşık-arayüzden-basit-arayüze

Diyelim ki basit bir oyun oluşturuyoruz ve bir şeyi ilk uygulamamızdan biri, bir oyunun tanımı olacak. Human sınıf. Kodumuzun diğer bölümleri tarafından bu insan sınıfının, özellikler olarak birkaç vücut parçasını içermesi beklenir: Eye, Ear, Arm, Leg, Feet, Nose, Mouth, Neckve Stomach:

class Human {
  constructor(opts = {}) {
    this.leftEye = opts.leftEye
    this.rightEye = opts.rightEye
    this.leftArm = opts.leftArm
    this.rightArm = opts.rightArm
    this.leftFoot = opts.leftFoot
    this.rightFoot = opts.rightFoot
    this.leftEar = opts.leftEar
    this.rightEar = opts.rightEar
    this.nose = opts.nose
    this.mouth = opts.mouth
    this.neck = opts.neck
    this.stomach = opts.stomach
  }
}

class Eye {}
class Ear {}
class Arm {}
class Leg {}
class Feet {}
class Nose {}
class Mouth {}
class Neck {}
class Stomach {}

Şimdi bir tanımlayalım Profile olarak adlandırılan profil karakterini ayarlamak için bir yöntemi olan sınıf setCharacter:

class Profile {
  setCharacter(character) {
    validateCharacter(character)
    this.character = character
  }
}

Gerçek bir dünya senaryosunda elbette bundan onlarca kat daha uzun olurdu, bu yüzden yalnızca kalıba ve yalnızca ilgili kodu sunarak çözdüğü soruna odaklandığımızı unutmayın.

biz dahil ettik validateCharacter bizim başında setCharacter çünkü hataların bilmeden oluşmamasını sağlamak için oluşturulmuş nesneleri doğrulamak için herhangi bir yazılımın gerekli bir bileşenidir. Bu aynı zamanda Cepheyi göstermek için harika bir kurulum olur.

İşte uygulama:

function validateCharacter(character) {
  if (!character.leftEye) throw new Error(`Missing left eye`)
  if (!character.rightEye) throw new Error(`Missing right eye`)
  if (!character.leftEar) throw new Error(`Missing left ear`)
  if (!character.rightEar) throw new Error(`Missing right ear`)
  if (!character.nose) throw new Error(`Missing nose`)
  if (!character.mouth) throw new Error(`Missing mouth`)
  if (!character.neck) throw new Error(`Missing neck`)
  if (!character.stomach) throw new Error(`Missing stomach`)
}

yani bizim içimizde validateCharacter call insan vücudunun her yerini kontrol etmeye devam eder ve en az bir vücut parçası eksikse hata verir.

Kodumuzu müşteriymişiz gibi kullanmaya çalışalım:

const bob = new Human()
const bobsProfile = new Profile()
bobsProfile.setCharacter(bob)

Kodu çalıştırmak bir hatayla sonuçlanır:

Peki müşteri bunu nasıl düzeltir? Kolay! Sadece her bir vücut parçasını oluşturmaları ve örnekte var olmalarını sağlamaktan sorumlu olmaları gerekir:

const bobsLeftEye = new Eye()
const bobsRightEye = new Eye()
const bobsLeftEar = new Ear()
const bobsRightEar = new Ear()
const bobsNose = new Nose()
const bobsMouth = new Mouth()
const bobsNeck = new Neck()
const bobsStomach = new Stomach()
const bobsLeftArm = new Arm()
const bobsRightArm = new Arm()
const bobsLeftLeg = new Leg()
const bobsRightLeg = new Leg()
const bobsLeftFoot = new Feet()
const bobsRightFoot = new Feet()

bob.leftEye = bobsLeftEye
bob.rightEye = bobsRightEye
bob.leftEar = bobsLeftEar
bob.rightEar = bobsRightEar
bob.nose = bobsNose
bob.mouth = bobsMouth
bob.neck = bobsNeck
bob.stomach = bobsStomach
bob.leftArm = bobsLeftArm
bob.rightArm = bobsRightArm
bob.leftLeg = bobsLeftLeg
bob.rightLeg = bobsRightLeg
bob.leftFoot = bobsLeftFoot
bob.rightFoot = bobsRightFoot

Artık kodumuz hatasız çalışıyor. Bununla birlikte, uygulamalı olarak devam ettiyseniz, yalnızca karakter ve profil oluşturmayı önemsediğimizi fark etmiş olabilirsiniz. Burada bazı sorunlarla karşılaştığımıza dikkat edin:

  1. kod daha uzun
  2. Kod daha karmaşık
  3. Kodun müşteri için kullanımı çok kolay değil (orijinal üç liner ile karşılaştırıldığında)
  4. artıklık – Birden fazla alanda fazlalık vardır. Fazlalığa sert bir darbe, tekrar tekrar bahsetmektir. "bob" kodumuz boyunca.
  5. Topu müşteriye verdik (başka bir deyişle, kodumuzun kullanıcılarını her bir vücut parçasını oluşturmaktan ve geçirmekten sorumlu). Çoğu zaman bu iyi bir şey olur – istek müşteri koduna çekim yapma yeteneği vermek için. Ama bu durum çok daha farklı. Doğrudan profili oluşturmaya ve yalnızca profilin özellikleri üzerinde ilerlemeye karar verirlerse, işi onlara yaptırmanın bir anlamı yoktur.

Şimdi Cephemizi oluşturalım ve müşteriler için bu sorunları nasıl çözeceğini tanımlayalım:

class Profile {
  setCharacter(character) {
    if (!character.leftEye) character.leftEye = new Eye()
    if (!character.rightEye) character.rightEyye = new Eye()
    if (!character.leftEar) character.leftEar = new Ear()
    if (!character.rightEar) character.rightEar = new Ear()
    if (!character.nose) character.nose = new Nose()
    if (!character.mouth) character.mouth = new Mouth()
    if (!character.neck) character.neck = new Neck()
    if (!character.stomach) character.stomach = new Stomach()
    this.character = character
  }
}
const bob = new Human()
const bobsProfile = new Profile()
bobsProfile.setCharacter(bob)

Bizim Profile Cephe’nin kendisi olur ve vücut parçalarının her uygulamasını bir geri dönüş olarak etkin bir şekilde kapsüller, böylece müşteri kodunun yalnızca tarafından sağlanan arayüze odaklanması gerekir. Profile.

Onlara sadece her bir vücut parçasını inşa etmek ve ayarlamak için gereksiz adımları atlama seçeneği vermiyoruz, aynı zamanda isterlerse kendi başlarına tam olarak kontrol etme seçeneği de veriyoruz.

Ayrıca, kodumuzun kullanıcısının arayüze sıkı sıkıya bağlı olduğuna dikkat edin. Profile ortaya çıkarır.

İşte bir örnekten alınan bir örnek öz bir cephe uygular. Bu örnekteki kalıbın amacı, birden çok işlemi tek bir çağrıya yerleştirmektir. İş mantığı perspektifinde bu, müşterinin gerçekten umursamadığı bir çevrimiçi e-kitap satın alma işlemini gerçekleştirmek için müşteri kodu için bir arabirimi temsil edebilir. nasıl kitap satın alındı ​​- kullanıcıları için yalnızca bir “kaydet” ve “gönder” davranışına ihtiyaç duyuyor:

var module = (function () {
  'use strict'

  
  var book = {
    get: function () {
      
      console.log('Getting Book Info...')
    },
    set: function (bID, uID) {
      
    },
    download: function () {
      console.log('downloading')
    },
    mailing: function () {
      console.log('Thank You for Subscribing.')
    },
  }

  return {
    
    facade: function (data) {
      book.set(data.id, data.userID)
      book.get()
      if (data.download) book.download()
      if (data.mailing) book.mailing()
    },
  }
})()

İstemci kodu bu arabirimi kullanır ve uygulama ayrıntıları hakkında endişelenmenize gerek yoktur:

module.facade({
  id: 2,
  userID: 123123,
  download: true,
  mailing: true,
})

Gerçek Dünya Analojisi

Örnek olarak bakkalları ele alalım. Market alışverişi yaptığınızda ve kasiyer, ödediğiniz ürünün fiyatını size bildirdiğinde, nakit veya kredi kartı ile ödeme seçeneğiniz vardır. Bu iki ödeme yöntemi farklı olsa da sonuçta ikisi de aynı amaca ulaşır. Günümüzde covid19 pandemisinden bu yana yeni bir popüler ödeme yöntemi, ödemek için dokunun bu da, artık bir tür parayı kaydırmak veya takas etmek zorunda kalmamamız anlamında farklıdır.

Bu, ödeme için yeni bir yol sağladığı cephe modelidir (yeni bir arayüz) aynı şeyi yapan kullanıcılara.

Gerçek Dünya Kodu Örneği

ts-morf

En sevdiğim açık kaynaklı projelerimden biri ts-morf. Bu kitaplık, bir TypeScript derleyici API’si etrafında bir sarmalayıcı görevi görür. “TypeScript ve JavaScript kodunu programlı olarak gezinmenin ve değiştirmenin daha kolay yolu”. Orijinal TypeScript derleyici API’si kolayca karmaşık hale gelebilir, bu nedenle ts-morph bu karmaşıklıkları kapsar ve bunun yerine kullanılacak istemci koduna tamamen yeni, kullanımı kolay bir arabirim sunar. Ben sık sık ts-morph kullanıcısıyım, bu yüzden bunun TypeScript API ile geliştirmeyi çok daha kolay hale getirdiğine dair kişisel düzeyde kefil olabilirim.

Adaptör ve Flyweight modelinden farklılıklar

Cephe ve Adaptör

Bazen cephe tasarım deseni, Adaptör tasarım deseni ile karıştırılabilir. Ancak fark, Cephe’nin istemcinin kullanması için tamamen yeni bir arayüz sunabilmesidir, oysa Adaptörün amacı, daha yeni özellikler ve/veya davranışlarla genişletmeye çalışırken önceki arayüzlerle geriye dönük uyumlu olmaktır.

Cephe vs Flyweight

Cephede, istemci koduna, tüm bir nesneler sistemini temsil eden (özdeş nesnelerin yeni kopyalarını içerebilen) temsil eden bir arayüz verilirken, sinek ağırlığı modelindeki istemciye, paylaşılması amaçlanan nesneleri üretmesi için bir arayüz verilir. özdeş olduğunda, bu hafızayı korumak için etkili bir yaklaşımdı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!

İlgili Makaleler

Bir cevap yazın

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

Başa dön tuşu