تاریخچه و ساختار ماژول ها

در این بخش می‌خواهیم ببینیم اصلاً چطور شد که پای ماژول‌ها به جاوااسکریپت باز شد، یک ساختار فایل استاندارد را با هم بررسی کنیم و به یک سؤال پر تکرار پاسخ دهیم: پسوند فایل‌های ماژول باید .js باشد یا .mjs؟

پس‌زمینه و تاریخچه ماژول‌ها (A background on modules)

در روزهای ابتدایی، برنامه‌های جاوااسکریپت بسیار کوچک بودند. بیشترین کاربرد این زبان، انجام کارهای ساده و کوچک روی صفحات وب بود (مثل یک انیمیشن ساده یا تایید فرم‌ها). به همین دلیل، نیازی به نوشتن اسکریپت‌های بزرگ و طولانی نبود.

اما زمان به سرعت گذشت! امروز ما برنامه‌های کامل و عظیمی داریم که به طور کامل درون مرورگر اجرا می‌شوند و حجم کدهای جاوااسکریپت آن‌ها سرسام‌آور است. علاوه‌بر این، جاوااسکریپت با آمدن محیط‌هایی مثل Node.js، پایش به سمت سرور (Backend) هم باز شد.

پروژه‌های بزرگ و پیچیده، قطعاً به مکانیزمی نیاز دارند تا بتوان کدها را به بخش‌های مجزا (ماژول‌ها) تقسیم کرد و هر جا که لازم بود آن‌ها را وارد (Import) کرد.

وضعیت پشتیبانی مرورگرها و ابزارها

• سیستم‌های قدیمی: محیط Node.js سال‌هاست که از این قابلیت پشتیبانی می‌کند. همچنین کتابخانه‌ها و فریم‌ورک‌های زیادی سیستم‌های ماژولار خودشان را داشتند؛ مثل سیستم‌های مبتنی بر CommonJS و AMD (نمونه معروفش RequireJS) و ابزارهایی مثل Webpack و Babel.

• مرورگرهای مدرن: امروزه خوشبختانه تمام مرورگرهای مدرن به صورت بومی (Native) از ماژول‌ها پشتیبانی می‌کنند و نیازی به تبدیل کدها (Transpilation) ندارند. این یک قابلیت عالی است، چون مرورگر می‌تواند بارگذاری ماژول‌ها را بهینه‌سازی کند و کارایی برنامه را بالا ببرد.

یک نکته مهم: آیا پشتیبانی بومی مرورگرها، ابزارهایی مثل Webpack را منسوخ کرده؟ خیر! باندلرها (Bundlers) هنوز هم پادشاهی می‌کنند؛ چون کدها را به بخش‌های بهینه تقسیم می‌کنند و کارهای مهمی مثل فشرده‌سازی کدهای اضافه (Minification) و حذف کدهای مرده و بلااستفاده (Tree-shaking) را انجام می‌دهند.

ساختار یک پروژه نمونه و پایه (Basic example structure)

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

index.html
main.js
modules/
    canvas.js
    square.js

توضیح وظیفه فایل‌های پوشه modules:

۱. فایل canvas.js: شامل توابع مربوط به راه‌اندازی و مدیریت بوم نقاشی (Canvas) است:

• تابع create(): یک بوم نقاشی با طول و عرض مشخص درون یک تگ <div> ایجاد می‌کند.

• تابع createReportList(): یک لیست مرتب‌نشده (<ul>) برای نمایش گزارش‌ها ایجاد می‌کند.

۲. فایل square.js: شامل کدهای مربوط به رسم مربع است:

• ثابت name: یک مقدار ثابت که رشته 'square' را نگه می‌دارد.

• تابع draw(): یک مربع با اندازه، موقعیت و رنگ مشخص روی بوم رسم می‌کند.

• توابع reportArea() و reportPerimeter(): مساحت و محیط مربع را محاسبه کرده و در لیست گزارش می‌نویسند.

چالش انتخاب پسوند: .js یا .mjs؟

شاید در برخی آموزش‌ها دیده باشید که برای فایل‌های ماژول از پسوند .mjs به جای .js استفاده می‌کنند. برای مثال، مستندات موتور جاوااسکریپتِ گوگل (V8) این کار را پیشنهاد می‌کند. اما چرا؟

مزایای استفاده از .mjs

• شفافیت بالا: در یک نگاه مشخص می‌شود کدام فایل یک ماژول است و کدام یک یک فایل جاوااسکریپت معمولی.

• شناسایی راحت‌تر: محیط‌هایی مثل Node.js و ابزارهایی مثل Babel راحت‌تر متوجه ماژول بودن فایل می‌شوند.

پس چرا ما فعلاً از همان .js استفاده می‌کنیم؟

پاسخ در یک کلمه است: تنظیمات سرور (Server Configuration). برای اینکه ماژول‌ها بدون مشکل در مرورگر اجرا شوند، سرور شما باید آن‌ها را با یک هدر مشخص به نام Content-Type و با فرمت استاندارد جاوااسکریپت یعنی text/javascript ارسال کند.

• اکثر سرورها به صورت پیش‌فرض فایل‌های .js را به درستی ارسال می‌کنند، اما هنوز خیلی از سرورها برای پسوند .mjs تنظیم نشده‌اند!

• اگر سرور این هدر را درست نفرستد، مرورگر با خطای Strict MIME type checking مواجه می‌شود و اصلاً کدهای شما را اجرا نمی‌کند.

توصیه برای یادگیری: سرویس‌هایی مثل GitHub Pages یا ابزار http-server در Node.js پسوند .mjs را به خوبی می‌شناسند. اما برای حفظ سازگاری بالاتر و راحتی در یادگیری، بهتر است فعلاً از همان پسوند .js استفاده کنیم. اگر خیلی به شفافیت کد علاقه دارید، می‌توانید در زمان توسعه از .mjs استفاده کنید و موقع خروجی گرفتن (Build)، آن‌ها را به .js تبدیل کنید.

دو نکته پایانی که باید بدانید:

1. برخی از ابزارهای قدیمی ممکن است هرگز از .mjs پشتیبانی نکنند.

2. برای اینکه به مرورگر بفهمانید یک فایل ماژول است، از تگ <script type="module"> در HTML استفاده می‌کنیم که در بخش‌های بعدی به آن می‌رسیم.