javascriptJavaScript modulesماژول و import در جاوااسکریپت
ماژول‌های جاوااسکریپت را با دو فایل کوچک تمرین کنید؛ export و import نام‌دار، مسیر نسبی و تفاوت اجرای ماژول با چسباندن کدها را بشناسید.
مفهوم به زبان ساده
وقتی برنامه بزرگ‌تر می‌شود، نگهداری همهٔ محاسبه‌ها در یک فایل پیدا کردن مسئولیت‌ها را دشوار می‌کند. ماژول اجازه می‌دهد بخش مشخصی را در فایلی جدا قرار دهیم و فقط قابلیت‌های مورد نیاز را صادر کنیم. export مشخص می‌کند چه چیزی بیرون فایل قابل واردکردن است؛ import همان قابلیت را در فایل مصرف‌کننده در دسترس می‌گذارد. نام‌های محلی هر ماژول خودکار متغیر سراسری صفحه نمی‌شوند.
این نمونه دو فایل دارد و نباید تمام کد با هم در یک فایل چسبانده شود. price.mjs محاسبهٔ مبلغ همراه ارسال را صادر می‌کند. main.mjs آن را از مسیر نسبی همان پوشه وارد می‌کند و نتیجه را چاپ می‌کند. نام import باید با export نام‌دار مطابقت داشته باشد؛ export پیش‌فرض قرارداد دیگری دارد.
برای اجرا، دو فایل را کنار هم ذخیره و در همان پوشه node main.mjs را اجرا کنید. در مرورگر، ماژول را با script از نوع module و از طریق سرور محلی بار کنید؛ بازکردن مستقیم فایل با file می‌تواند مشکل ایجاد کند. ماژول‌ها در حالت strict اجرا می‌شوند. برای تمرین، هزینهٔ ارسال را فقط در فایل قیمت عوض کنید و بدون کپی‌کردن تابع به فایل اصلی، نتیجهٔ تازه را مشاهده کنید.
کجا به کار می‌آید؟
- تقسیم منطق محاسبه و کد رابط به فایل‌های با مسئولیت روشن
- استفادهٔ مجدد از یک تابع بدون کپی‌کردن بدنهٔ آن
از تعریف تا یک مثال واقعی
// فایل price.mjs
export function totalWithDelivery(price) {
return price + 20000;
}
// فایل main.mjs
import { totalWithDelivery } from './price.mjs';
console.log(totalWithDelivery(80000));
100000
این مثال چطور کار می‌کند؟
بخش اول را در price.mjs و بخش دوم را در main.mjs ذخیره کنید.
export تابع را برای واردکردن نام‌دار در دسترس می‌گذارد.
main.mjs همان تابع را می‌خواند و مجموع ۱۰۰۰۰۰ را چاپ می‌کند.
اشتباه رایج
دو بخش این مثال دو فایل جدا هستند. چسباندن آن‌ها در یک فایل، نمونهٔ درست import و export نیست. مسیر نسبی و نام فایل را دقیق بنویسید.
این را به خاطر بسپارید
ماژول مرز فایل و قرارداد استفادهٔ مجدد می‌سازد؛ export و import دو سوی آن قراردادند.