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

الوحدة النمطية هي ملف مستقل يقوم بتغليف التعليمات البرمجية لتنفيذ وظائف معينة وتعزيز قابلية إعادة الاستخدام والتنظيم.

ستغطي هنا أنظمة الوحدات المستخدمة في تطبيقات JavaScript ، بما في ذلك نمط الوحدة ونظام الوحدة النمطية CommonJS المستخدم في معظم تطبيقات Node.js ونظام الوحدة النمطية ES6.

نمط الوحدة

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

تم تنفيذ ذلك باستخدام تعبيرات الوظائف التي تم استدعاؤها فورًا ، والمعروفة باسم IIFEs. IIFE هي وظيفة غير قابلة لإعادة الاستخدام تعمل بمجرد إنشائها.

فيما يلي الهيكل الأساسي لـ IIFE:

(وظيفة () {
// كود هنا
})();
(() => {
// كود هنا
})();
(غير متزامن () => {
// كود هنا
})();

يصف مقطع التعليمات البرمجية أعلاه IIFEs المستخدمة في ثلاثة سياقات مختلفة.

تم استخدام IIFEs لأن المتغيرات المعلنة داخل دالة يتم تحديد نطاقها للدالة ، مما يجعلها فقط يمكن الوصول إليها داخل الوظيفة ، ولأن الوظائف تسمح لك بإرجاع البيانات (جعلها علنية يمكن الوصول).

instagram viewer

على سبيل المثال:

مقدار ثابت foo = (وظيفة () {
مقدار ثابت sayName = (الاسم) => {
وحدة التحكم.سجل(مرحباً ، اسمي $ {name}`);
 };
// كشف المتغيرات
يعود {
 callSayName: (الاسم) => sayName (الاسم) ،
 };
})();
// الوصول إلى الطرق المكشوفة
foo.callSayName ("حاجِز");

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

تحتوي كتلة التعليمات البرمجية أعلاه على IIFE. يحتوي IIFE على وظيفة يمكن الوصول إليها من خلال إعادتها. جميع المتغيرات المعلنة في IIFE محمية من النطاق العالمي. وهكذا ، فإن الطريقة (sayName) لا يمكن الوصول إليه إلا من خلال الوظيفة العامة ، callSayName.

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

نظام الوحدة النمطية CommonJS

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

يعمل نظام الوحدة النمطية CommonJS من خلال إجبار الوحدات النمطية على تصدير المتغيرات التي تريد عرضها بشكل صريح إلى وحدات نمطية أخرى.

تم إنشاء نظام الوحدة هذا لـ JavaScript من جانب الخادم (Node.js) وعلى هذا النحو ، لا يتم دعمه افتراضيًا في المتصفحات.

لتنفيذ وحدات CommonJS في مشروعك ، عليك أولاً تهيئة NPM في تطبيقك عن طريق تشغيل:

npm الحرف الأول

يمكن استيراد المتغيرات التي تم تصديرها وفقًا لنظام الوحدة النمطية CommonJS على النحو التالي:

//randomModule.js
// حزمة مثبتة
مقدار ثابت installImport = يتطلب("اسم الحزمة") ؛
// وحدة محلية
مقدار ثابت localImport = يتطلب("/path-to-module");

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

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

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

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

على سبيل المثال:

//main.js
الصادرات. myExport = وظيفة () {
وحدة التحكم.log ("هذا مثال ل أ اسمه يصدّر");
};
الصادرات.anotherExport = وظيفة () {
وحدة التحكم.log ("هذا مثال آخر ل أ اسمه يصدّر");
};

في مقطع التعليمات البرمجية أعلاه ، تقوم بتصدير وظيفتين مسماة (myExport و تصدير آخر) من خلال ربطها بـ صادرات هدف.

وبالمثل ، يمكنك تصدير الوظائف مثل:

مقدار ثابت myExport = وظيفة () {
وحدة التحكم.log ("هذا مثال ل أ اسمه يصدّر");
};
مقدار ثابت otherExport = وظيفة () {
وحدة التحكم.log ("هذا مثال آخر ل أ اسمه يصدّر");
};
وحدة.صادرات = {
 myExport ،
 تصدير آخر ،
};

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

سيظهر خطأ في التعليمات البرمجية الخاصة بك إذا حاولت القيام بذلك بهذه الطريقة:

//الطريق الخطأ
صادرات = {
 myExport ،
 تصدير آخر ،
};

هناك طريقتان يمكنك من خلالهما استيراد الصادرات المسماة:

1. قم باستيراد جميع عمليات التصدير ككائن واحد والوصول إليها بشكل منفصل باستخدام تدوين النقطة.

على سبيل المثال:

//otherModule.js
مقدار ثابت فو = يتطلب("./رئيسي")؛
فو.myExport();
فو.anotherExport();

2. قم بإلغاء هيكلة الصادرات من صادرات هدف.

على سبيل المثال:

//otherModule.js
مقدار ثابت {myExport، anotherExport} = يتطلب("./رئيسي")؛
myExport () ،
otherExport () ؛

هناك شيء واحد شائع في جميع طرق الاستيراد ، يجب استيرادها باستخدام نفس الأسماء التي تم تصديرها بها.

الصادرات الافتراضية

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

على سبيل المثال:

//main.js
فصلفو{
 حاجِز() {
وحدة التحكم.log ("هذا مثال ل أ تقصيريصدّر");
 }
}
وحدة.صادرات = فو ؛

في كتلة التعليمات البرمجية أعلاه ، تقوم بتصدير فئة (فو) عن طريق إعادة تعيين صادرات تعترض عليه.

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

على سبيل المثال:

//otherModule.js
مقدار ثابت شريط = يتطلب("./رئيسي")؛
مقدار ثابت كائن = جديد حاجِز()؛
هدف.حاجِز();

في كتلة التعليمات البرمجية أعلاه ، تم تسمية التصدير الافتراضي حاجِز، على الرغم من أنه يمكنك استخدام أي اسم من اختيارك.

نظام الوحدة النمطية ES6

نظام وحدة ECMAScript Harmony ، المعروف باسم وحدات ES6 ، هو نظام وحدة JavaScript الرسمي.

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

في المتصفحات ، عليك تحديد ملف يكتب مثل وحدة في علامة استيراد البرنامج النصي.

مثل ذلك:

//index.html
<النصي src ="./app.js" اكتب ="وحدة"></script>

في Node.js ، عليك ضبط يكتب ل وحدة في الخاص بك package.json ملف.

مثل ذلك:

//package.json
"يكتب":"وحدة"

يمكنك أيضًا تصدير المتغيرات باستخدام نظام الوحدة النمطية ES6 باستخدام إما عمليات تصدير مسماة أو عمليات تصدير افتراضية.

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

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

على سبيل المثال:

//main.js
يصدّرمقدار ثابت myExport = وظيفة () {
وحدة التحكم.log ("هذا مثال ل أ اسمه يصدّر");
};
يصدّرمقدار ثابت otherExport = وظيفة () {
وحدة التحكم.log ("هذا مثال آخر ل أ اسمه يصدّر");
};

في نظام الوحدة النمطية ES6 ، يتم تصدير الصادرات المسماة ببدء المتغير بامتداد يصدّر كلمة رئيسية.

يمكن استيراد الصادرات المسماة إلى وحدة نمطية أخرى في ES6 بنفس طرق CommonJS:

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

فيما يلي مثال على إعادة التنظيم:

//otherModule.js
يستورد {myExport، anotherExport} من "./main.js" ؛
myExport ()
تصدير آخر ()

فيما يلي مثال على استيراد الكائن بأكمله:

يستورد * مثل فو من "./main.js"
فو.myExport()
فو.anotherExport()

في كتلة التعليمات البرمجية أعلاه ، علامة النجمة (*) تعني "الكل". ال مثل الكلمة الأساسية يعين صادرات تعترض على السلسلة التي تليها ، في هذه الحالة ، فو.

الصادرات الافتراضية

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

على سبيل المثال:

//main.js
فصلفو{
 حاجِز() {
وحدة التحكم.log ("هذا مثال ل أ تقصيريصدّر");
 }
}
يصدّرتقصير فو

يتم إنشاء عمليات التصدير الافتراضية عن طريق إضافة ملف تقصير الكلمة الرئيسية بعد يصدّر الكلمة الأساسية ، متبوعة باسم التصدير.

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

على سبيل المثال:

//otherModule.js
يستورد حاجِز من "./main.js" ؛

الصادرات المختلطة

يسمح لك معيار الوحدة النمطية ES6 بالحصول على كل من عمليات التصدير الافتراضية والصادرات المسماة في وحدة واحدة ، على عكس CommonJS.

على سبيل المثال:

//main.js
يصدّرمقدار ثابت myExport = وظيفة () {
وحدة التحكم.log ("هذا مثال آخر ل أ اسمه يصدّر");
};
فصلفو{
 حاجِز() {
وحدة التحكم.log ("هذا مثال ل أ تقصيريصدّر");
 }
}
يصدّرتقصير فو

أهمية الوحدات

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