چیت شیت یا برگه تقلب ماژول جاوا اسکریپت: راه های مختلف export و روش های مربوط به import 

برگه تقلب ماژول جاوا اسکریپت

در اینجا یک cheatsheet برای نشان دادن راه های مختلف export و روش های مربوط به import آن وجود دارد. به ۳ نوع تقسیم می شود: name، default و list. فقط مطمئن شوید که export شما با روش import شما مطابقت دارد ?

اگر کدهای زیر را متوجه نمیشوید، ادامه مطلب را جزء به جزء بخوان!
// Name Export | Name Import
export const name = 'value'
import { name } from '...'
// Default Export | Default Import
export default 'value'
import anyName from '...'
// Rename Export | NameImport
export { name as newName }
import { newName } from '...'
// Name + Default | Import All
export const name = 'value'
export default 'value'
import * as anyName from '...'
// Export List + Rename | Import List + Rename
export {
  name1,
  name2 as newName2
}
import {
  name1 as newName1,
  newName2
} from '...'

حالا بیایید به هر یک از آنها نگاه کنیم و ببینیم چگونه کار می کنند ?

اول) Name

کلید اینجا داشتن name است . بنابراین یک “named” اکسپورت میشود:

export const name = 'value';
import { name } from '...';
console.log(name); // 'value'

قبلا چی گفتم؟ اگر نامی نباشد اکسپورتی هم نخواهد بود=> no name so no export

export 'value'
import { } // ? در اینجا ببینید من نمیدانم چه چیزی را بگذارم...یک نام به من بدهید!

دوم) Default

با اکسپورت Default، به هیچ نامی نیاز ندارید. بنابراین میتوانی اسمشو هر چی میخوای بذاری?

export default 'value'
import anyName from '...';
console.log(anyName); // 'value'

❌برای اکسپورت Default نیازی به ساخت متغیر و نام دادن نداری

export default const name = 'value'; // سعی نکن به من نام بدهی!

ترکیب Default + Name

شما میتوانید اکسپورت default و name را در یک فایل انجام دهید.?

export const name = 'value';
export default 'value'
import anyName, { name } from '...';

سوم) List

نوع سوم اکسپورت list است

const name1 = 'value1';
const name2 = 'value2';
export {
  name1,
  name2
}
import {
  name1,
  name2
} from '...'
console.log(
  name1, // 'value1'
  name2, // 'value2'
)

نکته مهمی که باید به آن توجه داشت این است که این لیست ها object نیستند. بله، می دانم که ممکن است اینطور به نظر می رسد، اما اینطور نیست. وقتی برای اولین بار ماژول ها را یاد گرفتم من هم کمی سرگردان شدم. این یک object نیست، یک لیست اکسپورت export list است!

//  Export list ≠ Object
export {
  name: 'name'
}

تغییر نام export اکسپورت

از نام اکسپورت راضی نیستم. مشکلی نیست، می توانید با استفاده از کلمه کلیدی as نام آن را تغییر دهید.

const name = 'value'
export {
  name as newName
}
import { newName } from '...'
console.log(newName); // 'value'
// Original name is not accessible
console.log(name); //  undefined

 نمی توان اکسپورت inline یا درون خطی را با اکسپورت لیست ترکیب کرد

export const name = 'value';
// شما قبلا اکسپورت کردید ☝️, دوباره اکسپورت نکنید همان نام را
export {
  name
}

تغییر نام ایمپورت import

همین قانون در مورد ایمپورت import نیز صادق است. می توانیم با استفاده ازکلمه کلیدی as نام آن را تغییر دهیم.

const name1 = 'value1';
const name2 = 'value2';
export {
  name1,
  name2 as newName2
}
import {
  name1 as newName1,
  newName2
} from '...'
console.log(newName1); // 'value1'
console.log(newName2); // 'value2'
name1; // undefined
name2; // undefined

Import All ایمپورت همه

export const name = 'value';
export default 'defaultValue';
import * as anyName from '...';
console.log(anyName.name); // 'value'
console.log(anyName.default); // 'defaultValue'

Name (استفاده از نام) در مقابل استفاده از Default
فرض کنید مقداری پول به دوستتان بدهکار هستید. دوست شما می گوید که می توانید با پول نقد یا حواله الکترونیکی آنها را پس بدهید. پرداخت از طریق انتقال الکترونیکی مانند یک اکسپورت دارای نام named export است زیرا نام شما به تراکنش پیوست شده است. بنابراین اگر دوستتان فراموشکار باشد و شروع به تعقیب شما کند و ادعا کند که هنوز به او بدهکار هستید، شما به سادگی می توانید مدرک انتقال را به آنها نشان دهید زیرا نام شما در پرداخت وجود دارد. با این حال، اگر به دوست خود پول نقد پرداخت کرده اید، که مانند یک اکسپورت پیشفرض یا همان default export است، شما هیچ مدرکی ندارید. آنها میتوانند بگویند ۵۰ دلار از سوزان است و نه شما. پول نقد هیچ نامی به آن ضمیمه نشده است تا بتوانند بگویند از طرف شما یا هر کسی دیگر است ?

پس بهتر است با حواله الکترونیکی  named export) پیش برویم یا نقدی ( default export) ؟ خوب این بستگی به این دارد که آیا به دوست خود اعتماد دارید یا نه ? در واقع، این راه درستی برای چارچوب دادن به این معضل نیست. راه حل بهتر این است که رابطه خود را در آن موقعیت قرار ندهید. بهتر است صریح باشید تا دوستی خود را به خطر نیندازید. و بله، این ایده در مورد انتخاب اکسپورت دارای نام named یا default نیز صدق می کند. ترجیح می‌دهم صریح‌تر بگویم، بنابراین کد شما کاملاً واضح است. اما مطمئناً کد شما کد خودتان است. و شما می توانید هر کاری که برای شما و تیمتان مفید است انجام دهید ?

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *