درک صادرات جاوا اسکریپت: صادرات پیش‌فرض در مقابل صادرات نام‌گذاری شده

Summarize this content to 400 words in Persian Lang
هنگام کار با ماژول های جاوا اسکریپت، به ویژه در چارچوب هایی مانند React، درک تفاوت بین صادرات پیش فرض و نامگذاری شده برای نوشتن کد تمیز و قابل نگهداری بسیار مهم است. این مقاله این دو نوع صادرات، تفاوت‌های آنها و زمان استفاده از هر کدام را توضیح می‌دهد.

صادرات پیش فرض

آ default export برای صادرات یک مقدار واحد از یک ماژول استفاده می شود. این مقدار می تواند یک تابع، کلاس، شی یا اولیه باشد و نیازی به نام خاصی ندارد. شما می توانید آن را با استفاده از هر نامی وارد کنید و انعطاف پذیری را در ساختار واردات خود فراهم کنید.

در مثال زیر، InnerPage به عنوان یک جزء تابع تعریف شده و به عنوان صادرات پیش‌فرض ماژول صادر می‌شود:

// InnerPage.js
const InnerPage = () => {
return div>Inner Pagediv>;
};
export default InnerPage;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

سپس، هنگام وارد کردن این کامپوننت، می توانید از هر نامی استفاده کنید:

// ParentPage.js
import AnyName from ‘./InnerPage’;

// Usage
AnyName />

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

امکان تغییر نام واردات می تواند مفید باشد، به خصوص اگر نام با یک شناسه (نام) دیگر در ماژول شما تضاد داشته باشد.

به نام صادرات

آ named export به شما امکان می دهد چندین مقدار را از یک ماژول صادر کنید. هر صادراتی باید با استفاده از نام دقیق خود وارد شود و وضوح کد شما را تشویق کند.

در زیر نحوه تعریف و صادرات یک جزء با استفاده از a آورده شده است named export:

// InnerPage.js
export const InnerPage = () => {
return div>Inner Pagediv>;
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

هنگام وارد کردن این کامپوننت، باید از نام دقیق آن استفاده کنید:

// ParentPage.js
import { InnerPage } from ‘./InnerPage’;

// Usage
InnerPage />

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این نامگذاری دقیق به جلوگیری از سردرگمی کمک می کند و آنچه را که وارد می شود را روشن می کند، که به ویژه در پایگاه های کد بزرگتر مفید است.

تفاوت های کلیدی

انعطاف در مقابل صراحت

default export انعطاف پذیری بیشتری را ارائه می دهد زیرا می توانید مقدار صادر شده را با هر نامی وارد کنید. اغلب زمانی استفاده می شود که یک ماژول دارای یک صادرات اولیه باشد.

import MyComponent from ‘./MyComponent’;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

named export شفافیت را تشویق می کند و از شما می خواهد که از نام دقیق صادرات استفاده کنید. زمانی مفید است که یک ماژول چندین مقدار را صادر کند.

import { MyComponent, AnotherComponent } from ‘./components’;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

زمینه استفاده

default export برای ماژول هایی که یک جزء، تابع یا مقدار واحد را صادر می کنند ایده آل است. بیانیه واردات را ساده می کند و کد را مختصر نگه می دارد.

// MyComponent.js
const MyComponent = () => { /* … */ };
export default MyComponent;

// App.js
import MyComponent from ‘./MyComponent’;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

named export برای ماژول هایی که چندین مؤلفه یا مقادیر را صادر می کنند مناسب است. این اظهارات واردات را توصیفی تر می کند و به حفظ ثبات کمک می کند.

// components.js
export const MyComponent = () => { /* … */ };
export const AnotherComponent = () => { /* … */ };

// App.js
import { MyComponent, AnotherComponent } from ‘./components’;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ترکیب صادرات پیش فرض و نامگذاری شده

همچنین می توانید ترکیب کنید default و named exports در همان ماژول زمانی که یک ماژول دارای صادرات اولیه همراه با برخی صادرات ثانویه باشد، می تواند مفید باشد.

// utilities.js
export const helperFunction = () => { /* … */ };

const mainUtility = () => { /* … */ };
export default mainUtility;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

هنگام وارد کردن، می توانید به صادرات پیش فرض و با نام دسترسی داشته باشید:

// App.js
import mainUtility, { helperFunction } from ‘./utilities’;

// Usage
mainUtility();
helperFunction();

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نتیجه

درک تفاوت بین صادرات پیش فرض و نامگذاری شده برای نوشتن کد جاوا اسکریپت واضح و قابل نگهداری ضروری است. هنگامی که یک ماژول یک صادرات اصلی دارد، از صادرات پیش فرض برای سادگی و انعطاف پذیری استفاده کنید. از صادرات نام‌گذاری شده برای ارتقای صراحت و وضوح استفاده کنید، به‌ویژه هنگامی که با صادرات چندگانه سروکار دارید.با تسلط بر این مفاهیم، ​​می توانید پایگاه های کد ماژولار، خوانا و قابل نگهداری بیشتری ایجاد کنید و همکاری و نگهداری آینده را آسان تر کنید.

// InnerPage.js
const InnerPage = () => {
  return div>Inner Pagediv>;
};
export default InnerPage;

// ParentPage.js
import AnyName from './InnerPage';

// Usage
AnyName />

// InnerPage.js
export const InnerPage = () => {
  return div>Inner Pagediv>;
};

// ParentPage.js
import { InnerPage } from './InnerPage';

// Usage
InnerPage />

import MyComponent from './MyComponent';

import { MyComponent, AnotherComponent } from './components';

// MyComponent.js
const MyComponent = () => { /* ... */ };
export default MyComponent;

// App.js
import MyComponent from './MyComponent';

// components.js
export const MyComponent = () => { /* ... */ };
export const AnotherComponent = () => { /* ... */ };

// App.js
import { MyComponent, AnotherComponent } from './components';

// utilities.js
export const helperFunction = () => { /* ... */ };

const mainUtility = () => { /* ... */ };
export default mainUtility;

// App.js
import mainUtility, { helperFunction } from './utilities';

// Usage
mainUtility();
helperFunction();