❮
Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing
❯
الدرس التالي❯ ❮الدرس السابق

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

  • مفهوم الموديول
  • طريقة إنشاء موديول
  • طريقة تضمين محتوى الموديول
  • تصدير قيمة إفتراضية من الموديول
  • التصدير بأسماء مستعارة

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

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

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

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

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

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

إذاً الموديول يمكن أن يحتوي على أشياء يمكن تضمينها في الكود و أشياء لا يمكن.


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

  • متغير إسمه domain يحتوي على إسم الموقع.
  • دالة إسمها loginMessage() تقوم بإرجاع رسالة ترحيب.
  • دالة إسمها logoutMessage() تقوم بإرجاع رسالة وداع.
messages.js
export const domain = 'harmash.com';
export function loginMessage() {
return 'Welcome to ' + domain;
}
export function logoutMessage() {
return 'Have a nice day!';
}
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>
<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();
// 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();
// 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 هي القيمة الإفتراضية في الموديول.

company.js
export const name = 'Harmash';
export const description = 'Best platform to learn programming for free.';
export default name; // هي القيمة الإفتراضية 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;
// مع علمنا بأنه لا يوجد متغير فيه بهذا الإسم 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;
// 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;
جرب الكود
الدرس التالي❯ ❮الدرس السابق