الوحدات في JavaScript
تشرح هذه المقالة الوحدات في JavaScript۔
YouTube Video
الوحدات في JavaScript
الوحدات في JavaScript هي طريقة لتنظيم التعليمات البرمجية وتقسيمها إلى مكونات قابلة لإعادة الاستخدام۔ عند استخدام الوحدات، يتم تحسين قابلية قراءة وصيانة التعليمات البرمجية، ويمكن إعادة استخدام نفس الوظيفة في مشاريع أخرى۔ هنا نشرح أنظمة الوحدات المختلفة، بدءًا من مفهوم الوحدات إلى أمثلة استخدام محددة۔
مفهوم الوحدات في JavaScript
لم يكن JavaScript يحتوي في الأصل على نظام وحدات۔ ومع ذلك، مع زيادة حجم التطبيقات، أصبحت الوحدات مهمة لتقسيم التعليمات البرمجية إلى وحدات أصغر لإعادة الاستخدام۔ الوحدة هي جزء من التعليمات البرمجية يحتوي على وظيفة محددة ويمكن إدارتها بشكل مستقل عن التعليمات البرمجية الأخرى، مما يسمح بتقسيمها إلى ملفات متعددة۔
الأنواع الرئيسية للوحدات
هناك عدة أنظمة للوحدات في JavaScript۔ أكثر الأنظمة شيوعًا هي وحدات ES (ESM) وCommonJS۔
-
وحدات ES هي نظام وحدات تم تقديمه في ECMAScript 2015 (ES6)، حيث يتم تعريف الوحدات باستخدام كلمتي
importوexport.۔ يتم استخدام هذا النظام على نطاق واسع سواءً على جانب العميل (المتصفحات) أو على جانب الخادم (Node.js)۔ -
CommonJS هو نظام وحدات يُستخدم بشكل أساسي في Node.js۔ تُعرّف الوحدات باستخدام
requireوmodule.exportsلاستيراد وتصدير الملفات۔
تفاصيل وحدات ES (ESM)
وحدات ES هي نظام الوحدات القياسي في JavaScript، مما يسمح بالتبادل السهل للوظائف بين الوحدات۔ في المتصفحات وNode.js، يتم استخدام هذا النظام لتعريف واستيراد الوحدات۔
export وimport
export هي كلمة مفتاحية لكشف الوظائف من وحدة إلى الخارج۔ import تُستخدم لتضمين الوظائف المحددة في وحدات أخرى۔
مثال: تصدير الوحدة
يمكن تصدير الوحدات في وحدات ES كالتالي:۔
1// math.mjs
2export function add(a, b) {
3 return a + b;
4}
5export function subtract(a, b) {
6 return a - b;
7}في وحدة math.mjs هذه، يتم تصدير الدالتين add و subtract.۔ يمكن استيراد هذه الدوال من وحدات أخرى۔
هنا، الامتداد .mjs هو امتداد ملف يوضح بشكل صريح أن الملف هو ملف جافاسكريبت بصيغة وحدات ES.۔ في Node.js، يحدد امتداد الملف ما إذا كان CommonJS أو وحدات ES.۔ ومع ذلك، إذا تم تحديد type: "module" في ملف package.json، فسيتم التعامل مع الملفات ذات الامتداد .js على أنها وحدات ES بشكل افتراضي.۔
مثال: استيراد الوحدة
يمكن استيراد الوحدات في وحدات ES كالتالي:۔
1// main.mjs
2import { add, subtract } from './math.mjs';
3
4console.log(add(3, 5)); // 8
5console.log(subtract(10, 7)); // 3
بهذه الطريقة، باستخدام import، يمكنك بسهولة استخدام الدوال المعرفة في ملفات أخرى۔
التصدير الافتراضي والتصدير المسمي
هناك طريقتان لتصدير الوحدات۔ إحداهما هي التصدير المسمي، والأخرى هي التصدير الافتراضي۔
- يُستخدم التصدير المسمي عند تصدير عدة دوال أو متغيرات من الوحدة۔ يمكنك القيام بتصديرات متعددة، وعند الاستيراد تستلمها بالأسماء التي تحددها۔
1// utils.mjs
2export function sum(a, b) {
3 return a + b;
4}
5export function multiply(a, b) {
6 return a * b;
7}1// main.mjs
2import { sum, multiply } from './utils.mjs';
3
4console.log(sum(4, 6)); // 10
5console.log(multiply(3, 5)); // 15
- يُستخدم التصدير الافتراضي عند تصدير دالة واحدة أو صنف واحد من الوحدة۔ أثناء الاستيراد، يمكن استلامه بأي اسم۔
1// greet.mjs
2export default function greet() {
3 return "Hello, World!";
4}1// main.mjs
2import greet from './greet.mjs';
3
4console.log(greet()); // "Hello, World!"
يمكن فقط القيام بتصدير افتراضي واحد، ولكن يمكن للتصدير المسمي تصدير عناصر متعددة في وقت واحد۔
مثال على الاستخدام من جانب العميل (المتصفح).
مثال: تصدير الوحدة
يمكن تصدير الوحدات في وحدات ES كالتالي:۔
1// utils.js
2export function sum(a, b) {
3 return a + b;
4}
5export function multiply(a, b) {
6 return a * b;
7}في وحدة utils.js هذه، يتم تصدير دالتي sum و multiply.۔
مثال: استيراد الوحدة
يمكن استيراد الوحدات من جانب العميل كما يلي:۔
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4 <meta charset="UTF-8">
5 <title>ES Modules Sample in HTML</title>
6</head>
7<body>
8 <h1>ES Modules Sample</h1>
9 <div id="result"></div>
10
11 <script type="module">
12 import { sum, multiply } from './utils.js';
13
14 const result = `
15 <p>sum(3, 5) = ${sum(3, 5)}</p>
16 <p>multiply(10, 7) = ${multiply(10, 7)}</p>
17 `;
18
19 document.getElementById('result').innerHTML = result;
20 console.log(sum(3, 5)); // 8
21 console.log(multiply(10, 7)); // 70
22 </script>
23</body>
24</html>- عن طريق تعيين الخاصية
typeلوسم<script>إلىmodule، يمكن استخدام بنية وحدات ES مثلimportوexportداخل HTML.۔ - تقوم عبارة
importبتحميل ملفutils.jsالخارجي وعرض النتيجة.۔
تفاصيل حول CommonJS
CommonJS هو نظام للوحدات يُستخدم بشكل رئيسي في Node.js۔ يتم تصدير الوحدات واستيرادها باستخدام module.exports و require۔
require و module.exports
في CommonJS، يتم استخدام module.exports لتصدير الوحدات۔ كذلك، يتم استخدام require للاستفادة من الوحدات الموجودة في ملفات أخرى۔
مثال: تصدير الوحدة
يمكن تصدير الوحدات في CommonJS كالتالي:۔
1// math.js
2module.exports = {
3 add: function(a, b) {
4 return a + b;
5 },
6 subtract: function(a, b) {
7 return a - b;
8 }
9};مثال: استيراد الوحدة
يمكن استيراد الوحدات في CommonJS كالتالي:۔
1// main.js
2const math = require('./math.js');
3
4console.log(math.add(4, 7)); // 11
5console.log(math.subtract(9, 2)); // 7
في Node.js، يتم استخدام CommonJS كنظام الوحدات الافتراضي، ولكن يتم دعم وحدات ES أيضًا۔
الاستيراد الديناميكي
في JavaScript، يمكن استيراد الوحدات ديناميكيًا باستخدام import()۔ تستخدم هذه الطريقة المعالجة غير المتزامنة لتحميل الوحدات عند الحاجة۔
يمكن إجراء عمليات الاستيراد الديناميكي كما يلي:۔
1async function loadModule() {
2 const math = await import('./math.js');
3 console.log(math.add(5, 3)); // 8
4}
5
6loadModule();الاستيراد الديناميكي هو طريقة لتحسين أداء التطبيقات۔ حيث يمكنك تحميل الوحدات عند الحاجة بدلاً من تحميلها جميعًا عند التحميل الأولي، فهذا يُحسن سرعة عرض الصفحة۔
مزايا الوحدات النمطية
-
إعادة استخدام الكود
- يمكن إعادة استخدام الكود المقسم إلى وحدات في مشاريع أخرى۔ من خلال إنشاء وحدات ذات وظائف مشتركة واستخدامها عبر تطبيقات متعددة، تتحسن كفاءة التطوير بشكل كبير.۔
-
تحسين قابلية الصيانة
- من خلال تقسيم الكود إلى وحدات، يصبح من الأسهل تعديل ميزات أو أجزاء محددة۔ إدارة الكود في وحدات صغيرة يجعل من السهل العثور على الأخطاء وإصلاحها.۔
-
تجنب تصادمات أسماء الفضاء
- تعريف العديد من المتغيرات والدوال في النطاق العام يمكن أن يؤدي إلى تصادم الأسماء، لكن تقسيم الكود إلى وحدات يمنع ذلك ويساعد في الحفاظ على قاعدة كود أنظف۔
-
إدارة التبعيات
- استخدام الوحدات يسمح لك بإدارة تبعيات التطبيق بشكل صريح۔ يصبح من الواضح أي وحدة تعتمد على وحدات أخرى، مما يجعل بنية الكود أسهل في الفهم.۔
الملخص
نظام الوحدات النمطية في JavaScript هو وسيلة قوية لتنظيم الكود وتقسيمه إلى مكونات قابلة لإعادة الاستخدام.۔ من خلال فهم الفروقات بين ES Modules و CommonJS واختيار النظام الأنسب للتطبيق بناءً على المشروع، يمكنك تحسين قراءية الكود وصيانته.۔ علاوة على ذلك، باستخدام الاستيرادات الديناميكية، يمكنك تحسين أداء التطبيق.۔
لنستفيد من نظام الوحدات لبناء تطبيقات JavaScript أكثر كفاءة وقابلة للتوسع.۔
يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔