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