ماژول‌های JavaScript
ماژول‌ها برنامهٔ JavaScript را به فایل‌های جدا تقسیم می‌کنند. export مقدار را در مرز فایل در دسترس می‌گذارد و import آن را مصرف می‌کند. خط نمایشی مثال‌ها lida / tea / mint است.
خروجی‌های نام‌دار
با خروجی نام‌دار، نام دقیق مقدار را مشخص می‌کنی و یک فایل می‌تواند چند مقدار نام‌دار صادر کند.
// math.js
export const drink = "tea";
export function label(name) {
return `${name} / ${drink} / mint`;
}
drink و label چون با export مشخص شده‌اند برای ماژول‌های دیگر قابل استفاده‌اند. چیزی که صادر نشده در همان math.js می‌ماند.
وارد کردن خروجی‌های نام‌دار
برای import نام‌دار، نام‌ها را داخل آکولاد و مطابق نام export بنویس.
// app.js
import { drink, label } from "./math.js";
console.log(drink);
console.log(label("lida"));
این import به bindingهای صادرشده وصل می‌شود و تعریف جداگانه‌ای کپی نمی‌کند. در مرورگر، این فایل‌ها باید از راه HTTP یا HTTPS ارائه شوند.
خروجی پیش‌فرض
خروجی پیش‌فرض معمولاً مقدار اصلی ماژول است. هنگام import نام محلی را خودت انتخاب می‌کنی و آکولاد لازم نیست.
// greeting.js
export default function greet(name) {
return `Hello, ${name}!`;
}
// app.js
import greet from "./greeting.js";
console.log(greet("lida"));
import نام‌دار به شکل { drink, label } نوشته می‌شود؛ اما import پیش‌فرض نام انتخابی greet را بدون آکولاد می‌گیرد. هر فایل فقط یک default export دارد.
دامنهٔ ماژول و import پویا
تعریف‌های سطح بالای ماژول عضو window نیستند. import() پویا ماژول را بعداً می‌خواند و یک Promise برمی‌گرداند.
// menu.js
const secret = "not global";
export const items = ["tea", "mint"];
// app.js
import("./menu.js").then((menu) => {
console.log(menu.items.join(" / "));
});
console.log(window.secret); // undefined
فقط items از مرز ماژول عبور می‌کند. نتیجهٔ import پویا یک شیء namespace است و خروجی‌ها از propertyهای آن خوانده می‌شوند. این مثال هم به سرویس وب نیاز دارد.
مشاهدهٔ رفتار ماژول در یک صفحه
این دمو متن ماژول را در حافظه می‌سازد، از آن Blob URL می‌سازد و سپس import می‌کند؛ بنابراین به پوشهٔ پروژه نیاز ندارد. در پروژهٔ واقعی معمولاً فایل‌ها جدا هستند.
<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" نحو ماژول را فعال می‌کند و Blob URL متن را بدون درخواست شبکه در اختیار import می‌گذارد.
در پروژهٔ معمولی متن را در math.js و کد واردکننده را در app.js بگذار و ورودی را با <script type="module" src="./app.js"></script> بارگذاری کن. اجرای مستقیم با file:// برای ماژول‌های مرورگر قابل اتکا نیست؛ از HTTP server استفاده کن.
📊 انتخاب روش ماژول
| نحو | کاربرد | نمونه |
|---|---|---|
| export/import نام‌دار | اشتراک نام‌های مشخص | export const drink = "tea" / import { drink } ... |
| export/import پیش‌فرض | اشتراک مقدار اصلی | export default function greet() / import greet ... |
| import پویا | بارگذاری دیرتر و دریافت Promise | import("./menu.js").then(...) |
| دامنهٔ ماژول | خصوصی ماندن تعریف‌های سطح بالا | const secret = "not global" |
تمرین عملی
در math.js خروجی‌های نام‌دار drink و label را بساز و در app.js وارد کن. در greeting.js یک greet پیش‌فرض بساز و کاری کن صفحه lida / tea / mint را نشان دهد.
اشتباه‌های رایج
برای import نام‌دار آکولاد را حذف نکن، در یک فایل دو default export نساز و انتظار نداشته باش متغیر صادرنشده سراسری شود. ماژول مرورگر به HTTP(S) نیاز دارد.
جمع‌بندی
ماژول مرز فایل می‌سازد: export فقط bindingهای منتخب را بیرون می‌فرستد، import آن‌ها را مصرف می‌کند و دامنهٔ ماژول تعریف‌های صادرنشده را خصوصی نگه می‌دارد.
ماژول‌ها را کوچک و متمرکز نگه دار، نام importها را روشن انتخاب کن و Blob URL موقتی را پس از پایان دمو آزاد کن.
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود