فرادرسآشنایی با تغییرات ساختار ایمپورت و اکسپورت در ES6 – راهنمای جامع
در این مقاله تلاش کرده‌ایم در مورد تغییرهای ساختار ایمپورت و اکسپورت در ES6 بررسی جامعی به عمل آوریم. تا پیش از ES6 با چندین تگ اسکریپت در یک فایل HTML منفرد مواجه بودیم که فایل‌های جاوا اسکریپت مختلفی را ایمپورت می‌کردند:
بنابراین در صورتی که متغیری با نام یکسان در فایل‌های جاوا اسکریپت مختلف داشته باشیم، با تعارض نام‌ها مواجه می‌شویم و مقداری که مورد انتظار ما است با مقداری که متغیر می‌گیرد، متفاوت خواهد بود. ES6 این مشکل را با معرفی مفهوم ماژول‌ها کرده است.
هر فایل جاوا اسکریپت که می‌نویسیم به عنوان یک ماژول شناخته می‌شود و متغیرها و تابع‌هایی که در هر فایل تعریف می‌شوند تا زمانی که به صورت خاص به فایل دیگری اکسپورت نشده باشد و در آن فایل نیز ایمپورت نشده باشد، در اختیار آن قرار نمی‌گیرد.
بنابراین تابع‌ها و متغیرهای تعریف‌شده در هر فایل، برای آن فایل خصوصی هستند و نمی‌توانند از خارج از فایل مورد دسترسی قرار گیرند، مگر این که آن‌ها را اکسپورت کنیم. دو روش برای اکسپورت کردن وجود دارد:
- اکسپورت نامدار (Named Exports): در یک فایل منفرد می‌توان چندین اکسپورت نامدار داشت.
- اکسپورت پیش‌فرض (Default Exports): در هر فایل منفرد، تنها یک اکسپورت پیش‌فرض می‌تواند وجود داشته بشد.
اکسپورت‌های نامدار
برای اکسپورت کردن یک مقدار منفرد به صورت اکسپورت نامدار باید به صورت زیر عمل کنیم:
همچنین می‌توانیم گزاره را به جای این که در جلوی اعلام متغیر اکسپورت کنیم، این کار را روی خط متفاوتی انجام دهیم و چیزهایی که باید اکسپورت شوند را داخل آکولاد تعیین کنیم:
توجه کنید که ساختار اکسپورت یک ساختار لفظی شیء نیست. از این رو در ES6 برای اکسپورت یک چیز نمی‌توانیم جفت کلید-مقداری مانند زیر استفاده کنیم:
برای ایمپورت کردن موارد اکسپورت شده به صورت نامدار باید از ساختار زیر استفاده کنیم:
توجه داشته باشید که وقتی چیزی را از فایل ایمپورت می‌کنیم، نیازی به اضافه کردن پسوند.js به آن نداریم، چون به صورت پیش‌فرض چنین تلقی می‌شود:
نکته مهم: نامی که در زمان اکسپورت کردن استفاده می‌شود، باید با نام زمان ایمپورت هماهنگ باشد. بنابراین اگر اکسپورت به صورت زیر باشد:
در زمان ایمپورت باید از کد زیر استفاده کنیم:
ما نمی‌توانیم از هیچ نام دیگری مانند زیر استفاده کنیم:
اما اگر از قبل متغیری داشته باشیم که از همان نام اکسپورت شده استفاده می‌کند، می‌توانیم در زمان ایمپورت کردن، نام ساختار را تغییر دهیم:
در کد فوق مقدار PI را به PIValue تغییر دادیم، چون نمی‌توانیم از نام متغیر PI استفاده کنیم. بنابراین برای دریافت مقدار اکسپورت شده PI باید نام آن را به PIValue عوض کنیم. همچنین می‌توانیم از تغییر نام ساختار در زمان اکسپورت کردن استفاده کنیم:
سپس در زمان ایمپورت کردن باید به صورت زیر از PIValue استفاده کنیم:
برای اکسپورت چیزی به صورت اکسپورت نامدار، باید ابتدا آن را اعلان کنیم:
نکته: ترتیب ایمپورت کردن چندین اکسپورت نامدار اهمیتی ندارد.
فرض کنید یک کامپوننت به نام validations.js به صورت زیر داریم و تابع اعتبارسنجی را در خط آخر آن اکسپورت می‌کنیم:
سپس در فایل دیگری مانند index.js تابع‌های اعتبارسنجی را به صورت زیر ایمپورت می‌کنیم:
چنان که می‌بینید، می‌توانیم تنها موارد اکسپورت شده مورد نیاز را ایمپورت کنیم و این کار با هر ترتیب دلخواه قابل اجرا است. از این رو لازم نیست ترتیب اکسپورت آن‌ها را در فایل دیگر بررسی کنیم. این زیبایی اکسپورت‌های نامدار است.
اکسپورت پیش‌فرض
چنان که پیش‌تر گفتیم، در هر فایل، حداکثر یک اکسپورت پیش‌فرض می‌تواند وجود داشته باشد. در مجموع امکان داشتن چندین اکسپورت نامدار و یک اکسپورت پیش‌فرض در هر فایل منفرد وجود دارد.
برای اعلان یک اکسپورت پیش‌فرض باید کلیدواژه default را در جلوی کلیدواژه export مانند زیر بیاوریم:
برای ایمپورت اکسپورت پیش‌فرض لازم نیست آکولادها را مانند آنچه در مورد اکسپورت نامدار انجام می‌دادیم، بیاوریم:
اگر چندین اکسپورت نامدار و یک اکسپورت پیش‌فرض مانند زیر داشته باشیم:
برای ایمپورت کردن همه آن‌ها در یک خط منفرد از متغیر اکسپورت پیش‌فرض پیش از آکولاد استفاده می‌کنیم:
یک خصوصیت اکسپورت پیش‌فرض این است که می‌توانیم نام متغیر اکسپورت شده را در زمان ایمپورت کردن عوض کنیم:
همچنین در فایل دیگر می‌توانیم از نام دیگری در زمان ایمپورت کردن استفاده کنیم:
بدین ترتیب در کد فوق نام متغیر اکسپورت پیش‌فرض را از AGE به myAge عوض کرده‌ایم. دلیل عملی بودن این کار آن است که تنها یک اکسپورت پیش‌فرض می‌تواند وجود داشته باشد و از این رو نام آن می‌تواند هر چیزی که می‌خواهیم باشد.
نکته: کلیدواژه اکسپورت پیش‌فرض (export default) نمی‌تواند مانند کد زیر پیش از اعلان متغیر بیاید:
بنابراین باید از کلیدواژه export default در خط متمایزی استفاده کنیم:
با این حال می‌توانیم export default را بدون اعلان متغیر به صورت زیر داشته باشیم:
و در فایل دیگر به صورت زیر عمل می‌کنیم:
روش دیگری برای ایمپورت کردن همه متغیرهای اکسپورت شده در فایل با استفاده از ساختار زیر وجود دارد:
در این کد همه اکسپورت‌های نامدار و پیش‌فرض را در فایل constants.js داریم و در متغیر constants ذخیره می‌کنیم. بنابراین constants اینک به یک شیء تبدیل شده است:
در فایل دیگر از آن به صورت زیر استفاده می‌کنیم:
اگر نخواهید اکسپورت‌های پیش‌فرض و نامدار را در خطوط متفاوتی داشته باشید، می‌توانید آن‌ها را به صورت زیر ترکیب کنید:
در کد فوق USER را به صورت اکسپورت پیش‌فرض و بقیه را به صورت اکسپورت نامدار می‌بینیم. در فایل دیگر نیز به صورت زیر از آن استفاده می‌کنیم:
سخن پایانی
در ES6 داده‌هایی که در یک فایل اعلان می‌شوند، در فایل دیگر قابل دسترسی نیستند، مگر این که از فایل اول اکسپورت شده و در فایل دوم ایمپورت شوند.
اگر مورد منفردی مانند اعلان یک کلاس در یک فایل باشد که بخواهیم اکسپورت شود از اکسپورت پیش‌فرض استفاده می‌کنیم، در غیر این صورت از اکسپورت نامدار بهره می‌گیریم. امکان استفاده ترکیبی از اکسپورت پیش‌فرض و اکسپورت نامدار نیز در یک فایل منفرد وجود دارد.
اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:
- مجموعه آموزش‌های برنامهنویسی
- آموزش JavaScript ES6 (جاوااسکریپت)
- مجموعه آموزش‌های JavaScript (جاوا اسکریپت)
- حذف موارد تکراری از آرایه های جاوا اسکریپت (ES6) — به زبان ساده
- آشنایی با دوازده قابلیت ES10 با دوازده مثال — راهنمای کاربردی
==
