آموزش جاوااسکریپت
در درس قبل با «الگوی ماژول» به عنوان یک راه حل کلاسیک برای سازماندهی کد آشنا شدیم. با معرفی استاندارد ECMAScript 2015 (ES6)، جاوااسکریپت بالاخره صاحب یک سیستم ماژول بومی و استاندارد شد. این سیستم که به آن ES Modules یا ESM می‌گویند، روشی مدرن و مبتنی بر فایل برای نوشتن کدهای ماژولار است و امروزه به استاندارد اصلی در توسعه جاوااسکریپت (چه در مرورگر و چه در سمت سرور با Node.js) تبدیل شده است. این سیستم بر پایه دو کلمه کلیدی اصلی کار می‌کند: export و import.
با ESM، هر فایل جاوااسکریپت به عنوان یک ماژول مجزا در نظر گرفته می‌شود. این ماژول حوزه (scope) مخصوص به خود را دارد و متغیرهای تعریف شده در آن به صورت پیش‌فرض خصوصی هستند و حوزه سراسری را آلوده نمی‌کنند. برای اینکه بتوانیم از یک متغیر، تابع یا کلاس در ماژول دیگری استفاده کنیم، باید آن را به صراحت export کنیم.
دو روش اصلی برای خروجی گرفتن از یک ماژول وجود دارد:
JAVASCRIPT - a file named utils.js
// Named export of a constant
export const PI = 3.14159;
// Named export of a function
export function add(a, b) {
return a + b;
}
// Default export of a function
export default function multiply(a, b) {
return a * b;
}
برای استفاده از مقادیر export شده، در ماژول دیگر از دستور import استفاده می‌کنیم.
JAVASCRIPT - a file named main.js
// Import the default export and the named exports from utils.js
import multiply, { PI, add } from './utils.js';
console.log('PI is:', PI); // 3.14159
console.log('Sum is:', add(5, 2)); // 7
console.log('Product is:', multiply(5, 2)); // 10
در این کد، خروجی پیش‌فرض (`multiply`) بدون آکولاد و خروجی‌های نام‌گذاری شده (`PI` و `add`) در داخل آکولاد وارد می‌شوند.
برای اینکه به مرورگر بگوییم یک فایل اسکریپت را به عنوان یک ماژول ESM تفسیر کند (و اجازه استفاده از import/export را بدهد)، باید به تگ <script> خود اتریبیوت type="module" را اضافه کنیم.
HTML
<!DOCTYPE html>
<html>
<body>
<!-- This script will be loaded and executed as an ES module -->
<script type="module" src="main.js"></script>
</body>
</html>
وقتی مرورگر فایل main.js را می‌بیند، دستور import داخل آن را خوانده و یک درخواست دیگر برای دریافت فایل utils.js نیز ارسال می‌کند. این روش برای پروژه‌های کوچک به خوبی کار می‌کند، اما برای اپلیکیشن‌های بزرگ با صدها ماژول، می‌تواند منجر به ارسال تعداد زیادی درخواست HTTP و کندی در بارگذاری اولیه شود.
برای حل مشکل درخواست‌های متعدد و همچنین افزودن قابلیت‌های دیگر، در توسعه وب مدرن از ابزارهایی به نام «باندلرهای ماژول» (Module Bundlers) مانند Vite، Webpack و Parcel استفاده می‌شود.
کار اصلی یک باندلر این است که در مرحله «ساخت» (build)، تمام کدهای جاوااسکریپت پروژه شما را می‌خواند، گراف وابستگی‌ها (dependency graph) را بر اساس دستورات import و export ترسیم می‌کند، و در نهایت تمام کدها را در یک یا چند فایل بهینه‌سازی شده و فشرده (که به آن "bundle" می‌گویند) خروجی می‌دهد. این فایل نهایی همان چیزی است که در محیط پروداکشن روی سرور قرار می‌گیرد.
باندلرها علاوه بر این، وظایف مهم دیگری را نیز انجام می‌دهند:
در این درس با سیستم ماژول بومی جاوااسکریپت (ESM) و سینتکس import/export به عنوان روش مدرن سازماندهی کد آشنا شدیم. همچنین دیدیم که چگونه ابزارهای توسعه مانند باندلرها، این ماژول‌ها را برای استفاده بهینه در محیط پروداکشن پردازش می‌کنند. با این درس، فصل «کار با ماژول‌ها» به پایان می‌رسد. ما از الگوهای سنتی به سیستم‌های مدرن رسیدیم و اکنون آماده‌ایم تا کدهایمان را برای پروژه‌های بزرگ مقیاس‌پذیر کنیم. در فصل بعدی، به سراغ «کار با Workerها» خواهیم رفت و یاد می‌گیریم که چگونه با اجرای اسکریپت‌ها در ترِدهای پس‌زمینه، از قفل شدن رابط کاربری جلوگیری کرده و عملکرد اپلیکیشن‌های سنگین را بهبود ببخشیم.