وحدات JavaScript
تقسم الوحدات كود JavaScript بين ملفات. يعرّض export القيم، ويستخدمها import. السطر الظاهر في المثال هو lida / tea / mint.
التصدير المسمّى
يحافظ التصدير المسمّى على اسم واضح، ويمكن للوحدة تصدير عدة قيم.
export const drink = "tea";
export function label(name) {
return `${name} / ${drink} / mint`;
}
تتوفر drink وlabel للوحدات الأخرى لأنهما مصدّرتان، أما الباقي فيبقى داخل الملف.
استيراد القيم المسمّاة
يستخدم الاستيراد المسمّى الأقواس المعقوفة والأسماء نفسها.
import { drink, label } from "./math.js";
console.log(drink);
console.log(label("lida"));
يربط الاستيراد بالقيم المصدّرة ولا ينشئ تعريفاً مستقلاً. في المتصفح يجب تقديم الملفات عبر HTTP أو HTTPS.
التصدير الافتراضي
يمثل التصدير الافتراضي غالباً القيمة الرئيسية للوحدة. تختار اسمه المحلي عند الاستيراد من دون أقواس.
export default function greet(name) {
return `Hello, ${name}!`;
}
import greet from "./greeting.js";
console.log(greet("lida"));
يستخدم الاستيراد المسمّى { drink, label }، بينما يستخدم الافتراضي greet. لا يمكن للملف امتلاك تصدير افتراضي ثانٍ.
نطاق الوحدة والاستيراد الديناميكي
لا تصبح التصريحات العليا خصائص في window. يحمّل import() الوحدة لاحقاً ويعيد Promise.
const secret = "not global";
export const items = ["tea", "mint"];
import("./menu.js").then((menu) => console.log(menu.items.join(" / ")));
console.log(window.secret); // undefined
تعبر items وحدها حدود الوحدة. نتيجة الاستيراد الديناميكي كائن namespace، وتظهر القيم المصدّرة كخصائصه.
تجربة مستقلة في صفحة
ينشئ هذا المثال نص الوحدة في الذاكرة، ويصنع Blob URL ثم يستورده، من دون الاعتماد على ملفات مشروع.
<p id="result"></p>
<script type="module">
const source = `export const drink = "tea"; export function label(name) { return name + " / " + drink + " / mint"; }`;
const url = URL.createObjectURL(new Blob([source], { type: "text/javascript" }));
const module = await import(url);
document.querySelector("#result").textContent = module.label("lida");
URL.revokeObjectURL(url);
</script>
تعرض الصفحة تماماً lida / tea / mint. يفعّل type="module" صيغة الوحدات، ولا يحتاج Blob URL إلى ملف شبكي.
في المشروع الحقيقي استخدم math.js وapp.js و<script type="module" src="./app.js"></script>. لا تعتمد على file://؛ استخدم خادماً HTTP.
📊 اختيارات الوحدة
| الصيغة | الغرض | المثال |
|---|---|---|
| تصدير/استيراد مسمّى | مشاركة أسماء محددة | export const drink = "tea" / import { drink } ... |
| تصدير/استيراد افتراضي | مشاركة القيمة الرئيسية | export default function greet() / import greet ... |
| استيراد ديناميكي | التحميل لاحقاً واستلام Promise | import("./menu.js").then(...) |
| نطاق الوحدة | إبقاء التصريحات العليا خاصة | const secret = "not global" |
تمرين عملي
أنشئ math.js، واستورد drink وlabel في app.js، وأضف greet كتصدير افتراضي، ثم اعرض lida / tea / mint.
أخطاء شائعة
لا تحذف الأقواس المعقوفة من الاستيراد المسمّى، ولا تنشئ تصديرين افتراضيين، ولا تتوقع أن تصبح القيمة غير المصدّرة عامة.
الخلاصة
يختار export ما يخرج، ويستخدم import القيم، ويختار الاستيراد الافتراضي اسمه، ويحمي نطاق الوحدة التصريحات الخاصة.
اجعل كل وحدة مركّزة وحرّر Blob URL المؤقت بعد انتهاء التجربة.
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى