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

وحدات ES مقابل CommonJS

توجد أنظمة وحدات مختلفة في نظام JavaScript البيئي. وحدات ES (ESM) هي المعيار في مواصفات ECMAScript، وتستخدم بشكل أساسي في المتصفح ويتم دعمها بشكل متزايد في Node.js. CommonJS هو نظام وحدات آخر تم استخدامه تقليديًا في Node.js.

وحدات ES (ESM)

وحدات ES (ESM) هي نظام وحدات قياسي في JavaScript، تم تقديمه في ECMAScript 2015 (ES6). إنها تسمح بتنظيم أفضل للكود وإعادة استخدامه من خلال تمكين استيراد وتصدير الوظائف والكائنات والأوليات بين الملفات المختلفة. يتم دعم نظام الوحدة هذا على نطاق واسع في بيئات JavaScript الحديثة، بما في ذلك المتصفحات وNode.js.

التصدير والاستيراد

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

يسمح التصدير المسمى بتصدير عناصر متعددة من الوحدة النمطية. يجب استيراد كل عنصر بنفس الاسم الذي تم تصديره به.

//modules.js
const greet = () => {
   console.log('Hello World');
};
export { greet};

عند استيراد عمليات التصدير المسماة، يتعين عليك استخدام نفس أسماء عمليات التصدير.

import { greet } from './module.js';
greet(); // Hello, World!

يسمح التصدير الافتراضي بتصدير افتراضي واحد لكل وحدة. يمكن استيراد العنصر بأي اسم.

//modules.js
const greet = () => {
   console.log('Hello World');
};
export default greet;

عند استيراد التصدير الافتراضي، يمكنك استخدام أي اسم.

import message  from './module.js';
message(); // Hello, World!

استخدام الوحدات في HTML

عند استخدام الوحدات النمطية في المتصفح، يتعين عليك تضمينها في ملف HTML الخاص بك. يمكنك استخدام سمة type = "module" في علامة

دعم المتصفح

تدعم المتصفحات الحديثة وحدات JavaScript أصلاً. يتضمن ذلك Chrome وFirefox وSafari وEdge وOpera. ومع ذلك، فإن المتصفحات الأقدم مثل Internet Explorer لا تدعم الوحدات النمطية. بالنسبة لهؤلاء، قد تحتاج إلى استخدام أداة تجميع مثل Webpack أو أداة نقل مثل Babel.

استخدام الوحدات في Node.js
لاستخدام وحدات ES في Node.js، يمكنك استخدام امتداد الملف .mjs أو تعيين "type": "module" في ملف package.json.

// package.json
{
 "type": "module"
}

استيراد الأسماء المستعارة

تسمح لك الأسماء المستعارة في وحدات JavaScript باستيراد وتصدير الوظائف باستخدام أسماء مختلفة. يمكن أن يكون هذا مفيدًا لتجنب تعارض الأسماء أو لتوفير المزيد من الأسماء الوصفية في سياق الوحدة التي تستوردها.

// math.js
export function add(a, b) {
   return a   b;
}
 export function subtract(a, b) {
   return a - b;
}

يمكنك استيراد هذه الوظائف بأسماء مختلفة باستخدام الأسماء المستعارة:

// main.js
import { add as sum, subtract as diff } from './math.js';


console.log(sum(2, 3)); // 5
console.log(diff(5, 3)); // 2

استيراد الوحدة بأكملها كاسم مستعار

يمكنك استيراد الوحدة بأكملها كاسم مستعار واحد، مما يسمح لك بالوصول إلى جميع الصادرات ضمن مساحة الاسم.

// main.js
import * as math from './math.js';


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

الاستيراد الديناميكي

يمكنك أيضًا استيراد الوحدات ديناميكيًا باستخدام وظيفة الاستيراد () التي تُرجع وعدًا. وهذا مفيد لتقسيم التعليمات البرمجية والتحميل البطيء.

// main.js
const loadModule = async () => {
   try {
     const module = await import('./math.js');
     console.log(module.add(2, 3));
   } catch (error) {
     console.error('loading error:', error);
   }
 };


 loadModule();

في هذا المثال، يتم تحميل وحدة math.js ديناميكيًا عند استدعاء وظيفة LoadModule.

كومون جي إس (CJS)

CommonJS هو نظام وحدة يستخدم بشكل أساسي في Node.js. لقد كان نظام الوحدة الافتراضي قبل توحيد وحدات ES ولا يزال يستخدم على نطاق واسع في العديد من مشاريع Node.js. ويستخدم require() لاستيراد الوحدات النمطية وmodule.exports أو الصادرات لتصدير الوظائف من الوحدة النمطية.

في CommonJS، يتم استخدام كل من Module.exports وExports لتصدير القيم من الوحدة النمطية. Exports هو في الأساس اختصار لـ Module.exports، مما يسمح باستخدام أي منهما. ومع ذلك، يُنصح عادةً باستخدام Module.exports باستمرار لتجنب أي ارتباك محتمل أو سلوك غير متوقع.

في هذا المثال، تم تعيين وظيفة لـ Module.exports، وبالتالي فإن استدعاء require في app.js يعيد هذه الوظيفة.

// greet.js
module.exports = function(name) {
   return `Hello, ${name}!`;
};

// app.js
const greet = require('./greet');
console.log(greet('Alice')); // 'Hello, Alice!'

في هذا المثال، يتم استخدام الصادرات لإضافة خصائص إلى الوحدة النمطية.الصادرات. يؤدي استدعاء الطلب في app.js إلى إرجاع كائن بوظائف الإضافة والطرح.

// math.js
exports.add = function(a, b) {
   return a   b;
};
exports.subtract = function(a, b) {
   return a - b;
};

// app.js
const math = require('./math');
console.log(math.add(2, 3)); // 5
console.log(math.subtract(5, 2)); // 3

توفر وحدات JavaScript العديد من الفوائد التي تعمل على تحسين التنظيم وقابلية الصيانة وأداء التعليمات البرمجية.

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

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

• تقسيم الكود
  تعمل الوحدات على تمكين تقسيم التعليمات البرمجية، مما يسمح لك بتحميل التعليمات البرمجية الضرورية فقط عند الحاجة، مما يؤدي إلى تحسين أوقات التحميل الأولية والأداء العام.

• تحسين الاختبار
  يعد اختبار التعليمات البرمجية المعيارية أسهل لأنه يمكنك اختبار الوحدات الفردية بشكل منفصل. وهذا يؤدي إلى اختبارات أكثر موثوقية وقابلة للصيانة.

• اهتزاز الشجرة
  يمكن لمحزمات الوحدات الحديثة مثل Webpack وRollup إجراء هز الشجرة، وهي تقنية تزيل التعليمات البرمجية غير المستخدمة من الحزمة النهائية، مما يؤدي إلى تعليمات برمجية أصغر حجمًا وأكثر كفاءة.

خاتمة

في تطوير JavaScript، كان إدخال وحدات ES بمثابة تحول كبير عن نظام وحدة CommonJS التقليدي. توفر وحدات ES طريقة موحدة وفعالة لإدارة التبعيات وتحسين إمكانية الصيانة. يوفر بناء جملة التصدير والاستيراد طريقة واضحة وموجزة لتعريف الوحدات واستخدامها، مما يعزز التنظيم وسهولة القراءة في قاعدة التعليمات البرمجية.