JavaScript’te Modül Modelinin Gücü – JSManifest

JavaScript'te Modül Modelinin Gücü – JSManifest

JavaScript’te yaygın olarak kullanılan ve güçlü bir kalıp, Modül Kalıbı. Olabilir inanılmaz şekilde uygulaması basittir, ancak geliştiricilerin kodlarını kapsüllemelerine olanak sağlaması, onu sağlam kod oluşturmak için en çok yönlü kalıplardan biri yapar. JavaScript kitaplıklarının kaynak kodunun içine baktığınızda, büyük olasılıkla bu kalıbın bir uygulamasına bakıyorsunuzdur ve bunlar büyük olasılıkla bir tek nesne bir uygulamanın ömrü boyunca yalnızca bir örneğin var olduğu anlamına gelir.

JavaScript’e yeni başlayanlar için modül modelini anlamak zor olabilir, çünkü mevcut çeşitli varyasyonlar vardır. Ancak, uygulamanızı daha sağlam hale getirmek için modül modelini çok sık kullanacağınız için bu her zaman ve zahmete değer.

Modüller

Tahmin edebileceğiniz gibi, modül deseni modüller oluşturmanıza izin verir. Sonunda, modüller temelde sadece nesnelerdir. Ancak modül oluşturmanın birkaç yolu vardır.

Modül oluşturmanın en temel yolu, aşağıdaki gibi bir değişkene bir nesne atamaktır:

const myModule = {
  drive() {
    console.log('*drives*')
  },
}

Basit bir görüntü temsili:

Bir modül oluşturmak için JavaScript’in benzersiz özelliklerinden bazılarını kullandığımızda işler daha ilginç hale gelmeye başlar, bundan sonra ele alacağız.

Hemen Çağrılan İşlev İfadesi

Modül modelinin tartışmasız en popüler varyasyonu, IIFE (Hemen Çağrılan İşlev İfadesi). Bunlar esasen hemen çağıran ve daha sonra modül haline gelen bir nesneyi (veya başka bir deyişle bir arabirimi) döndüren işlevlerdir.

Bu işlevlerin içinde olabilecek kodlar vardır. özel yapacakları şekilde sadece erişilebilir olmak içinde bu işlevin kapsamı meğer ki döndürülen nesne, onlara bir şekilde erişebilen yöntemler sağlar. Bu döndürülen nesne dış dünyaya açıktır.

Olayları görsel bir perspektiften anlamada daha iyi olanlar için, bunun nasıl göründüğünün bir görsel temsili:

javascript'te hemen çağrılan işlev ifadelerini kullanan modül kalıbı

Bir IIFE kullanarak kendi modülümüzü uygulayacağız. Bu, bir IIFE’nin dönüş değerini doğrudan bir değişkene atamamıza izin verir, böylece onu tıpkı bir JavaScript modülü gibi kullanabiliriz.

Örneğin, bir RPG oyunu yarattığımızı varsayalım ve yapmaya karar verdiğimiz ilk şey, bir RPG oyunu oluşturmak oldu. büyücü sınıf. Genel olarak rol yapma oyunlarında büyücüler, ateş, rüzgar, elektrik vb. gibi güçlü büyülü yeteneklere sahip son derece güçlü varlıklardır. Genellikle sadece zihinleriyle nesneleri seçip hareket ettirmek için telekinetik güçlere sahiptirler. Hemen hemen her RPG oyununda, büyücüler genellikle büyü veya sihir yapar, bu yüzden büyücü için arayüzü tanımlarken bu konsepti bağlam içinde tutacağız.

const sorceress = (function() {
  const sideEffects = {
    intervals: {},
  }

  function _fireBolt(target, customDamage) {
    target.hp -= customDamage !== undefined ? customDamage : 15
  }

  function _thunderBolt(target) {
    target.hp -= 15
  }

  function blizzard(target) {
    target.hp -= 15
  }

  function _applyThunderBoltSideEffects(
    target,
    { interval = 1000, timeout = 15000 } = {},
  ) {
    if (sideEffects.intervals[target.id]) {
      clearInterval(sideEffects.intervals[target.id])
    }

    sideEffects.intervals[target.id] = setInterval(() => {
      target.hp -= 1
    }, interval)

    setTimeout(() => {
      if (sideEffects.intervals[target.id]) {
        clearInterval(sideEffects.intervals[target.id])
      }
    }, timeout)
  }

  return {
    fireBolt(target, options) {
      if (options) {
        _fireBolt(target, options.customDamage)
      } else {
        _fireBolt(target)
      }
    },
    thunderBolt(target) {
      _thunderBolt(target)
      _applyThunderBoltSideEffects(target)
    },
    blizzard,
    castAll(target) {
      this.fireBolt(target)
      this.thunderBolt(target)
      this.blizzard(target)
    },
  }
})()

Bu örnekte, büyücü sınıfımızın dış dünyadan kullanılabilecek dört yöntemi vardır: sorceress.fireBolt, sorceress.thunderBolt, sorceress.blizzardve sorceress.castAll.

Bu modülün içinde açıkladık üç özel fonksiyonlar ve dört kamu fonksiyonlar. Açıkça söyleyebiliriz ki, alt çizgi ile ön eki olan işlevler _ özel işlevlerdir, ikincisi ise geneldir. Bunu biliyoruz çünkü alt çizgi olanlar iade edilmiyor, bunun yerine bazıları sadece kullanılıyor ile halka açık yöntemler. Yerel değişkenlere şu şekilde başvurabilme kavramı sözlük kapsamı denir kapatma. Alt çizgi ile ön ekli değişkenleri döndürmediğimiz için, bunlar modülün dışında kullanılamazlar – ama onlar olabilir döndürülen yöntemler istenirse bunu yapmayı seçerse.

Özel ve genel değişkenleri bu şekilde bildirme gücüne sahip olmak, modül modelini JavaScript uygulamalarında tartışmasız en güçlü tasarım kalıbı yapan şeydir. Aynı kalıp, esasen, günümüzde sürekli olarak kullanılan şeydir. import veya require nodejs modüllerinden ve ayrıca <script> gibi bir kitaplığa işaret eden etiketler jQuery.

Küresel İthalat

Modül kalıbının JavaScript’teki kullanımları, önceki kod örneğimizle sınırlı değildir. JavaScipt’teki modül deseni, JavaScript’in doğası gereği esnekliği sayesinde güçlüdür. Örneğin, JavaScript olarak bilinen bir özelliği vardır. ima edilen küreseller. Bir atamada kullanılıyorsa, zaten yoksa global oluşturulur. Bu nedenle, anonim kapanışlarda global değişkenler kullandığımızda veya oluşturduğumuzda, işler aslında bir dereceye kadar lehimize daha kolay hale gelebilir.

Ne yazık ki, sonuçta ortaya çıkan sorun, kodumuzun yönetilmesinin zorlaşmasıdır. mesai çünkü belirli bir dosyada hangi değişkenlerin global olduğunu bilmek bizim için açık değildir.

Neyse ki, anonim işlevler kolay bir alternatif sunar. Globalleri anonim fonksiyonlarımıza parametre olarak ileterek, ima edilen globallerden hem daha hızlı hem de daha net olan kodumuza aktarılırlar.

İşte bu kavramı gösteren bir kod örneği:

const myModue = (function(_) {
  
})(lodash)

Gördüğünüz gibi, artık global değişken _’nin bir parçası olarak lodash’a erişimimiz var.

İşte bunun şimdi nasıl görünebileceğini temsil eden bir resim:

javascript içindeki modül modelindeki modüllere global içe aktarma değişkenleri

Neden Genel Olarak Modüller?

Genel olarak, modülleri kullanmanın birçok faydası vardır.

İşte en önemlileri:

Kodunuzu daha iyi korumanıza yardımcı olur

Tanım olarak, bir modül kendi kendine yeten ve hayatta kalmak için dış dünyaya güvenmemelidir. Tek bir modülü güncellemek mümkün olduğunca kolay olmalı ve değiştirildiğinde uygulamanın başka bir bölümünü bozmamalıdır. Kuyu modülünün iyi yapılandırılması ve kodunuzun diğer bölümlerinden ayrılmaları için kodunuzun bölümlerine olan bağımlılıkları mümkün olduğunca azaltması hedeflenmelidir.

Önceki kod örneğindeki büyücü sınıfımıza bir göz atarsak, içinde tanımlanan yöntemlerden birini değiştirmeye çalışırsak, hata ayıklamanın kod tabanının diğer kısımlarını kırmaya devam ederse, stresli bir süreç haline geleceğini varsayabiliriz. özellikle domino etkisi yaratıyorsa. Modüller, gelecekte yapılacak herhangi bir değişikliğin kodun diğer kısımlarını etkilemeyecek şekilde dikkatlice tasarlanmalıdır.

Küresel ad alanını kirletmekten kaçınmamıza yardımcı olur

JavaScript dilinde, üst düzey işlevlerin kapsamı dışında bulunan tüm değişkenler globaldir. Bu, diğer kodların bunlara erişebileceği anlamına gelir. Bu sorunludur çünkü adı verilen bir durum yaratır. ad alanı kirliliğitamamen alakasız herhangi bir kodun global kapsamda değişkenleri paylaştığı, bu da kaçınmak istediğiniz bir şeydir. her zaman.

Kodu yeniden kullanmamıza yardımcı olur

Bir süredir JavaScript geliştiriyorsanız, muhtemelen kendinizi birden çok projeye kod kopyalayıp yapıştırırken bulmuşsunuzdur. Bu, kod parçacığını kötü uygulamalar kullanarak yazdığınızı fark etmeye başlayana ve daha iyi uygulamaları kullanarak yeniden yazmaya karar verene kadar iyidir. Kodu kopyalayıp birden fazla projeye yapıştırdıysanız, yeni değişikliklerin uygulanmasını istiyorsanız, kodun her bir kopyasını değiştirmek zorunda kalmanın sıkıcı, tekrarlayan göreviyle karşı karşıya kalırsınız. Tekrar tekrar kullanılabilen bir modüle sahip olmak kesinlikle çok daha kolay olacaktır, böylece modülün tüketicilerinin her seferinde değişiklikleri otomatik olarak yansıtacağı tek bir yerde modülü güncellemeniz yeterli olacaktır.

Çözüm

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

Bir cevap yazın

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