بررسی Named Export و Default Export در ES6

فرناز عبداللهی

آبان 7, 1399

ES6 امکان import کردن یک ماژول و استفاده از آن در فایل‌های دیگر را برای ما فراهم می‌کند. اگر بخواهیم با اصطلاحات دقیق React توضیح دهیم، می‌توان کامپوننت‌ها را در فایل‌های دیگر از طریق export کردن آن کامپوننت از ماژول مربوطه استفاده کنیم.

ES6 دو روش Export یک ماژول را از یک فایل فراهم می‌کند: Named Export و Default Export.

Named Export:

با استفاده از Named Export می‌توانیم چندین export با اسم‌های مختلف از یک فایل داشته باشیم. سپس exportهای معینی را که می‌خواهیم با استفاده از {}، import کنیم.

// imports

// ex. importing a single named export

import { MyComponent } from "./MyComponent";

// ex. importing multiple named exports

import { MyComponent, MyComponent2 } from "./MyComponent";

// ex. giving a named import a different name by using "as":

import { MyComponent2 as MyNewComponent } from "./MyComponent";

// exports from ./MyComponent.js file

export const MyComponent = () => {}

export const MyComponent2 = () => {}

// imports // ex. importing a single named export import { MyComponent } from "./MyComponent"; // ex. importing multiple named exports import { MyComponent, MyComponent2 } from "./MyComponent"; // ex. giving a named import a different name by using "as": import { MyComponent2 as MyNewComponent } from "./MyComponent"; // exports from ./MyComponent.js file export const MyComponent = () => {} export const MyComponent2 = () => {}

// imports
// ex. importing a single named export
import { MyComponent } from "./MyComponent";
// ex. importing multiple named exports
import { MyComponent, MyComponent2 } from "./MyComponent";
// ex. giving a named import a different name by using "as":
import { MyComponent2 as MyNewComponent } from "./MyComponent";
// exports from ./MyComponent.js file
export const MyComponent = () => {}
export const MyComponent2 = () => {}

Import تمام Named Export‌ ها داخل یک آبجکت:

import * as MainComponents from "./MyComponent";

// use MainComponents.MyComponent and MainComponents.MyComponent2

here

import * as MainComponents from "./MyComponent"; // use MainComponents.MyComponent and MainComponents.MyComponent2 here

import * as MainComponents from "./MyComponent";
// use MainComponents.MyComponent and MainComponents.MyComponent2
here

Default Export:

در این نوع به ازای هر فایل تنها یک Default Export می‌توانیم داشته‌ باشیم. هنگام import باید نام آن را مشخص کرده و به شکل زیر import کنیم:

// import

import MyDefaultComponent from "./MyDefaultExport";

// export

const MyComponent = () => {}

export default MyComponent;

// import import MyDefaultComponent from "./MyDefaultExport"; // export const MyComponent = () => {} export default MyComponent;

// import
import MyDefaultComponent from "./MyDefaultExport";
// export
const MyComponent = () => {}
export default MyComponent;

نام import در Default Export کاملا مستقل از export است و می‌تواند هر اسمی را داشته باشد.

دیدگاه‌ها:

محمد مومن زاده

دی 30, 1401 در 9:09 ق.ظ

عالی بود

افزودن دیدگاه جدید لغو پاسخ

برای نوشتن دیدگاه باید وارد بشوید.