ماژول ها در ES6 (ES6 Modules)
در جاوااسکریپت، ماژول ها در ES6 کمک می کنند کد را تکه تکه کنیم. هر تکه در یک فایل جدا قرار می گیرد. این کار، مدیریت پروژه را در ری اکت و جاوااسکریپت خیلی ساده تر می کند. به خصوص وقتی پروژه بزرگ می شود، داشتن ماژول ها در ES6 مثل داشتن دفترهای جدا برای هر درس است.
ماژول ها در ES6 چیست؟
ماژول (Module) یعنی هر فایل جداگانه جاوااسکریپت که می تواند چیزهایی را بدهد یا بگیرد. این دادن و گرفتن با دو کلمه مهم انجام می شود: export و import. وقتی می خواهی چیزی را از فایلی بیرون بفرستی، از export استفاده می کنی. وقتی هم می خواهی از فایلی چیزی بگیری، از import کمک می گیری.
پس ماژول ها در ES6 یعنی کدی که با import و export بین فایل ها جا به جا می شود. در ری اکت تقریبا همیشه با این دو کلمه سروکار داری. مثلا هر کامپوننت یک ماژول است که export می شود و در فایل دیگر import می شود.
انواع export در ES6
در ES6 دو نوع export داریم: Named Export و Default Export. در Named Export می توانی چند چیز مختلف از یک فایل بیرون بدهی. در Default Export فقط یک مورد اصلی را بیرون می دهی.
Named Export به صورت جداگانه در خط ها
در Named Export می توانی متغیر (Variable) یا تابع را کنار خودشان export کنی. این مدل شبیه این است که موقع نوشتن نام هر دانش آموز، هم زمان کلاسش را هم کنارش بنویسی.
export const name = "Tobias";
export const age = 18;
اینجا دو خروجی نام گذاری شده داریم: name و age. هر دوی آن ها را می توانیم بعدا در فایل دیگر با همان نام دریافت کنیم. مهم است که نام ها دقیق و یکسان باشند.
Named Export در انتهای فایل
روش دوم این است که متغیرها را عادی تعریف کنی و در انتهای فایل یک جا export کنی. این مثل لیستی است که در آخر برگه، همه اسامی انتخابی را جمع می کنی.
const name = "Tobias";
const age = 18;
export {
name,
age
};
در این روش باز هم دو Named Export داریم، اما جدا از تعریف نیستند. گاهی این روش خوانایی کد را بیشتر می کند، چون exportها در انتهای فایل یک جا دیده می شوند.
Default Export در ES6
Default Export یعنی در هر فایل فقط یک خروجی اصلی داری. مثل این است که بگویی «قهرمان اصلی این داستان فقط همین یک نفر است».
در مثال زیر یک فایل به نام message.js داریم. داخل آن یک تابع پیکانی (Arrow Function) تعریف شده و در پایان به عنوان Default Export بیرون فرستاده می شود.
const message = () => {
const name = "Tobias";
const age = 18;
return name + " is " + age + " years old.";
};
export default message;
در هر فایل فقط یک Default Export می توانیم داشته باشیم. این کمک می کند بفهمیم مهم ترین چیز آن فایل چیست. در ری اکت معمولا هر کامپوننت اصلی با Default Export بیرون فرستاده می شود.
Import در ماژول ها در ES6
حالا باید یاد بگیریم چطور چیزهایی را که export کردیم وارد کنیم. برای این کار از import استفاده می کنیم. شکل import برای Named Export و Default Export کمی فرق دارد.
Import برای Named Export
برای گرفتن Named Exportها باید از آکولاد استفاده کنی. این کار شبیه این است که از بین چند اسم، دقیقا نام های موردنیاز را داخل آکولاد بنویسی.
import {
name,
age
} from "./person.js";
اینجا دقیقا همان name و age را از فایل person.js می گیریم. اگر نام را اشتباه بنویسی، چیزی دریافت نمی کنی. پس نام ها باید با Named Export یکی باشند.
Import برای Default Export
برای Default Export دیگر نیازی به آکولاد نداریم. می توانیم هر نام دلخواهی برای دریافت آن بنویسیم.
import message from "./message.js";
اینجا Default Export فایل message.js را با نام message وارد کردیم. اگر دوست داشته باشی، می توانی اسم دیگری هم بگذاری. مهم این است که آن فایل فقط یک Default Export دارد.
ماژول ها در ES6 در پروژه های ری اکت
در ری اکت هر کامپوننت معمولا داخل یک فایل جدا است. این فایل خودش یک ماژول در ES6 محسوب می شود. تو با export کامپوننت را بیرون می دهی و در فایل دیگر با import آن را استفاده می کنی. این گونه، ساختار پروژه تمیز و قابل فهم می ماند.
برای مثال وقتی درباره عملگر پخش (Spread) (ES6 Spread Operator) خواندی، دیدی چطور کدها را تمیزتر می کند. حالا در کنار آن، ماژول ها در ES6 کمک می کنند این کدهای تمیز را در فایل های منظم پخش کنی. این ترکیب در پروژه های ری اکت حرفه ای کاملا عادی است.
اگر خواستی بعدا درباره نمایش شرطی در ری اکت یاد بگیری، می توانی سراغ صفحه عملگر سه تایی در ES6 (ES6 Ternary) بروی. آن جا هم ماژول ها در ES6 پشت صحنه حضور دارند، چون همان جا هم از import و export برای کامپوننت ها استفاده می شود.
تمرین گام به گام با ماژول ها در ES6
برای تمرین، این مراحل ساده را انجام بده تا ماژول ها در ES6 برایت جا بیفتد.
- یک فایل به نام
student.jsبساز و دو متغیر مانندfirstNameوgradeتعریف کن. - این متغیرها را با Named Export، یک بار کنار تعریف و یک بار در انتهای فایل export کن.
- فایل جدیدی به نام
showStudent.jsبساز و با import نام گذاری شده، firstName و grade را داخل آن فایل بگیر. - یک تابع پیکانی Default Export در فایل
info.jsبساز که یک متن درباره دانش آموز برگرداند. - در فایل اصلی پروژه، هم Named Exportهای student.js و هم Default Export فایل info.js را import کن و در کنسول چاپ کن.
اگر جایی قاطی کردی، یک بار دیگر این صفحه و لینک ماژول ها در ES6 را مرور کن. با چند بار تمرین، import و export دیگر برایت ترسناک نخواهد بود.
جمع بندی سریع
- ماژول ها در ES6 کمک می کنند کد را در فایل های جدا نگه داریم.
- Named Export اجازه می دهد چند خروجی مختلف از یک فایل داشته باشیم.
- در هر فایل فقط یک Default Export می توانیم داشته باشیم.
- برای Named Export باید از آکولاد در import استفاده کنیم.
- ماژول ها در ES6 در ری اکت پایه کار با کامپوننت ها هستند.