ES Modules، import و export

ماژول‌های ES: تقسیم کد جاوااسکریپت به فایل‌های مستقل و قابل مدیریت

تا این‌جا، بیشتر کدهای این دوره در یک فایل واحد فرض شده‌اند. اما در پروژه‌های واقعی، کد به فایل‌های متعدد و کوچک‌تر تقسیم می‌شود تا نگهداری، تست و همکاری روی آن ساده‌تر باشد. ES Modules (که اغلب به‌اختصار ESM نامیده می‌شود) سیستم استاندارد و داخلی جاوااسکریپت برای تقسیم کد به ماژول‌های مستقل و مدیریت وابستگی میان آن‌هاست.

export: در دسترس قرار دادن یک مقدار برای فایل‌های دیگر

هر مقداری—تابع، متغیر یا کلاس—که بخواهد از یک فایل به فایل دیگری منتقل شود، باید با کلیدواژه‌ی export مشخص شود. رایج‌ترین حالت، named export است که هر فایل می‌تواند تعداد نامحدودی از آن داشته باشد:

// فایل math.js
export function add(a, b) {
  return a + b;
}

export function multiply(a, b) {
  return a * b;
}

export const PI = 3.14159;

import: استفاده از مقادیر export‌شده در فایل دیگر

برای استفاده از این مقادیر در فایلی دیگر، از import به همراه نام دقیق همان مقادیر export‌شده استفاده می‌شود:

// فایل main.js
import { add, multiply, PI } from "./math.js";

console.log(add(2, 3));      // 5
console.log(multiply(4, 5)); // 20
console.log(PI);             // 3.14159

نکته‌ی مهم این است که نام‌های داخل آکولاد باید دقیقاً با نام export‌شده مطابقت داشته باشند؛ اما در صورت نیاز، می‌توان با کلیدواژه‌ی as نام مستعار تعریف کرد:

import { add as sum } from "./math.js";
console.log(sum(2, 3)); // 5

Default Export: یک مقدار اصلی برای هر فایل

برخلاف named export، هر فایل فقط می‌تواند یک default export داشته باشد که معمولاً برای مقدار اصلی و مهم‌ترین بخش آن ماژول استفاده می‌شود:

// فایل logger.js
export default function log(message) {
  console.log(`[LOG]: ${message}`);
}

export const LOG_LEVEL = "info";

// فایل main.js
import log, { LOG_LEVEL } from "./logger.js";

log("برنامه با موفقیت اجرا شد");
console.log(LOG_LEVEL);

تفاوت مهم این‌جاست که هنگام import کردن یک default export، نیازی به آکولاد نیست و می‌توان هر نام دلخواهی برای آن انتخاب کرد، برخلاف named export که نام باید دقیقاً مطابقت داشته باشد (مگر با استفاده از as).

جدول مقایسه‌ی Named Export و Default Export

ویژگی	Named Export	Default Export
تعداد مجاز در هر فایل	نامحدود	حداکثر یکی
نحوه‌ی import	با آکولاد و نام دقیق (یا as)	بدون آکولاد و با هر نام دلخواه
کاربرد رایج	چند تابع یا مقدار مرتبط و مستقل	یک کلاس، تابع یا شیء اصلی همان ماژول

وارد کردن همه‌ی export ها با یک نام (namespace import)

گاهی به‌جای import کردن تک‌تک نام‌ها، مفید است تمام named exportهای یک فایل زیر یک شیء واحد جمع شوند:

import * as MathUtils from "./math.js";

console.log(MathUtils.add(2, 3));      // 5
console.log(MathUtils.multiply(4, 5)); // 20

نکته‌ی مهم: ماژول‌ها به‌طور پیش‌فرض در حالت strict اجرا می‌شوند

هر فایلی که از import یا export استفاده کند، به‌طور خودکار در حالت "use strict" اجرا می‌شود، حتی بدون نوشتن صریح آن؛ به همین دلیل قوانینی مثل ممنوعیت تعریف متغیر بدون let/const/var، در ماژول‌ها همیشه فعال هستند.

نکات کلیدی

• export یک مقدار را برای استفاده در فایل‌های دیگر در دسترس قرار می‌دهد؛ هر فایل می‌تواند چندین named export داشته باشد.
• هر فایل حداکثر یک default export می‌تواند داشته باشد که بدون آکولاد و با هر نام دلخواه import می‌شود.
• نام‌های named export هنگام import باید دقیقاً مطابقت داشته باشند، مگر با استفاده از as برای تغییر نام مستعار.
• ماژول‌های ES به‌طور خودکار در حالت strict اجرا می‌شوند، بدون نیاز به نوشتن صریح "use strict".

جمع‌بندی

ES Modules با دو کلیدواژه‌ی export و import، امکان تقسیم منطقی کد به فایل‌های مستقل و قابل استفاده‌ی مجدد را فراهم می‌کند. تمایز میان named export و default export، بسته به این‌که یک فایل قرار است یک مقدار اصلی یا چند مقدار مرتبط را در اختیار بگذارد، نقش مهمی در طراحی ساختار ماژول‌ها دارد. در درس بعدی، نحوه‌ی استفاده‌ی عملی از ماژول‌ها در مرورگر و روش‌های وارد کردن پویا (dynamic import) بررسی خواهد شد.