JavaScript’te Aracı Modeli – JSManifest

JavaScript'te Aracı Modeli – JSManifest

Bu yazıda, arabulucu desen ve JavaScript kullanarak birini uygulamak. JavaScript’teki aracılar, bir dizi nesne arasındaki tüm etkileşimleri içine alan merkezi bir arayüzü ortaya çıkarmamıza izin verir.

Bu kalıp, bir programın çalışma davranışını değiştirdiği ve etkileşimleri koordine etmekten sorumlu olduğu için, bir davranış kalıbı olarak kabul edilir.

Uygulamanızın boyutu büyüdükçe, birbiriyle doğrudan etkileşimde bulunan birden çok nesneniz varsa, bir aracıyı tanıtma ihtiyacı daha fazla talep görür.

Bir RPG oyunu geliştirmenin yarısını bitirdiğinizi ve bir dizi sınıf veya işlev tasarladığınızı varsayın. yapmadı arabulucu modelini kullanın. Bir göz atalım ve neye benzeyebileceğini görelim:

Şimdi kendinizi altında yatan kodu okumaya ve korumaya çalıştığınızı hayal edin. Her şeyi kendi başınıza takip etmeniz ve kimin fonksiyon1 ile iletişim kurar, bu işlev3 ile iletişim kurar işlev9, fonksiyon5 ile iletişim kurar fonksiyon10, fonksiyon8 şuradan veri alır fonksiyon10 ve ona iletir fonksiyon2vb. Elbette bu, hızla bir geliştiricinin en kötü kabusu haline gelir!

Bu koda aracı kalıbı tanıtırken, aracı nesne arasında bir yere yerleştirilecektir ve asıl sorumluluğu, aralarındaki tüm etkileşimi ve davranışı kapsamaktır, kendisini tüm bunları kendi başına halletme sorumluluğunu tayin eder.

Bu şuna benzer:

arabulucu kalıbı javascript daha organize

Şimdi görebileceğiniz gibi, aracı nesne arasında oturur ve artık nesneler kümesi arasındaki etkileşimlerden sorumlu olandır. Şimdi bu uygulamada hata ayıklamayı hayal edin. Buradaki modüllerden biri hata veriyorsa, bakılması gereken iki yerin aracı veya modülün kendisi olduğunu biliyoruz. Bu, mantığı daha belirgin bir şekilde ayırabildiğimiz için daha büyük bir kod tabanını korumayı kolaylaştırır.

Ek olarak, artık nesneler arasındaki yönün daha net bir resmine sahip olduğumuzdan, kodda bir şeyi değiştirmemiz gerektiğinde eskisinden çok daha az güçlük çekmesini sağlayabiliriz.

Arabulucu Modelini tanıtma zamanının geldiğini nasıl bilebiliriz?

Bunu tanıtma ihtiyacı, koddaki bir şey bittiğinde ortaya çıkabilir. çok fazla doğrudan ilişki diğer parçalarla. Bu noktada kodunuz muhtemelen kararsız olacaktır. Açıkça diğer nesnelere atıfta bulunmak yerine, tüm etkileşimlerinin merkezi bir nokta aracılığıyla koordine edilmesini sağlayarak, aralarındaki gevşek bağlantıyı teşvik etmeye yardımcı olur. arabulucu. Bu, bileşenlerimizin kullanılabilirliğini geliştirmemize yardımcı olur.

Gerçek Dünya Analojisi

İşte anlamanıza yardımcı olabilecek gerçek bir dünya benzetmesi nasıl bir arabulucu, verimliliği ve bunun kavramını getirmeye yardımcı olur:

Diğer öğrencilerle birlikte bir sınıftasınız ve öğretmenin yanında bir yığın kağıt var. Bunları dağıtmak istiyor ki her öğrenci bir tane alsın. Öğretmeniniz bir öğrenciye bir kağıt destesi dağıtıp, son öğrenci desteyi alana kadar desteyi arkasındaki öğrenciye iletmek yerine, kağıtları her öğrenciye kendisi iletmeye karar verir. Bundan, her çocuğun bir kağıt parçası almasını ve esasen bir arabulucu rolünü üstlenmesini sağlamaktan sorumludur. Sonunda son öğrenciye ulaşıldığında, odanın karşısındaki başka bir öğrenci elini kaldırarak “Bir kağıt almadım” diyor. Şimdi bu durumu “hata ayıklamaya” çalışıyorsunuz. Görevi her öğrenciye bir kağıt parçası sağlamak olduğu için, arabulucunun eksik kağıttan sorumlu olduğu sonucuna hemen varabilirsiniz. Ek olarak, kağıt yığınının şu anda bu noktada nerede olduğuna dair net bir tahmininiz de var.

Şimdi eğer öğretmen yığını öğrencilere aktarmaya karar verirse, öğrenciler hepsinin bir kağıt almasını sağlamakla yükümlüdürler ve bir öğrenci kağıt almadığını söyleyerek elini kaldırdığında, bu durumu “hata ayıklamak” oldukça zor olacaktır. Birincisi, bilmiyorsun nerede kağıt yığını bu noktada bulunur. İkincisi, neredeyse hiçbir fikrin yok kim süreci karıştırdı. sormak zorunda kalacaksın her öğrenci ve birisinin nasıl kağıt almadığını anlamak için destelerini kime verdiklerini sorun.

Web için JavaScript üzerinde geliştirme yapıyorsanız, zaten aracılar etrafında geliştiriyorsunuz demektir. DOM’da bir arabulucu örneği, belge içindeki DOM öğeleri arasındaki mantığı ve davranışı koordine edebildiği için nesnenin kendisidir. Bir giriş eleman ile type="radio" mevcut değeri tutabildiğinden hangi telsizin kontrol edileceğine karar verebildiği için arabulucu da olabilir.

Avantajlar

Birbirinizle doğrudan iletişim kuran birden fazla nesneniz olduğunda, esasen bir çoka çok ilişki hata ayıklama sırasında bir kabus haline gelebilir. Arabulucunun tanıtılması, bir arabulucuyu tanıtarak bu sorunun azaltılmasına yardımcı olacaktır. birden çok nesneler arasında akış

Diğer kayda değer faydalar arasında nesneler arasındaki bağımlılıkların azaltılması (gevşek bağlantı), çok daha hafif hatalar, kod bakımı ve okunabilirliği ile artan kolaylık sayılabilir.

Dezavantajları

Hayattaki tüm güzel şeylerde olduğu gibi, her şey mükemmel değildir. Aynı şey aracı model için de geçerlidir.

Örneğin, nesneler arasındaki tüm etkileşimleri koordine etmek için tek bir nesne noktasına sahip olmak, esasen, herhangi bir hata olması durumunda, onun tarafından kapsüllenen her şeyi etkileyeceği anlamına gelir. Bunun bir örneği, arabulucuların birden çok nesne arasındaki etkileşimlerin merkezi noktası olduğundan, uygulamanız büyüdükçe her zaman dolaylı olarak iletişim kurduklarından bunun bir performans sorunu haline gelmesi olabilir.

Bununla birlikte, nesnelerin bunu doğrudan birbirleriyle yapması yerine etkileşimleri yöneten bir aracıya sahip olmak arasında seçim yapmak neredeyse her zaman daha iyi bir seçim olacaktır. Nesnelerden birinde bir şeyi değiştirirsek ve bir şey bir istisna atarsa, uygulamanızın geri kalanında kolayca domino etkisi yaratabilir ve nereden başlayacağınızı bile bilmekte zorlanacaksınız. Daha önceki bir örnekteki gerçek dünya benzetmemiz gibi, kodunuzdaki her bir iletişim noktasını kontrol etmeniz gerekeceğinden, bu durumda hata ayıklamak gerçek bir kabus olacaktır.

Kod Örneği

Bir RPG oyunu yarattığımızı varsayalım ve uygulamak istediğimiz ilk özellikler bir Novice sınıf ve uygulama parti API’si. Bu parti kavramını hiç duymadıysanız, belirli bir hedefe birlikte ulaşmak için bir müttefik ekip oluşturmak için bir veya daha fazla kullanıcı grubunu bir araya getirdiğiniz zamandır.

bir tanımlayacağız Novice kurucunun yanı sıra Game ve Party. bu Novice yeni oyuncular oluşturmak için kullanılır, Party için bir API sağlar. Parti işlevsellik ve Game kullanacak arabulucu olacak Party arasındaki ilişkileri oluşturmak için Novice örnekler (kullanıcılar).

İşte bunun eylem halinde bir kod örneği:

function createId() {
  const S4 = function() {
    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
  }
  return (
    S4() +
    S4() +
    '-' +
    S4() +
    '-' +
    S4() +
    '-' +
    S4() +
    '-' +
    S4() +
    S4() +
    S4()
  )
}

function Novice(name) {
  this.name = name
  this.hp = 100
  this.id = createId()
  this.party = null
}

Novice.prototype.attack = function(target, hp) {
  target -= hp
  return this
}

const roy = new Novice('roy')
const ben = new Novice('ben')
const lucy = new Novice('lucy')
const sally = new Novice('sally')

function Party(leader, ...members) {
  this.id = createId()
  this.leader = leader
  this.members = members
}

function Game(options) {
  this.parties = {}

  if (options) {
    
  }
}

Game.prototype.createParty = function(leader, ...members) {
  const party = new Party(leader, ...members)
  this.parties[party.id] = party
  leader.party = party
}

Game.prototype.removeParty = function(leader) {
  delete this.parties[leader.party.id]
  leader.party = null
}

const game = new Game()
game.createParty(roy, ben, lucy)

Örnekten de anlaşılacağı gibi, Game birden fazla kullanıcı arasındaki taraf ilişkilerini koordine etmek için örnekler, kodun okunmasını ve bakımını çok daha kolay hale getirir ve arasındaki mantığı ayırır. Party ve Novice örnekler.

Aksi takdirde, mantığı doğrudan herhangi birinin tarafı olarak uygulamak zorunda kalırdık. Novice veya Party Arayüz, bu durumda onları birleştirmek pek mantıklı değil. Ve işler mantıklı gelmediğinde, bir sorun çıkması durumunda hata ayıklamayı zorlaştırır!

Çözüm

Ve bu, bu noktanın sonunu tamamlıyor! 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.