عند استخدام الوحدات (Modules) في JavaScript، يتم استخدام كلمتي "export" و "export default" لتصدير المتغيرات والدوال والكائنات من ملف إلى آخر. تختلف الاستخدامات والتأثيرات بين الـ "export" و "export default". دعنا نلقي نظرة على كلاهما ونوضح الفرق بينهما:
1. `export`:
- تستخدم لتصدير واحد أو أكثر من المتغيرات أو الدوال أو الكائنات.
- يتم تصدير العناصر المراد تصديرها باستخدام الـ "export" باشتقاق اسمها من اسم المتغير أو الدالة أو الكائن.
- يمكن استيراد العناصر المصدرة باستخدام "import" في ملف آخر، ويجب استخدام الأقواس المنحنية للإشارة إلى اسم العنصر المراد استيراده.
مثال:
// في ملف "module1.js"
export const name = "John";
export function sayHello() {
console.log("Hello!");
}
export default {
age: 25,
city: "New York"
}
// في ملف "module2.js"
import { name, sayHello } from "./module1.js";
import person from "./module1.js";
console.log(name); // يعرض "John"
sayHello(); // يعرض "Hello!"
console.log(person.age); // يعرض 25
console.log(person.city); // يعرض "New York"
2. `export default`:
- تستخدم لتصدير قيمة واحدة فقط من المتغير أو الدالة أو الكائن كافتراضية.
- يمكن تصدير العنصر المراد تصديره باستخدام "export default" دون الحاجة إلى تحديد اسمه.
- يمكن استيراد العنصر المصدر باستخدام "import" في ملف آخر، ويمكن تسميته في عملية الاستيراد على أنها "default".
مثال:
// في ملف "module1.js"
const name = "John";
function sayHello() {
console.log("Hello!");
}
export default {
age: 25,
city: "New York"
}
// في ملف "module2.js"
import person from "./module1.js";
console.log(person.age); // يعرض 25
console.log(person.city); // يعرض "New York"
تلخيص:
- استخدم `export` لتصدير عدة عناصر منفصلة واستخدم الأقواس المنحنية لاستيرادها.
- استخدم `export default` لتصدير قيمة واحدة كافتراضية واستخدم أي اسم عند استيرادها.
