67- دروس جافا سكربت – JS Modules

## مقدمة إلى وحدات JavaScript (JS Modules)

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

### ما هي وحدات JavaScript؟

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

### فوائد استخدام وحدات JavaScript

1. **إعادة الاستخدام**: يمكنك استخدام نفس الوحدة في مشاريع متعددة دون الحاجة إلى تكرار الكود.
2. **الصيانة**: تسهل الوحدات عملية صيانة الكود، إذ يمكن تعديل وحدة واحدة دون التأثير على باقي أجزاء التطبيق.
3. **التنظيم**: تساعد في تنظيم الكود بشكل أفضل، مما يجعل من السهل على الفرق العمل على نفس المشروع بالتوازي.
4. **عزل النطاق**: توفر الوحدات نطاقاً خاصاً بها، مما يقلل من مخاطر تعارض الأسماء بين المتغيرات والوظائف.

### كيفية استخدام وحدات JavaScript

#### إنشاء وتصدير وحدة

لإنشاء وحدة في JavaScript، نقوم بكتابة الكود الذي نريد تصديره في ملف ونستخدم الكلمة المفتاحية `export`. إليك مثال على كيفية إنشاء وحدة تحتوي على دالة:

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

export const PI = 3.14159;

#### استيراد وحدة

لاستخدام الكود الموجود في وحدة أخرى، نستخدم الكلمة [شركة برمجة مصرية] المفتاحية `import` لاستيراد الدوال أو المتغيرات المطلوبة:

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

console.log(add(2, 3)); // Output: 5
console.log(PI); // Output: 3.14159

### أنواع التصدير في وحدات JavaScript

#### التصدير المسمى (Named Export)

يمكنك تصدير عدة دوال أو متغيرات باستخدام التصدير المسمى. في هذه الحالة، يجب عليك استخدام نفس الأسماء عند الاستيراد:

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

export function subtract(a, b) {
  return a - b;
}

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

يمكنك تصدير وحدة واحدة كافتراضية لكل ملف، وهذا يسهل استيرادها دون الحاجة إلى الأقواس المعقوفة:

// file: logger.js
export default function logMessage(message) {
  console.log(message);
}

ويمكن استيرادها كالتالي:

// main.js
import logMessage from './logger.js';

logMessage('Hello, World!');

### استخدام الوحدات في المتصفحات

بينما كانت الوحدات جزءًا من ES6، لم تكن جميع المتصفحات تدعمها بشكل كامل عند إصدارها لأول مرة. الآن، تدعم معظم المتصفحات الحديثة وحدات ES6. لاستخدام الوحدات في المتصفح، تأكد [شركة برمجة مصرية] من تعيين نوع النص البرمجي إلى `module`:

“`html

“`

### خاتمة

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