Modules Import And Export

في JavaScript، Modules أو “الوحدات” هي طريقة لتنظيم الكود بطريقة تجعل كل ملف يحتوي على جزء مستقل من التطبيق. هذه التقنية تُسهل إعادة استخدام الكود، وتقسيم المشروع إلى أجزاء واضحة، وتجنب تداخل المتغيرات والدوال في النطاق العام (global scope).

✅ ما هو الـ Module في JavaScript؟

الـ Module هو ملف JavaScript مستقل يمكنه تصدير (export) متغيرات أو دوال أو كائنات، ويمكن استيراد (import) هذه الصادرات في ملف آخر لاستخدامها.

🧩 أنواع التصدير (Export)

1. Named Export (تصدير بالاسم)

يُستخدم لتصدير أكثر من عنصر من ملف واحد.

✅ مثال:

// math.js
export const PI = 3.14;

export function add(a, b) {
  return a + b;
}

export const subtract = (a, b) => a - b;

🟢 الاستيراد:

// main.js
import { PI, add, subtract } from './math.js';

console.log(add(2, 3)); // 5

✅ ملاحظة: يجب استخدام نفس الأسماء عند الاستيراد.

2. Default Export (تصدير افتراضي)

يُستخدم لتصدير قيمة واحدة رئيسية من الملف.

✅ مثال:

// greet.js
export default function greet(name) {
  return `Hello, ${name}!`;
}

🟢 الاستيراد:

// main.js
import greet from './greet.js';

console.log(greet("Ali")); // Hello, Ali!

✅ ملاحظة: عند الاستيراد لا تحتاج إلى أقواس {} ويمكنك اختيار الاسم الذي تريده.

3. Mixed Export (تصدير افتراضي + مسمى)

يمكنك استخدام default + named exports في نفس الملف:

// utils.js
export default function sayHi(name) {
  return `Hi, ${name}`;
}

export const version = "1.0.0";

// app.js
import sayHi, { version } from './utils.js';

console.log(sayHi("Sara"));  // Hi, Sara
console.log(version);        // 1.0.0

📦 كيف يتم استخدام Modules؟

1. باستخدام ملفات JavaScript القياسية (ES6 Modules):

✅ في HTML:

<script type="module" src="main.js"></script>

✅ يجب أن تستخدم type="module" لكي تعمل أوامر import/export.

2. قواعد مهمة:

• المسارات تبدأ بـ ./ أو ../ عند استيراد ملفات محلية.
• لا يمكنك استخدام import و export خارج الوضع module.
• لا يمكن استخدام import داخل if أو دالة (يجب أن تكون في المستوى الأعلى).

🧠 الميزات الأساسية للـ Modules:

📌 مقارنة بين Named و Default Export:

🛠️ Advanced Features (متقدمة)

✅ إعادة التصدير (Re-export):

// mathUtils.js
export * from './math.js'; // يعيد تصدير كل شيء من math.js

✅ التصدير باسم جديد:

// math.js
export { add as sum };

✅ الاستيراد باسم جديد:

import { sum as addition } from './math.js';

🧪 استخدام Modules في Node.js

منذ Node.js v12+ يمكنك استخدام ES Modules مباشرة عن طريق:

• تغيير الامتداد إلى .mjs، أو
• إضافة "type": "module" في package.json.

🎓 خلاصة