JavaScript - الوحدات (Modules)

JavaScript - الوحدات (Modules)

🔸 JavaScript Modules تسمح لك بتقسيم الكود إلى ملفات متعددة، مما يُسهل إعادة الاستخدام والتنظيم. كل ملف يُعتبر وحدة (Module) مستقلة ويمكن استيراد وتصدير الوظائف والمتغيرات منه وإليه.

---

🔹 تصدير العناصر باستخدام export

// file: math.js

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

export const PI = 3.14;

📌 يمكنك تصدير دوال، ثوابت، أو كائنات من أي ملف باستخدام export.

---

🔹 استيراد العناصر باستخدام import

// file: app.js

import { add, PI } from "./math.js";

console.log(add(5, 3)); // 8
console.log(PI);        // 3.14

📌 يجب أن تحتوي الملفات على الامتداد .js وأن يتم فتحها من خادم أو بيئة تدعم ES Modules.

---

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

// file: greet.js

export default function greet(name) {
  console.log("Hello " + name);
}

// file: main.js

import greet from "./greet.js";
greet("Mahmoud");

📌 عند استخدام export default، يمكن اختيار أي اسم عند الاستيراد.

---

📌 خصائص مهمة للوحدات

• كل وحدة لها نطاق خاص بها (Scope).
• لا يمكن استخدام import و export داخل if أو function.
• يجب استخدام النوع type="module" في وسوم <script>.

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

---

⚠️ ملاحظات مهمة

• لا تعمل الوحدات مباشرة من الملفات المحلية (file://) في بعض المتصفحات — استخدم خادم محلي.
• يمكن استخدام الوحدات لتقسيم الكود في المشاريع الكبيرة.