الوحدة 11: الموديلات والـ Import/Export في JavaScript

إليك كورس كامل عن الوحدة 11: الموديلات والـ Import/Export في JavaScript، والتي تشرح كيفية استخدام الموديلات في JavaScript لتنظيم الكود وتنفيذه بشكل أكثر كفاءة باستخدام آلية الاستيراد والتصدير.

الوحدة 11: الموديلات والـ Import/Export في JavaScript

الدرس 1: مقدمة في الموديلات (Modules)

• المفهوم الأساسي: الموديلات في JavaScript هي ميزة تتيح لك تقسيم الكود إلى ملفات منفصلة، مما يسهل إدارة الكود وإعادة استخدامه. يُمكنك استخدام import و export لاستيراد وتصدير الأجزاء المختلفة من الكود بين الملفات.

1. لماذا نحتاج إلى الموديلات؟

• تنظيم الكود: يسمح لك الموديل بتقسيم الكود إلى ملفات أصغر وأكثر تخصصًا، مما يجعل الكود أكثر قابلية للفهم والصيانة.
• إعادة الاستخدام: يتيح لك الموديل إعادة استخدام الكود عبر تطبيقات متعددة دون تكرار.
• التحكم في النطاق: يساعد الموديل في التحكم في النطاقات المتاحة في كل ملف.

الدرس 2: إنشاء الموديلات (Modules)

• المفهوم: في JavaScript، يمكن إنشاء الموديل من خلال ملف JavaScript منفصل يحتوي على وظائف أو كائنات تريد مشاركتها مع ملفات أخرى.

1. تصدير الأجزاء من الموديل باستخدام export

• لتصدير قيمة أو دالة أو كائن من ملف JavaScript، نستخدم كلمة export.
  • تصدير دالة:
    javascript

    Copy code

    // file: math.js
export function add(a, b) {
return a + b;
}

  • تصدير قيمة ثابتة:
    javascript

    Copy code

    // file: config.js
export const API_URL = "https://api.example.com";

  • تصدير كائنات أو متغيرات متعددة:
    javascript

    Copy code

    // file: utils.js
    const multiply = (a, b) => a * b;
    const divide = (a, b) => a / b;

    export { multiply, divide };


2. تصدير الكائنات الافتراضية باستخدام export default

• إذا كنت تريد تصدير كائن واحد أو دالة كـ “تصدير افتراضي” (default export)، يمكنك استخدام export default.
  • تصدير دالة أو كائن افتراضي:
    javascript

    Copy code

    // file: calculator.js
export default function subtract(a, b) {
return a - b;
}


الدرس 3: استيراد الموديلات (Importing Modules)

• المفهوم: بعد تصدير الموديلات، يمكنك استيراد هذه الموديلات في ملفات JavaScript أخرى باستخدام كلمة import.

1. استيراد الموديلات باستخدام import

• استيراد دالة أو متغير واحد:
  javascript

  Copy code

  // file: main.js
import { add } from './math.js';
console.log(add(2, 3)); // 5

• استيراد جميع العناصر من الموديل:
  • إذا كان الموديل يحتوي على عدة تصديرات، يمكنك استيراد جميع العناصر باستخدام * as.
    javascript

    Copy code

    import * as utils from './utils.js';
console.log(utils.multiply(2, 3)); // 6
console.log(utils.divide(6, 3)); // 2

• استيراد التصدير الافتراضي:
  • إذا كان الموديل يحتوي على تصدير افتراضي، يمكنك استيراده بدون {}.
    javascript

    Copy code

    import subtract from './calculator.js';
console.log(subtract(5, 2)); // 3


الدرس 4: التصدير والاستيراد في نفس الملف

• المفهوم: يمكن تصدير واستيراد الكود من نفس الملف لتقليل التعقيد في بعض الحالات.

1. تصدير واستيراد معًا في نفس الملف

• إذا كنت ترغب في تصدير واستيراد كود من نفس الملف، يمكن أن يتم ذلك:
  javascript

  Copy code

  // file: math.js
  const multiply = (a, b) => a * b;
  export { multiply };

  import { multiply } from './math.js';
console.log(multiply(3, 4)); // 12


الدرس 5: كيفية استخدام الموديلات في المتصفحات

• المفهوم: بشكل افتراضي، الموديلات في JavaScript لا تعمل في المتصفحات القديمة، ولكن المتصفحات الحديثة تدعم الموديلات باستخدام type="module" في وسم <script>.

1. استخدام type="module" في HTML

• في HTML، يمكنك استيراد الموديلات باستخدام type="module".
  html

  Copy code

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


2. استيراد الموديلات في المتصفح

• باستخدام type="module", يمكنك استيراد الموديلات كما في مثال JavaScript:
  javascript

  Copy code

  // file: main.js
import { add } from './math.js';
console.log(add(10, 5)); // 15


الدرس 6: استخدام الموديلات في بيئات Node.js

• المفهوم: في بيئة Node.js، يتم دعم الموديلات باستخدام ملفات .mjs أو عن طريق إعدادات خاصة في ملف package.json.

1. استخدام الموديلات في Node.js باستخدام .mjs

• يمكن استخدام الموديلات في Node.js باستخدام امتداد .mjs.
  • تصدير الموديل في math.mjs:
    javascript

    Copy code

    // math.mjs
export function add(a, b) {
return a + b;
}

  • استيراد الموديل في main.mjs:
    javascript

    Copy code

    // main.mjs
import { add } from './math.mjs';
console.log(add(2, 3)); // 5


2. استخدام الموديلات في Node.js باستخدام package.json

• إذا كنت تستخدم ملفات .js، يجب أن تضيف "type": "module" إلى ملف package.json.
  json

  Copy code

  {
"type": "module"
}

• بعدها يمكنك استيراد الموديلات كما في JavaScript التقليدي:
  javascript

  Copy code

  import { add } from './math.js';


الدرس 7: أفضل الممارسات عند استخدام الموديلات

• تنظيم الكود: حاول تقسيم الكود إلى ملفات صغيرة تتعامل مع جزء معين من التطبيق.
• تسمية الموديلات بوضوح: استخدم أسماء ملفات معبرة للموديلات بحيث يكون من السهل معرفة وظيفتها.
• تجنب التصدير الافتراضي عندما يكون لديك أكثر من تصدير: استخدم التصدير المُسمى بدلاً من التصدير الافتراضي عندما يحتوي الموديل على عدة مكونات.

الدرس 8: تلخيص الوحدة

• الموديلات (Modules) في JavaScript تساعد في تنظيم الكود من خلال تقسيمه إلى أجزاء قابلة لإعادة الاستخدام.
• تصدير واستيراد: يمكن تصدير الدوال أو الكائنات أو القيم باستخدام export، واستيرادها باستخدام import.
• التصدير الافتراضي: يمكن تصدير قيمة واحدة باستخدام export default.
• التوافق: الموديلات مدعومة في المتصفحات الحديثة وNode.js باستخدام .mjs أو إعدادات package.json.

المشاريع العملية للوحدة 11:

• مشروع 1: بناء تطبيق مكون من عدة ملفات JavaScript يقوم بتصدير واستيراد الدوال لتنظيم الكود، مثل تطبيق حاسبة.
• مشروع 2: بناء تطبيق To-Do List يتضمن استخدام الموديلات لتخزين المهام والتفاعل معها.
• مشروع 3: إنشاء تطبيق لإدارة بيانات المستخدمين، حيث يتم تصدير واستيراد الموديلات التي تحتوي على بيانات المستخدم.