Export و Import

دستورات export و import شامل چندین نوع پیاده سازی هستند.

در مقاله قبلی استفاده ساده ای از آنها را دیدیم، حال بیایید مثال های بیشتری را بررسی کنیم.

اکسپورت قبل از تعریف

می‌توانیم هر تعریفی را با قرار دادن export در قبل آن به عنوان اکسپورت شده علامت گذاری کنیم، که آن می‌تواند تعریف متغیر، تابع یا کلاس باشد.

به عنوان مثال، در اینجا همه export ها معتبر هستند:

// export an array
export let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

// export a constant
export const MODULES_BECAME_STANDARD_YEAR = 2015;

// export a class
export class User {
  constructor(name) {
    this.name = name;
  }
}

export function sayHi(user) {
  alert(`Hello, ${user}!`);
}  // no ; at the end

اکسپورت جدا از تعریف

همچنین، می‌توانیم export را به طور جداگانه قرار دهیم.

در اینجا ابتدا تعریف می‌کنیم و سپس export می‌کنیم:

// 📁 say.js
function sayHi(user) {
  alert(`Hello, ${user}!`);
}

function sayBye(user) {
  alert(`Bye, ${user}!`);
}

export {sayHi, sayBye}; // لیستی از متغیرهای اکسپورت شده

یا از نظر فنی می‌توان خط شامل export را در بالای تعریف توابع قرار داد.

Import *‎

معمولاً ما لیستی از آنچه را که می‌خواهیم import کنیم درون کرلی‌بریس import {...}‎ قرار می‌دهیم، مانند:

// 📁 main.js
import {sayHi, sayBye} from './say.js';

sayHi('John'); // Hello, John!
sayBye('John'); // Bye, John!

اما اگر چیزهای زیادی برای import از یک ماژول وجود داشته باشد، می‌توانیم همه را به عنوان یک شیء با استفاده از import * as <obj>‎ درون برنامه import کنیم.

// 📁 main.js
import * as say from './say.js';

say.sayHi('John');
say.sayBye('John');

در نگاه اول “import همه چیز” چیز خیلی خوبی به نظر می‌رسد، حجم کمتری کد می‌نویسیم، با این حال چرا باید همیشه به صراحت آنچه نیاز داریم را import کنیم؟

خب، چند دلیل وجود دارد.

1. فهرست کردن صریح مواردی که باید وارد شوند، نام‌های کوتاه‌تری را نشان می‌دهد: sayHi()‎ به جای say.sayHi()‎.
2. لیست واضح از import مرور بهتری از ساختار کد ایجاد می‌کند: چه چیزی استفاده شده و کجا. این پشتیبانی و بازبینی کد را آسان تر می‌کند.

Import "as"‎

همچنین می‌توانیم از as برای import تحت نام های متفاوت استفاده کنیم.

به عنوان مثال، اجازه دهید برای اختصار sayHi را import کنیم و آن را در متغیر محلی hi قرار دهیم، همچنین sayBye تحت عنوان bye :

// 📁 main.js
import {sayHi as hi, sayBye as bye} from './say.js';

hi('John'); // Hello, John!
bye('John'); // Bye, John!

Export "as"‎

ساختار مشابهی برای export وجود دارد.

اجازه دهید توابع را تحت عناوین hi و bye در پایین export کنیم:

// 📁 say.js
...
export {sayHi as hi, sayBye as bye};

اکنون hi و bye نام های رسمی برای استفاده در بیرون ماژول هستند، برای استفاده در import ها: