التعامل مع الـ Modules في JavaScript

الدرس الرابع والعشرون: التعامل مع الـ Modules في JavaScript

في هذا الدرس، سنتعرف على كيفية التعامل مع الـ Modules في JavaScript، وهو أحد المفاهيم الأساسية في البرمجة الحديثة التي تسمح بتقسيم الكود إلى عدة ملفات بحيث يسهل إدارة وصيانة الكود في المشاريع الكبيرة. سنتناول كيفية استخدام import و export، بالإضافة إلى الفرق بين default export و named export.

1. استخدام import و export في JavaScript

في JavaScript، يمكن تقسيم الكود إلى Modules (وحدات) بحيث تحتوي كل وحدة على جزء من الكود، مثل دوال أو كائنات أو قيم ثابتة. لتبادل هذه الأجزاء بين الملفات، نستخدم export لتصدير الكود من ملف معين، و import لاستيراده في ملف آخر.

تصدير (Export)

يمكنك تصدير الكود من ملف باستخدام الكلمة المفتاحية export. هناك نوعان من التصدير: تصدير مدمج (named export) و تصدير افتراضي (default export).

التصدير المدمج (Named Export)

في التصدير المدمج، نقوم بتصدير العناصر باسمها داخل الملف، ويمكنك تصدير العديد من العناصر في نفس الوقت.

// file1.js
export const pi = 3.14;
export function add(x, y) {
  return x + y;
}
export class Person {
  constructor(name) {
    this.name = name;
  }
}

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

يمكنك تصدير عنصر واحد فقط كـ default export في الملف. هذه الطريقة تُستخدم عندما تريد تصدير عنصر رئيسي من الملف.

// file2.js
const multiply = (a, b) => a * b;
export default multiply;

استيراد (Import)

بعد تصدير الكود من ملف، يمكنك استيراده في ملف آخر باستخدام import.

استيراد باستخدام Named Import

إذا كنت تستخدم named exports، يمكنك استيراد العناصر باستخدام نفس الأسماء التي تم تصديرها بها.

// file3.js
import { pi, add, Person } from './file1.js';

console.log(pi);  // 3.14
console.log(add(2, 3));  // 5
const person = new Person("Ali");
console.log(person.name);  // "Ali"

استيراد باستخدام Default Import

إذا كنت تستخدم default export، يمكنك استيراد العنصر باستخدام أي اسم تريده.

// file4.js
import multiply from './file2.js';

console.log(multiply(2, 3));  // 6

2. كيفية تقسيم الكود إلى عدة ملفات

في JavaScript، يتم تقسيم الكود إلى ملفات متعددة باستخدام الوحدات (Modules) لتسهيل إدارة الكود، خصوصًا في المشاريع الكبيرة. تقسيم الكود يجعل الكود أكثر تنظيماً ويسهل إعادة استخدام الأجزاء المختلفة في أماكن أخرى من التطبيق.

مثال على تقسيم الكود:

// file1.js - يحتوي على دوال
export const greet = (name) => `Hello, ${name}!`;

// file2.js - يحتوي على كائنات
export class Car {
  constructor(model) {
    this.model = model;
  }
}

// main.js - استيراد واستخدام الوحدات
import { greet } from './file1.js';
import { Car } from './file2.js';

console.log(greet('Ahmed'));  // "Hello, Ahmed!"
const myCar = new Car('Tesla');
console.log(myCar.model);  // "Tesla"

3. استخدام default export و named export

default export

عند استخدام default export، يتم تصدير عنصر واحد من الملف كعنصر افتراضي، ويمكن استيراده باستخدام أي اسم.

مثال على default export:

// math.js
const subtract = (a, b) => a - b;
export default subtract;

// app.js
import subtract from './math.js';

console.log(subtract(10, 5));  // 5

named export

عند استخدام named export، يتم تصدير عدة عناصر في نفس الملف ويمكن استيرادها باستخدام أسمائها.

مثال على named export:

// utils.js
export function add(a, b) {
  return a + b;
}
export function multiply(a, b) {
  return a * b;
}

// app.js
import { add, multiply } from './utils.js';

console.log(add(5, 3));  // 8
console.log(multiply(5, 3));  // 15

4. الاختلاف بين default export و named export

• default export:
  • يمكنك تصدير عنصر واحد فقط كـ default من الملف.
  • يمكن استيراده باستخدام أي اسم تختاره.
  • يُستخدم عادة عندما يكون هناك عنصر واحد هو الأكثر أهمية في الملف.
• named export:
  • يمكن تصدير العديد من العناصر.
  • يجب استيراد العناصر باستخدام الأسماء نفسها التي تم تصديرها بها.
  • يُستخدم عندما يكون لديك أكثر من دالة أو متغير في الملف وتريد استيرادها بشكل منفصل.

5. الاستيراد المجمّع (Aggregated Imports)

يمكنك أيضًا استيراد كل شيء من ملف باستخدام *، وهو ما يسمى بالاستيراد المجمع.

// file1.js
export const a = 1;
export const b = 2;
export function sum(x, y) {
  return x + y;
}

// app.js
import * as math from './file1.js';

console.log(math.a);  // 1
console.log(math.b);  // 2
console.log(math.sum(2, 3));  // 5

الخلاصة

• Modules في JavaScript توفر طريقة منظمة لإدارة الكود في ملفات متعددة.
• export يسمح بتصدير أجزاء من الكود مثل الدوال أو الكائنات أو المتغيرات من ملف إلى آخر.
• import يسمح لك باستيراد الكود من الملفات الأخرى.
• يمكن استخدام default export لتصدير عنصر واحد، و named export لتصدير عدة عناصر من نفس الملف.
• تقسيم الكود إلى وحدات (Modules) يجعل الكود أكثر تنظيمًا وأسهل صيانة في المشاريع الكبيرة.

هذه التقنيات أصبحت أساسية في بناء تطبيقات JavaScript الحديثة، خاصة عند التعامل مع أطر عمل مثل React أو Node.js.