JavaScript मॉड्यूल
मॉड्यूल JavaScript को अलग-अलग फ़ाइलों में बाँटते हैं। export मान उपलब्ध कराता है और import उसका उपयोग करता है। उदाहरण की दिखाई देने वाली पंक्ति lida / tea / mint है।
Named export
Named export किसी मान का स्पष्ट नाम रखता है और एक मॉड्यूल कई मान export कर सकता है।
export const drink = "tea";
export function label(name) {
return `${name} / ${drink} / mint`;
}
drink और label दूसरे मॉड्यूल में मिलते हैं क्योंकि वे export हुए हैं। बाकी कोड उसी फ़ाइल तक सीमित रहता है।
Named मान import करना
Named import में curly braces और वही export किए गए नाम लिखे जाते हैं।
import { drink, label } from "./math.js";
console.log(drink);
console.log(label("lida"));
Import कोई स्वतंत्र परिभाषा कॉपी नहीं करता; वह exported bindings से जुड़ता है। ब्राउज़र में फ़ाइलें HTTP या HTTPS से देनी होंगी।
Default export
Default export अक्सर मॉड्यूल का मुख्य मान होता है। Import करते समय बिना braces अपना स्थानीय नाम चुनें।
export default function greet(name) {
return `Hello, ${name}!`;
}
import greet from "./greeting.js";
console.log(greet("lida"));
Named import { drink, label } का उपयोग करता है, जबकि default import greet का। एक फ़ाइल में केवल एक default export हो सकता है।
Module scope और dynamic import
ऊपरी स्तर की घोषणाएँ window की properties नहीं बनतीं। import() बाद में लोड करता है और Promise लौटाता है।
const secret = "not global";
export const items = ["tea", "mint"];
import("./menu.js").then((menu) => console.log(menu.items.join(" / ")));
console.log(window.secret); // undefined
सीमा पार केवल items जाता है। Dynamic import का परिणाम namespace object है, जिसकी properties में exports मिलते हैं।
एक पेज में स्वतंत्र demo
यह demo मॉड्यूल का पाठ memory में बनाता है, Blob URL तैयार करता है और उसे import करता है; किसी project फ़ाइल की जरूरत नहीं।
<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>
पेज ठीक lida / tea / mint दिखाता है। type="module" syntax चालू करता है और Blob URL network request के बिना मॉड्यूल देता है।
वास्तविक project में math.js, app.js और <script type="module" src="./app.js"></script> रखें। file:// पर निर्भर न रहें; HTTP server चलाएँ।
📊 मॉड्यूल के विकल्प
| Syntax | उपयोग | उदाहरण |
|---|---|---|
| Named export/import | चुने हुए नाम साझा करना | export const drink = "tea" / import { drink } ... |
| Default export/import | मुख्य मान साझा करना | export default function greet() / import greet ... |
| Dynamic import | बाद में लोड करके Promise पाना | import("./menu.js").then(...) |
| Module scope | ऊपरी घोषणाएँ निजी रखना | const secret = "not global" |
अभ्यास
math.js बनाएँ, drink और label को app.js में import करें, default greet जोड़ें और lida / tea / mint दिखाएँ।
आम गलतियाँ
Named import की braces न हटाएँ, दो default export न लिखें और unexported मान को global न समझें।
मुख्य बात
export चुने हुए bindings उपलब्ध कराता है, import उनका उपयोग करता है, default import अपना नाम चुनता है और module scope निजी घोषणाएँ बचाता है।
मॉड्यूल छोटे और केंद्रित रखें तथा demo के बाद अस्थायी Blob URL हटाएँ।
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी