Named Exports و Default Exports

تا اینجا با صادرات و واردات معمولی آشنا شدیم. اما در دنیای واقعی، ماژول‌ها به دو روش کاملاً متفاوت قابلیت‌های خود را به اشتراک می‌گذارند. علاوه بر این، وقتی تعداد فایل‌ها بالا می‌رود، احتمال این که نام توابع تکراری شود (مثلاً داشتن دو تابع به نام draw) بسیار زیاد است.

در این بخش یاد می‌گیریم چطور این دو سیستم صادرات را مدیریت کنیم و چطور جلوی تداخل نام‌ها (Naming Conflicts) را بگیریم.

۱. صادرات نام‌دار در برابر صادرات پیش‌فرض (Default vs Named Exports)

تمام مواردی که تا این لحظه صادر کردیم، از نوع صادرات نام‌دار (Named Exports) بودند. یعنی هر تابع یا متغیر با نام خودش صادر می‌شد و موقع وارد کردن هم دقیقاً باید از همان نام داخل آکولاد {} استفاده می‌کردیم.

اما نوع دیگری از صادرات به نام صادرات پیش‌فرض (Default Export) وجود دارد. این روش برای زمانی طراحی شده که یک ماژول فقط «یک قابلیت اصلی یا پیش‌فرض» دارد. همچنین این کار سازگاری ماژول‌های مدرن را با سیستم‌های قدیمی (مثل CommonJS و AMD) بسیار راحت‌تر می‌کند.

نحوه تعریف صادرات پیش‌فرض (Default Export)

فرض کنید در فایل square.js تابعی به نام randomSquare() داریم که یک مربع با رنگ و اندازه تصادفی رسم می‌کند. می‌خواهیم این تابع، قابلیت اصلی و پیش‌فرض این فایل باشد. در انتهای فایل می‌نویسیم:

export default randomSquare;

نکته بسیار مهم: دقت کردید؟ هیچ آکولادی وجود ندارد! حتی می‌توانید کلمه کلیدی export default را مستقیماً پشت یک تابع بدون نام (Anonymous Function) هم بگذارید:

export default function (ctx) {
  // کدهای تابع در اینجا
}

نحوه وارد کردن Default Export

حالا در فایل main.js، این تابع پیش‌فرض را به این صورت وارد می‌کنیم:

import randomSquare from "./modules/square.js";

باز هم بدون آکولاد! از آنجا که هر ماژول فقط و فقط می‌تواند یک صادرات پیش‌فرض داشته باشد، مرورگر دقیقاً می‌داند که منظور شما کدام تابع است. کد بالا در واقع خلاصه شده‌ی دستور زیر است:

import { default as randomSquare } from "./modules/square.js";

۲. جلوگیری از تداخل نام‌ها با ابزار تغییر نام (as)

تصور کنید پروژه شما بزرگ‌تر می‌شود و علاوه بر مربع (square.js)، فایل‌هایی برای رسم دایره (circle.js) و مثلث (triangle.js) هم اضافه می‌کنید. به احتمال خیلی زیاد، هر سه فایل تابعی به نام draw() یا reportArea() دارند!

اگر بخواهید همه آن‌ها را در فایل اصلی وارد کنید، مرورگر گیج می‌شود و خطای تداخل نام (Redeclaration error) می‌دهد:

// ❌ این کد خطا می‌دهد چون مرورگر نمی‌داند draw مال کدام است!
import { name, draw } from "./modules/square.js";
import { name, draw } from "./modules/circle.js"; 

راه‌حل: استفاده از کلمه کلیدی as

خوشبختانه با کلمه کلیدی as می‌توانید نام آیتم‌ها را موقع صادرات یا واردات عوض کنید تا در فایل فعلی کاملاً منحصربه‌فرد باشند.

روش اول: تغییر نام موقع وارد کردن (Import) - توصیه شده

بهترین کار این است که فایل‌های ماژول را دست‌نخورده باقی بگذارید و موقع import کردن در فایل اصلی، نام آن‌ها را اختصاصی کنید:

// وارد کردن قابلیت‌های مربع با نام جدید
import {
  name as squareName,
  draw as drawSquare,
  reportArea as reportSquareArea,
  reportPerimeter as reportSquarePerimeter,
} from "./modules/square.js";

// وارد کردن قابلیت‌های دایره با نام جدید
import {
  name as circleName,
  draw as drawCircle,
  reportArea as reportCircleArea,
  reportPerimeter as reportCirclePerimeter,
} from "./modules/circle.js";

روش دوم: تغییر نام موقع صادرات (Export)

همچنین می‌توانید این تغییر نام را در همان فایل ماژول و موقع خروجی گرفتن انجام دهید:

// inside square.js
export {
  name as squareName,
  draw as drawSquare,
  reportArea as reportSquareArea,
}

و سپس در فایل اصلی بدون نیاز به تغییر نام، از همان نام‌های جدید استفاده کنید:

// inside main.js
import { squareName, drawSquare } from "./modules/square.js";

یک نصیحت حرفه‌ای: انتخاب با شماست، اما معماری تمیزتر این است که کدهای ماژول را ساده و عمومی نگه دارید و تغییر نام را در بخش import انجام دهید. این کار به‌خصوص زمانی که از پکیج‌های آماده و کتابخانه‌های دیگران (Third-party modules) استفاده می‌کنید و دسترسی برای تغییر کدهای آن‌ها ندارید، تنها راه نجات شماست!