از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
سرفصلهای مطلب
معرفی
اگر با جاوا اسکریپت کار کرده اید، احتمالاً با این اصطلاح برخورد کرده اید export default و تعجب کردم که چیست یا چگونه کار می کند. این بایت برای توسعه دهندگانی است که درک اولیه از جاوا اسکریپت دارند و به دنبال تعمیق دانش خود در مورد پیچیدگی های زبان هستند. ما نگاهی دقیق تر به ماژول های جاوا اسکریپت و مفهوم آن خواهیم داشت export default. در پایان، باید درک بهتری از نحوه و زمان استفاده داشته باشید export default در کد شما
آشنایی با ماژول های جاوا اسکریپت
ماژول‌های جاوا اسکریپت تکه‌هایی از کد هستند که می‌توانند به فایل‌های جاوا اسکریپت دیگر صادر و وارد شوند. آنها به سازماندهی کد کمک می کنند، آن را قابل نگهداری تر و قابل استفاده تر می کنند. ماژول های جاوا اسکریپت در ES6 معرفی شدند و از آن زمان به بخش اصلی توسعه جاوا اسکریپت مدرن تبدیل شده اند.
به مثال زیر توجه کنید:
// mathFunctions.js
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;
export { add, subtract };
در کد بالا یک ماژول به نام داریم mathFunctions.js که دو عملکرد را صادر می کند: add و subtract.
// app.js
import { add, subtract } from './mathFunctions.js';
console.log(add(2, 3)); // Output: 5
console.log(subtract(5, 2)); // Output: 3
که در app.js، ما وارد می کنیم add و subtract توابع از mathFunctions.js و در صورت نیاز از آنها استفاده کنید.
“صادرات پیش فرض” چیست؟
export default نحوی است که در ماژول‌های جاوا اسکریپت برای صادر کردن یک موجودیت واحد (چه تابع، شی یا متغیر) استفاده می‌شود. پیش فرض صادرات از یک ماژول
به مثال زیر توجه کنید:
// greeting.js
const greeting = 'Hello, rasanegar readers!';
export default greeting;
در کد بالا یک ماژول به نام داریم greeting.js که یک رشته را صادر می کند greeting به عنوان صادرات پیش فرض
// app.js
import greeting from './greeting.js';
console.log(greeting); // Output: Hello, rasanegar readers!
که در app.js، صادرات پیش فرض را از آن وارد می کنیم greeting.js و در صورت نیاز از آن استفاده کنید. توجه کنید که چگونه از بریس های فرفری استفاده نکردیم {} برای وارد کردن صادرات پیش فرض این هدف از default کلمه کلیدی.
این شبیه به نحوه استفاده شما است exports.greeting = ... در مقابل module.exports = ... در گره.
توجه داشته باشید: یک ماژول می‌تواند تنها یک صادرات پیش‌فرض داشته باشد، اما می‌تواند چندین صادرات با نام داشته باشد.
نحوه و زمان استفاده از «صادرات پیش‌فرض»
export default معمولاً زمانی استفاده می شود که یک ماژول فقط یک چیز برای صادرات داشته باشد. این می تواند یک تابع، یک کلاس، یک شی یا هر چیز دیگری باشد که می خواهید تمرکز اصلی ماژول باشد.
موردی را در نظر بگیرید که در آن ماژولی دارید که یک تابع را صادر می کند:
// sayHello.js
const sayHello = name => `Hello, ${name}!`;
export default sayHello;
و سپس آن را در ماژول دیگری وارد می کنید:
// app.js
import sayHello from './sayHello.js';
console.log(sayHello('rasanegar readers')); // Output: Hello, rasanegar readers!
در این مورد، استفاده از “صادرات پیش فرض” منطقی است زیرا sayHello تنها عملکردی است که sayHello.js ماژول را صادر می کند، بنابراین ما نمی خواهیم برای دسترسی به تابع از یک تخصیص ساختارشکنی استفاده کنیم.
به یاد داشته باشید، آیا استفاده کنید export default یا صادرات نامگذاری شده تا حد زیادی به نحوه ساختار کد خود بستگی دارد. هر دو کاربرد خود را دارند و درک زمان استفاده از هر کدام بخش مهمی از تسلط بر ماژول های جاوا اسکریپت است.
خطاهای رایج با «صادرات پیش‌فرض»
بنابراین برخی از دام ها/خطاهای رایجی که ممکن است با آن مواجه شوید چیست؟ در اینجا چند لحظه به بحث درباره برخی اشتباهات احتمالی خواهیم پرداخت. بسته به سطح تجربه شما با JS، ممکن است با یک یا چند مورد از مشکلات زیر مواجه شوید.
یکی از اشتباهات رایج تلاش برای استفاده است export default بیش از یک بار در همان ماژول. یاد آوردن، export default برای یک مقدار واحد، خواه تابع، یک شی یا یک متغیر باشد.
// Incorrect usage!
export default let name = "John";
export default let age = 25;
یکی دیگر از اشتباهات رایج استفاده از بریس های فرفری است {} با “صادرات پیش فرض”. این غیر ضروری است و منجر به خطاهای نحوی می شود.
// Incorrect usage!
import { myFunction } from './myModule.js';
توجه داشته باشید: دستور بالا برای صادرات نامگذاری شده استفاده می شود، نه صادرات پیش فرض.
رفع خطاهای «صادرات پیش‌فرض».
اکنون که برخی از دام های رایج را بررسی کردیم، بیایید در مورد چگونگی رفع آنها صحبت کنیم.
اگر می‌خواهید بیش از یک مقدار را با استفاده از یک ماژول صادر کنید export default، ترکیب آنها را در یک شی در نظر بگیرید.
// Correct usage
let name = "John";
let age = 25;
export default { name, age };
در مورد خطای دوم، این را به خاطر بسپارید export default به بریس های مجعد نیاز ندارد روش صحیح وارد کردن صادرات پیش فرض به شرح زیر است:
// Correct usage
import myFunction from './myModule.js';
صادرات به نام
در حالی که export default ابزار مناسبی است، تنها راه برای صادر کردن مقادیر از یک ماژول جاوا اسکریپت نیست. صادرات نامگذاری شده می‌تواند جایگزین خوبی باشد، به خصوص زمانی که می‌خواهید چندین مقدار را صادر کنید.
برخلاف صادرات پیش‌فرض، صادرات نامگذاری شده به شما امکان می‌دهد چندین مقدار را صادر کنید و هر یک از این صادرات را می‌توان با استفاده از {} نحو.
// Named exports
export const name = "John";
export const age = 25;
و آنها را می توان به این صورت وارد کرد:
// Importing named exports
import { name, age } from './myModule.js';
توجه داشته باشید: می توانید از هر دو استفاده کنید export default و صادرات را در همان ماژول نامگذاری کرد. با این حال، یک ماژول فقط می تواند یک ماژول داشته باشد default.
نتیجه
در این بایت، ما به این موضوع پرداختیم export default بیانیه در جاوا اسکریپت، برخی از خطاهای رایج را بررسی کرد و نحوه رفع آنها را آموخت. ما همچنین صادرات نامگذاری شده را مورد بحث قرار داده ایم، مفهومی مشابه و در عین حال متمایز. امیدواریم اکنون با درک بهتر، با مشکلات کمتری در صادرات/واردات در کد JS خود مواجه شوید.
منتشر شده در 1402-12-26 05:19:04
