سینتکس import/export در جاوااسکریپت
سیستم ماژول‌ها در جاوااسکریپت با استفاده از سینتکس import/export یکی از قوی‌ترین ویژگی‌های این زبان برای مدیریت کدهاست. این سیستم به توسعه‌دهندگان اجازه می‌دهد کدهای خود را به بخش‌های مستقل تقسیم کرده و به راحتی بین فایل‌ها اشتراک‌گذاری کنند.
انواع export
در جاوااسکریپت دو روش اصلی برای export کردن ماژول‌ها وجود دارد:
- Named Export: زمانی استفاده می‌شود که بخواهیم چندین مقدار را از یک ماژول export کنیم.
- Default Export: برای زمانی که فقط یک مقدار اصلی از ماژول export می‌شود.
| نوع export |
سینتکس |
مثال |
| Named |
export { نام } |
export { sum, multiply } |
| Default |
export default مقدار |
export default Calculator |
انواع import
مقادیر export شده را می‌توان به روش‌های مختلف import کرد:
- import کردن تمام named exports با استفاده از سینتکس {}
- import کردن default export بدون آکولاد
- import کردن همزمان named و default exports
- import کردن تمام exports یک ماژول به صورت یک object
برای یادگیری عمیق‌تر درباره ماژول‌ها در جاوااسکریپت، می‌توانید اینجا را نگاه کنید. این منبع به شما کمک می‌کند مفاهیم پیشرفته‌تری مانند dynamic import و کار با ماژول‌های third-party را بیاموزید.
مثال‌های کاربردی
در اینجا چند مثال عملی از استفاده از import/export را مشاهده می‌کنید:
فایل math.js:
export const sum = (a, b) => a + b;
export const multiply = (a, b) => a * b;
export default function() { console.log('Default export'); }
فایل main.js:
import defaultFunc, { sum, multiply } from './math.js';
console.log(sum(2, 3)); // 5
defaultFunc(); // "Default export"
نکته مهم: هنگام کار با ماژول‌ها در مرورگر، حتما باید از ویژگی type="module" در تگ script استفاده کنید.
