| النوع | العدد لكل ملف | صيغة الاستيراد |
|---|---|---|
| Named Export | غير محدود | import { الاسم } from "..." |
| Default Export | واحد فقط | import اسم_اختياري from "..." |
الوحدات البرمجية (Modules) هي طريقة لتقسيم الكود إلى ملفات منفصلة، كل ملف مسؤول عن جزء محدد ومنطقي من التطبيق، ثم ربط هذه الملفات ببعضها عبر استيراد وتصدير محدد وصريح — بدل كتابة كل الكود في ملف ضخم واحد يصعب تنظيمه وصيانته وإعادة استخدامه.
كل ملف وحدة (Module) في نظام ES6 Modules له نطاقه الخاص المعزول تماماً — أي متغير أو دالة مُعرَّفة داخل ملف لا تكون متاحة تلقائياً لملف آخر، ما لم تُصدَّر صراحة عبر export، ثم تُستورد صراحة في الملف الآخر عبر import. هذا يمنع تلوث النطاق العام (Global Scope Pollution) الذي كان مشكلة حقيقية في المشاريع الكبيرة قبل ظهور نظام الوحدات الموحد.
يوجد نوعان من التصدير: التصدير المُسمَّى (Named Export) باستخدام export قبل تعريف متغير أو دالة أو فئة، ويمكن أن يوجد عدد غير محدود منه في نفس الملف، ويجب استيراده بنفس الاسم بالضبط بين أقواس معقوفة {}. والتصدير الافتراضي (Default Export) باستخدام export default، ويمكن أن يوجد واحد فقط كحد أقصى في كل ملف، ويمكن استيراده بأي اسم تختاره أنت عند الاستيراد دون أقواس معقوفة.
لاستخدام نظام ES6 Modules في المتصفح مباشرة، يجب إضافة type="module" على وسم script في HTML — وهذا يُغيّر أيضاً بعض السلوكيات الافتراضية، مثل أن الكود يعمل تلقائياً في الوضع الصارم (Strict Mode)، وأن الوحدات تُحمَّل بشكل مؤجل (Deferred) تلقائياً دون الحاجة لخاصية defer الصريحة. في مشاريع Node.js وأدوات البناء الحديثة (مثل Vite أو Webpack)، يعمل نفس نظام import/export دون الحاجة لأي إعداد إضافي في معظم الحالات.
| 1 | // ملف math.js |
| 2 | export const جمع = (أ, ب) => أ + ب; |
| 3 | export const طرح = (أ, ب) => أ - ب; |
| 4 | export default function ضرب(أ, ب) { |
| 5 | return أ * ب; |
| 6 | } |
| 7 | |
| 8 | // ملف app.js |
| 9 | import ضرب, { جمع, طرح } from "./math.js"; |
| 10 | console.log(جمع(2, 3), طرح(5, 2), ضرب(4, 3)); |
مثال 1: تصدير مُسمّى متعدد واستيراد بإعادة تسمية
| 1 | // utils.js — تصدير عدة عناصر مُسمّاة |
| 2 | export function تنسيق_العملة(رقم) { |
| 3 | return `${رقم.toFixed(2)} ريال`; |
| 4 | } |
| 5 | export function تنسيق_التاريخ(تاريخ) { |
| 6 | return تاريخ.toLocaleDateString("ar-EG"); |
| 7 | } |
| 8 | export const إصدار_التطبيق = "1.0.0"; |
| 9 | |
| 10 | // main.js — استيراد بأسماء مختلفة عبر as |
| 11 | import { تنسيق_العملة as عملة, إصدار_التطبيق } from "./utils.js"; |
| 12 | console.log(عملة(150)); // "150.00 ريال" |
| 13 | console.log(إصدار_التطبيق); |
مثال 2: التصدير الافتراضي واستيراده بأي اسم
| 1 | // user.js — تصدير افتراضي (واحد فقط لكل ملف) |
| 2 | export default class مستخدم { |
| 3 | constructor(اسم) { |
| 4 | this.اسم = اسم; |
| 5 | } |
| 6 | } |
| 7 | |
| 8 | // app.js — يمكن تسمية الاستيراد الافتراضي بأي اسم |
| 9 | import مستخدم_جديد from "./user.js"; // اسم مختلف تماماً، لا مشكلة |
| 10 | const ص = new مستخدم_جديد("خالد"); |
| 11 | console.log(ص.اسم); |
| 12 | |
| 13 | // في HTML: <script type="module" src="app.js"></script> |