CodeBlanks Logo Icon CodeBlanks

Module deseni - modern karşılaştırma

JavaScript kursu · Uzman · Ders 5/63

Klasik module desenini ES modülleriyle karşılaştırıp ne zaman hangisini kullanacağını öğrenirsin.

Module deseni - klasik

Module deseni, gizli durum ve herkese açık API ayrımını sağlar. ES modülleri ortaya çıkmadan önce JavaScript'te bu, IIFE (hemen çağrılan fonksiyon ifadesi) ve kapanım (closure) ile yapılırdı.

Dışarıdan erişilemeyen değişkenler IIFE içinde tanımlanır; yalnızca geri döndürülen nesne dışarıya açılır.

Bu sayede gerçek gizli (private) alanlar oluşturulur.

ES modülleriyle karşılaştırma

Modern JavaScript'te ES modülleri (export, import) module deseninin yerini aldı. Dosya kapsamı doğal gizli alan sağlar; dışa aktarılmayan her şey gizli kalır.

Klasik module desenini eski kodlarda görebilirsin. Yeni kod yazarken ES modülleri tercih edilir; çünkü tarayıcı ve araç zinciri bunu doğal destekler.

const Counter = (function () {
  let count = 0;
  return { increment() { count++; } };
})();

Uygulama Counter modülü

Counter adında, IIFE ile tanımlanmış bir module yaz. IIFE içinde let count = 0 ile gizli bir sayaç tut. Dışarıya increment() yöntemini döndür; bu yöntem count'u bir artırsın. return ile bir nesne döndür.

Örnek çözümü göster
const Counter = (function () { ile başla, let count = 0 yap, return { increment() { count++; } }; ile dışa aç, en son })(); ile kapat.
Örnek çözüm:
const Counter = (function () {
  let count = 0;
  return {
    increment() {
      count++;
    },
    value() {
      return count;
    }
  };
})();

Kendini test et

  1. IIFE dönüşünü tamamla

    const Counter = (function () {
      let count = 0;
      return { ____() { count++; } };
    })();
    Cevabı göster
    const Counter = (function () {
      let count = 0;
      return { increment() { count++; } };
    })();
  2. Klasik module deseninde gizli durumu nasıl saklarız?

    • Genel bir değişkende
    • IIFE içinde kapanımda
    • HTML veri özniteliğinde
    • Bir sabitte
    Cevabı göster

    IIFE içinde kapanımda — Doğru! IIFE kapanımı, dışarıdan erişilemeyen gizli durum oluşturur.

  3. Module kavramlarını eşleştir

    IIFE
    Hemen çağrılan fonksiyon
    return {}
    Herkese açık API
    let count
    Gizli durum
    ES modules
    Modern modül sistemi

Uzman bölümündeki tüm dersler