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

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

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++; } };
})();

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

Sıradaki ders: Özet - Tasarım desenleri

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler