جافاسكربتالتعامل مع الموديول

مفهوم الموديول

إبتداءاً من الإصدار ES6 أصبح بالإمكان توزيع كود المشروع على عدة ملفات بدلاً من كتابته كله في ملف واحد.
الملف الذي يحتوي على الكود يسمى موديول ( Module ) و إمتداده يكون .js لأنه يحتوي على كود جافاسكربت فقط.

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

طريقة إنشاء موديول

إفتراضياً، الأشياء التي يتم وضعها في الموديول لا يمكن الوصول إليها لاحقاً ما لم يتم وضع الكلمة المفتاحية export قبلها.

الآن سنقوم بإنشاء ملف جافاسكربت إسمه messages.js و الذي سيمثل موديول خاص بالرسائل.
في هذا الموديول سنضع ما يلي:

• متغير إسمه domain يحتوي على إسم الموقع.
• دالة إسمها loginMessage() تقوم بإرجاع رسالة ترحيب.
• دالة إسمها logoutMessage() تقوم بإرجاع رسالة وداع.

export const domain = 'harmash.com';

export function loginMessage() {
    return 'Welcome to ' + domain;
}

export function logoutMessage() {
    return 'Have a nice day!';
}

طريقة تضمين محتوى الموديول

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

تحديد نوع السكربت

في حال كان سيتم تضمين الموديول في صفحة ويب بواسطة الوسم <script> فيجب أن يتم تحديد نوعه كموديول كما يلي.

<script type="module">
    // يفترض أن تضمن الموديول أولاً
    // و من ثم تستخدم منه ما تشاء
</script>

تضمين أشياء محددة من الموديول

لتضمين أشياء محددة في الموديول عليك مناداتها بإسمها.

في المثال التالي قمنا بتضمين المتغير domain و الدالة logoutMessage() من الموديول messages.js و من ثم قمنا باستخدامهما.

// messages.js هنا قمنا بتضمين كل محتوى الموديول
import { domain, logoutMessage } from 'messages.js';

// الموجود في الموديول domain قمنا بعرض قيمة المتغير p1 يساوي id في الوسم الذي يملك
document.querySelector('#p1').innerText = 'You are leaving ' + domain;

// الموجودة في الموديول logoutMessage() قمنا بعرض ما ترجعه الدالة p2 يساوي id في الوسم الذي يملك
document.querySelector('#p2').innerText = logoutMessage();

تضمين كل محتوى الموديول

لتضمين كل المحتوى المعد للتصدير في الموديول نستخدم رمز النجمة * يليه الكلمة المفتاحية as يليه أي إسم ليمثل الموديول.
من بعدها يمكن الوصول لما تحتويه الموديول عن طريق الإسم الذي تم وضعه بعد النجمة.

في المثال التالي قمنا بتضمين كل محتوى الموديول messages.js و من ثم قمنا باستدعاء الدوال الموجودة فيه.

// messages تحت إسم messages.js هنا قمنا بتضمين كل محتوى الموديول
import * as messages from 'messages.js';

// messages الموجودة في الموديول loginMessage() قمنا بعرض ما ترجعه الدالة p1 يساوي id في الوسم الذي يملك
document.querySelector('#p1').innerText = messages.loginMessage();

// messages الموجودة في الموديول logoutMessage() قمنا بعرض ما ترجعه الدالة p2 يساوي id في الوسم الذي يملك
document.querySelector('#p2').innerText = messages.logoutMessage();

تصدير قيمة إفتراضية من الموديول

يمكنك إضافة الكلمة المفتاحية default على شيء واحد من الأشياء الموجودة في الموديول سواء متغير أو دالة، و ذلك لإرجاع قيمته كقيمة إفتراضية منه.

فيما يلي قمنا ببناء موديول إسمه company.js فيه متغيرين هما name و description.
و في النهاية قمنا بتحديد أن قيمة المتغير name هي القيمة الإفتراضية في الموديول.

export const name = 'Harmash';
export const description = 'Best platform to learn programming for free.';

export default name; // هي القيمة الإفتراضية name هنا حددنا أن قيمة المتغير

الحصول على قيمة الموديول الإفتراضية

للحصول على القيمة الإفتراضية من الموديول يجب تمرير إسم بعد الكلمة import و قبل الرمزين { }.

في المثال التالي قمنا بتصدير القيمة الإفتراضية في الموديول company.js و تخزينها في متغير إسمه x و من بعدها قمنا أيضاً بتصدير المتغيرات name و description الموجودة فيه.
ملاحظة: هنا قيمة x ستكون هي نفسها قيمة المتغير الإفتراضي name و التي تساوي 'Harmash'.

// مع علمنا بأنه لا يوجد متغير فيه بهذا الإسم company.js من الموديول x هنا حاولنا تضمين متغير إسمه
import x, { name, description } from 'company.js';

// company الموجود في الموديول x قمنا بعرض قيمة المتغير p1 يساوي id في الوسم الذي يملك
document.querySelector('#p1').innerText = x;

// company الموجود في الموديول name قمنا بعرض قيمة المتغير p2 يساوي id في الوسم الذي يملك
document.querySelector('#p2').innerText = name;

// company الموجود في الموديول description قمنا بعرض قيمة المتغير p3 يساوي id في الوسم الذي يملك
document.querySelector('#p3').innerText = description;

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

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

في المثال التالي قمنا بتصدير المتغير name بإسم domainName من الموديول company.js.
بعدها قمنا بإنشاء متغير عادي إسمه name و لاحظ أن ذلك لم يسبب ذلك أي تعارض في الأسماء.

// domainName بإسم آخر و هو company.js من الموديول name هنا قمنا بتضمين قيمة المتغير
import { name as domainName } from '/tutorials/javascript/modules/company.js';

let name = 'Mhamad';

// name قمنا بعرض قيمة المتغير p1 يساوي id في الوسم الذي يملك
document.querySelector('#p1').innerText = 'name = ' + name;

// domainName قمنا بعرض قيمة المتغير p2 يساوي id في الوسم الذي يملك
document.querySelector('#p2').innerText = 'domainName = ' + domainName;