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

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

CommonJS هو نظام الوحدات المصمم أصلاً لبيئات Node.js. ويؤكد على البساطة والتحميل المتزامن للوحدات.

وحدات تصدير/استيراد CommonJS

تستخدم الوحدات النمطية في CommonJS ملف Module.exports لتصدير القيم أو الكائنات أو الوظائف.

1. التصدير/الواردات الافتراضية

// logger.js
function log(message) {
    console.log(message);
}

module.exports = log; // Default export

// index.js
const log = require('./logger');

log('This is a log message.'); // Output: This is a log message.

2. الصادرات/الواردات المحددة

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

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

module.exports = { add, subtract }; // Named exports

// index.js
const { add, subtract } = require('./math');

console.log(add(5, 3)); // Output: 8
console.log(subtract(5, 3)); // Output: 2

وحدات ECMAScript (ESM)

ESM، الذي تم تقديمه في ES6 (ES2015)، هو نظام الوحدة القياسي لجافا سكريبت. وهو يدعم التحميل المتزامن وغير المتزامن للوحدات وهو مدعوم أصلاً في المتصفحات الحديثة وفي Node.js بتكوينات معينة.

وحدات التصدير ECMAScript

يستخدم ESM عبارات التصدير لتصدير القيم أو الكائنات أو الوظائف.

1. التصدير/الاستيراد الافتراضي

// utils.mjs (Note the .mjs extension for ESM)
function formatName(name) {
    return `Mr./Ms. ${name}`;
}

export default formatName;

// index.mjs
import formatName from './utils.mjs';

console.log(formatName('John')); // Output: Mr./Ms. John

2. الصادرات المسماة

// operations.mjs
export function multiply(a, b) {
    return a * b;
}

export function divide(a, b) {
    return a / b;
}

// index.mjs
import { multiply, divide } from './operations.mjs';

console.log(multiply(4, 2)); // Output: 8
console.log(divide(10, 2)); // Output: 5

3. أنماط التصدير المختلطة في وحدات ECMAScript

// mixedExports.mjs
function greet(name) {
    return `Hello, ${name}!`;
}

export default greet;

export function goodbye(name) {
    return `Goodbye, ${name}!`;
}

// index.mjs
import sayHello, { goodbye } from './mixedExports.mjs';

console.log(sayHello('Alice')); // Output: Hello, Alice!
console.log(goodbye('Bob')); // Output: Goodbye, Bob!

الاختلافات الرئيسية بين CommonJS وESM

• بناء الجملة : يستخدم CommonJS require() وmodule.exports، بينما يستخدم ESM عبارات الاستيراد والتصدير.
• التحميل: يتم تحميل وحدات CommonJS بشكل متزامن، بينما يدعم ESM التحميل المتزامن وغير المتزامن.
• البيئة: يتم استخدام CommonJS بشكل أساسي في Node.js، بينما يتم دعم ESM أصلاً في المتصفحات ويمكن استخدامه في Node.js مع تكوينات محددة (--علامة الوحدات التجريبية أو امتداد الملف .mjs).

التوافق والاستخدام

• Node.js: يظل CommonJS سائدًا نظرًا لدعمه طويل الأمد وبساطته في بيئات Node.js.
• المتصفحات: تكتسب ESM شعبية حيث تدعمها المتصفحات بشكل متزايد محليًا، مما يوفر أداء أفضل وتحميل تعليمات برمجية معيارية.

خاتمة

يعتمد الاختيار بين وحدات CommonJS وECMAScript على بيئة مشروعك ومتطلباته. في حين أن CommonJS قوي لتطوير الواجهة الخلفية لـ Node.js، فإن ESM يوفر إمكانية التشغيل البيني عبر المتصفحات وتطبيقات Node.js الحديثة. إن فهم أنظمة الوحدات هذه يمكّن المطورين من الاستفادة من إمكانات JavaScript المعيارية بشكل فعال.

من خلال الاستفادة من CommonJS أو ESM، يمكن للمطورين تحسين تنظيم التعليمات البرمجية، وتحسين قابلية تطوير المشروع، وتسهيل التعاون في مشاريع JavaScript.