مقدمة لأنظمة الوحدات النمطية في JavaScript

مقدمة لأنظمة الوحدات النمطية في JavaScript

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





اجعل فيديو اليوم

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





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





نمط الوحدة

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

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



إليك الهيكل الأساسي لـ IIFE:

(function () { 
//code here
})();

(() => {
//code here
})();

(async () => {
//code here
})();

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





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

فمثلا:





const foo = (function () { 
const sayName = (name) => {
console.log(`Hey, my name is ${name}`);
};
//Exposing the variables
return {
callSayName: (name) => sayName(name),
};
})();
//Accessing exposed methods
foo.callSayName("Bar");

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

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

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

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

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

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

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

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

npm init -y 

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

كيف تبدأ الإصدار التجريبي المجاني على Spotify
//randomModule.js 
//installed package
const installedImport = require("package-name");
//local module
const localImport = require("/path-to-module");

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

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

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

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

فمثلا:

//main.js 
exports.myExport = function () {
console.log("This is an example of a named export");
};
exports.anotherExport = function () {
console.log("This is another example of a named export");
};

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

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

const myExport = function () { 
console.log("This is an example of a named export");
};
const anotherExport = function () {
console.log("This is another example of a named export");
};
module.exports = {
myExport,
anotherExport,
};

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

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

//wrong way 
exports = {
myExport,
anotherExport,
};

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

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

فمثلا:

//otherModule.js 
const foo = require("./main");
foo.myExport();
foo.anotherExport();

2. فك هيكل الصادرات من صادرات هدف.

فمثلا:

//otherModule.js 
const { myExport, anotherExport } = require("./main");
myExport();
anotherExport();

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

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

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

فمثلا:

//main.js 
class Foo {
bar() {
console.log("This is an example of a default export");
}
}
module.exports = Foo;

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

كيفية إخفاء معرف المتصل android

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

فمثلا:

//otherModule.js 
const Bar = require("./main");
const object = new Bar();
object.bar();

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

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

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

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

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

مثل ذلك:

//index.html 
<script src="./app.js" type="module"></script>

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

مثل ذلك:

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

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

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

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

فمثلا:

//main.js 
export const myExport = function () {
console.log("This is an example of a named export");
};
export const anotherExport = function () {
console.log("This is another example of a named export");
};

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

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

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

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

//otherModule.js 
import { myExport, anotherExport } from "./main.js";
myExport()
anotherExport()

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

import * as foo from './main.js' 
foo.myExport()
foo.anotherExport()

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

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

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

فمثلا:

//main.js 
class Foo {
bar() {
console.log("This is an example of a default export");
}
}
export default Foo;

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

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

فمثلا:

//otherModule.js 
import Bar from "./main.js";

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

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

فمثلا:

//main.js 
export const myExport = function () {
console.log("This is another example of a named export");
};
class Foo {
bar() {
console.log("This is an example of a default export");
}
}
export default Foo;

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

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