في هذا الدرس 5تصفّح المواضيع
في السكربتات التقليدية كانت جميع المتغيرات العليا الموزعة على عدة وسوم <script> تشترك في النطاق العام الواحد window، ما يسبب تصادم الأسماء وأخطاء ترتيب التحميل. حلت الوحدات القياسية (ES Modules — ESM) هذه المشكلة بمنح كل ملف نطاقاً خاصاً معزولاً؛ فتظل جميع المتغيرات والدوال خاصة بالملف ما لم تُصدَّر صراحةً بالكلمة export.
يمكن لملف الأدوات المساعدة تصدير عدة عناصر عبر التصدير المسمى سواء مباشرةً أمام التعريف (export const TAX = 0.15;) أو مجمّعة في نهاية الملف. ويستورد الملف المستهلك ما يحتاجه فقط بالاسم المطابق داخل قوسين معقوفين، مع إمكانية إعادة التسمية بالكلمة as مثل import { addTax as computeTotal } from "./pricing.js";.
// pricing.js:
// export const TAX_RATE = 0.15;
// export function addTax(n) { return n * (1 + TAX_RATE); }
import { TAX_RATE, addTax as withTax } from './pricing.js';
document.getElementById('esm-named').textContent =
`Rate: ${TAX_RATE * 100}% | Total: $${withTax(200)}`;عندما يركز الملف على مكون رئيسي واحد (مثل صنف Router أو دالة تنسيق رئيسية)، يمكنه تعريف تصدير افتراضي واحد كحد أقصى عبر export default، ويُستورد بدون أقواس معقوفة بأي اسم معبر يختاره المستورد.
| وجه المقارنة | التصدير المسمى (Named) | التصدير الافتراضي (Default) |
|---|---|---|
| العدد المسموح بالملف | عدد غير محدود من العناصر | تصدير افتراضي واحد فقط (1) |
| صيغة التصدير | export function parse() {} | export default class Router {} |
| صيغة الاستيراد | import { parse } from "./mod.js" | import Router from "./mod.js" |
| مطابقة الاسم | يجب مطابقة الاسم الأصلي أو as | يختار المستورد أي اسم محلي مباشرة |
لتفعيل نظام الوحدات في الصفحة، يُحمّل ملف البداية بالسمة <script type="module" src="./app.js"></script>. وتتميز وسوم type="module" بأربع خصائص تلقائية: تفعيل الوضع الصارم (Strict Mode) تلقائياً، وتأجيل التنفيذ حتى اكتمال بناء شجرة HTML مثل defer، وعزل متغيراتها عن الكائن العام window، وتوفير بيانات الوحدة عبر import.meta.url.
<div id="mod-info"></div>
<script type="module">
const apiToken = 'internal-only';
const leakedToWindow = ('apiToken' in window);
const hasMetaUrl = typeof import.meta.url === 'string';
document.getElementById('mod-info').textContent =
`Window leak: ${leakedToWindow} | meta: ${hasMetaUrl}`;
</script>تُكتب عبارات import الثابتة في أعلى الملف وتُحمَّل مسبقاً عند بدء التشغيل. أما عندما يضم تطبيقك ميزة ثقيلة كمحرك رسوم بيانية لا يفتحه إلا بعض الزوار، فيمكنك استدعاء التعبير الوظيفي import("./chart-engine.js") داخل مستمع نقرة الزر لتحميل الوحدة عند الطلب فقط وتسريع فتح الصفحة الأولي.
ونظراً لأن التحميل الديناميكي عبر الشبكة يتم بصورة غير متزامنة، ستتعلم ربطه عملياً خطوة بخطوة في الفصل السادس عشر المخصص للبرمجة غير المتزامنة.
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس عزل النطاقات عبر وحدات ES Modules، والتصدير والاستيراد المسمى وإعادة التسمية بـ as، والتصدير الافتراضي export default، وتشغيل الوحدات عبر <script type="module">، وفكرة التحميل عند الطلب عبر import(). الخطوة التالية: انتقل إلى الفصل الرابع عشر ودرس «الأنماط المتقدمة لتعريف الكائنات» لدراسة أنماط الإنشاء الأربعة والدمج والقواميس النقية والنسخ العميق.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 ES Module (ESM) الوحدة القياسية ES Module
- ملف JavaScript مستقل النطاق يعزل متغيراته داخلياً ويشارك ما يحدده المطور فقط عبر export وimport.
- للمراجعة
- 02 Named Export التصدير المسمى Named Export
- تصدير عنصر أو أكثر بأسمائها الصريحة بحيث تُستورد بنفس الأسماء داخل قوسين معقوفين.
- للمراجعة
- 03 Default Export التصدير الافتراضي export default
- المكون الرئيسي الأوحد المُصدَّر من الوحدة بالكلمتين export default ويُستورد بدون أقواس معقوفة.
- للمراجعة
- 04 Live Binding الربط الحي للقراءة فقط
- ارتباط حي للقراءة فقط يجعل المتغير المستورد يعكس أي تحديث تجريه الوحدة المصدرة على قيمته.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات2
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 ESM ESM
- ECMAScript Modules
- نظام الوحدات القياسي الرسمي المدمج أصيلاً في المتصفحات وبيئات تشغيل JavaScript الحديثة.
- للمراجعة
- 02 CORS CORS
- Cross-Origin Resource Sharing
- سياسة أمان مشاركة الموارد عبر الأصول التي يطبقها المتصفح عند جلب ملفات الوحدات الخارجية.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
بدّل بين تبويبات المحاكي الثلاثة لمقارنة صياغة الاستيراد المسمى والافتراضي واستيراد الكائن الشامل.
-
شغّل مثال الوسم script type="module" في محرر التجربة وتحقق من عدم تسرب متغير الوحدة إلى الكائن window.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.