JavaScript modülleri
Modüller JavaScript kodunu dosyalara böler. export değerleri dışa açar, import kullanır. Görünen satır lida / tea / mint olur.
Named export
Named export açık bir ad taşır; tek modül birden fazla değer dışa aktarabilir.
export const drink = "tea";
export function label(name) {
return `${name} / ${drink} / mint`;
}
drink ve label dışarıdan kullanılabilir çünkü export edilmiştir. Diğer kod dosyanın içinde kalır.
Named değerleri import etme
Named import aynı adlarla süslü parantez kullanır.
import { drink, label } from "./math.js";
console.log(drink);
console.log(label("lida"));
Import bağımsız bir kopya oluşturmaz, export edilen bağlara bağlanır. Tarayıcıda dosyalar HTTP veya HTTPS üzerinden sunulmalıdır.
Default export
Default export çoğu zaman modülün ana değeridir. Import ederken adı süslü parantez olmadan seçersiniz.
export default function greet(name) {
return `Hello, ${name}!`;
}
import greet from "./greeting.js";
console.log(greet("lida"));
Named import { drink, label }, default import ise greet kullanır. Bir dosyada yalnızca bir default export olabilir.
Modül kapsamı ve dinamik import
Üst düzey değişkenler window özelliği olmaz. import() daha sonra yükler ve Promise döndürür.
const secret = "not global";
export const items = ["tea", "mint"];
import("./menu.js").then((menu) => console.log(menu.items.join(" / ")));
console.log(window.secret); // undefined
Sınırı yalnızca items geçer. Dinamik import sonucu, export değerlerini özellik olarak taşıyan namespace nesnesidir.
Bağımsız sayfa demosu
Bu demo kodu bellekte oluşturur, Blob URL üretir ve import eder; proje dosyasına ihtiyaç duymaz.
<p id="result"></p>
<script type="module">
const source = `export const drink = "tea"; export function label(name) { return name + " / " + drink + " / mint"; }`;
const url = URL.createObjectURL(new Blob([source], { type: "text/javascript" }));
const module = await import(url);
document.querySelector("#result").textContent = module.label("lida");
URL.revokeObjectURL(url);
</script>
Sayfa tam olarak lida / tea / mint gösterir. type="module" modül söz dizimini açar; Blob URL ağ isteği gerektirmez.
Gerçek projede math.js, app.js ve <script type="module" src="./app.js"></script> kullanın. file:// yerine HTTP sunucusu kullanın.
📊 Modül seçenekleri
| Sözdizimi | Amaç | Örnek |
|---|---|---|
| Named export/import | Belirli adları paylaşmak | export const drink = "tea" / import { drink } ... |
| Default export/import | Ana değeri paylaşmak | export default function greet() / import greet ... |
| Dinamik import | Sonradan yükleyip Promise almak | import("./menu.js").then(...) |
| Modül kapsamı | Üst düzey değerleri gizli tutmak | const secret = "not global" |
Uygulama
math.js içinde drink ve label oluşturun, app.js içinde import edin, default greet ekleyin ve lida / tea / mint gösterin.
Yaygın hatalar
Named import süslü parantezlerini kaldırmayın, iki default export yazmayın ve export edilmeyen değerin global olduğunu sanmayın.
Temel fikir
export seçilen değerleri açar, import onları kullanır, default kendi yerel adını alır ve modül kapsamı gizli değerleri korur.
Modülleri küçük tutun ve geçici Blob URL'lerini demo bitince serbest bırakın.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek