تجمیع ماژول ها

وقتی پروژه‌تان بزرگ و بزرگ‌تر می‌شود، تعداد فایل‌ها و ماژول‌های کوچک (Submodules) به شدت افزایش می‌یابد. در این حالت، اگر یک فایل اصلی داشته باشید، مجبورید در بالای صفحه ده‌ها خط دستور import بنویسید که کد را به شدت شلوغ و نامنظم می‌کند.

جاوااسکریپت برای این مشکل یک راه‌حل عالی دارد: تجمیع ماژول‌ها. یعنی چند ماژول کوچک را درون یک ماژول مادر (Parent Module) جمع کنیم و در نهایت فایل اصلی فقط با همان یک ماژول مادر ارتباط برقرار کند.

ساختار و سینتکس تجمیع (Aggregation Syntax)

برای این‌که بتوانید قابلیت‌های فایل‌های دیگر را بدون وارد کردن به فایل فعلی، مستقیماً به بیرون صادر کنید، از ترکیب دستورات export و from استفاده می‌شود:

// صادر کردن تمام قابلیت‌های فایل x
export * from "x.js";

// صادر کردن یک قابلیت خاص با نام مشخص از فایل x
export { name } from "x.js";

بررسی یک مثال واقعی: ساخت هابِ اشکال هندسی

تصور کنید مثال کلاس‌های اشکال هندسی (مربع، دایره، مثلث) را به این شکل سازمان‌دهی کرده‌ایم. برای تمیزی کار، تمام فایل‌های اشکال را داخل یک پوشه به نام shapes گذاشته‌ایم و یک فایل مرکزی به نام shapes.js در کنار آن ساخته‌ایم:

modules/
  canvas.js
  shapes.js
  shapes/
    circle.js
    square.js
    triangle.js

تک‌تک فایل‌های داخل پوشه shapes کلاس خودشان را به صورت معمولی صادر می‌کنند؛ مثلاً در فایل square.js داریم:

export { Square };

جادوی فایل واسط (shapes.js)

حالا به جای اینکه در فایل اصلی تک‌تک این‌ها را صدا بزنیم، داخل فایل shapes.js عملیات تجمیع را انجام می‌دهیم. این فایل شبیه به یک تابلوی راهنما یا یک هاب مرکزی عمل می‌کند:

/* modules/shapes.js */

export { Square } from "./shapes/square.js";
export { Triangle } from "./shapes/triangle.js";
export { Circle } from "./shapes/circle.js";

یک نکته فنی و بسیار مهم: کدهایی که در فایل shapes.js به این شکل نوشته می‌شوند، در واقع فقط «تغییر مسیر» (Redirection) داده می‌شوند. این قابلیت‌ها واقعاً در این فایل وجود ندارند! بنابراین شما نمی‌توانید کدهای منطقی پروژه یا پردازش خاصی روی این کلاس‌ها را درون خود این فایل واسط بنویسید.

نتیجه‌گیری: تمیز شدن کدهای فایل اصلی (main.js)

حالا ببینیم این کار چه کمکی به فایل اصلی ما می‌کند. به جای اینکه ۳ خط کد طولانی و شلوغ برای وارد کردن تک‌تک اشکال بنویسیم:

// ❌ روش قدیمی و شلوغ
import { Square } from "./modules/square.js";
import { Circle } from "./modules/circle.js";
import { Triangle } from "./modules/triangle.js";

خیلی شیک و تمیز، همه آن‌ها را تنها در یک خط و از طریق هاب مرکزی وارد می‌کنیم:

//  روش مدرن و تجمیع‌شده
import { Square, Circle, Triangle } from "./modules/shapes.js";

این کار باعث می‌شود فایل‌های شما به‌شدت ماژولار باقی بمانند، اما لایه بیرونی پروژه (جایی که قرار است از کدها استفاده شود) فوق‌العاده تمیز، خوانا و کاربرپسند باشد.