JS / الموديول

الناشر :كودا فوكس -

التعامل مع الموديول

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

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

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

JS - الموديول

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

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

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

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


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

  • متغير إسمه domain يحتوي على إسم الموقع.
  • دالة إسمها loginMessage() تقوم بإرجاع رسالة ترحيب.
  • دالة إسمها logoutMessage() تقوم بإرجاع رسالة وداع.
messages.js
📋
export const domain = 'codafox.blogspot.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 و من ثم قمنا باستخدامهما.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
    <h1>Javascript Modules</h1>
    <p>In this example we import 2 things from the module messages.js</p>

    <p id="p1"></p>
    <p id="p2"></p>

    <script type="module">
        // messages.js هنا قمنا بتضمين كل محتوى الموديول
        import { domain, logoutMessage } from '/tutorials/javascript/modules/messages.js';

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

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

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

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

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

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
    <h1>Javascript Modules</h1>
    <p>In this example we import everything from the module messages.js</p>

    <p id="p1"></p>
    <p id="p2"></p>

    <script type="module">
        // messages تحت إسم messages.js هنا قمنا بتضمين كل محتوى الموديول
        import * as messages from '/tutorials/javascript/modules/messages.js';

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

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

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

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

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

company.js
📋
export const name = 'codafox.blogspot';
export const description = 'Best platform to learn programming for free.';

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

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

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

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

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
    <h1>Javascript Modules</h1>
    <p>In this example we import the default value with
	other variables exists inside the module company.js</p>

    <p id="p1"></p>
    <p id="p2"></p>	
    <p id="p3"></p>		

    <script type="module">
		// x بما فيها قيمته الإفترضية و التي وضعناها في المتغير company.js هنا قمنا بتضمين محتوى الموديول
		import x, { name, description } from '/tutorials/javascript/modules/company.js';

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

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

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

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

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

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

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
    <h1>Javascript Modules</h1>
    <p>In this example we add an alias name to the variable
        that is originally retrieved from the module company.js</p>

    <p id="p1"></p>
    <p id="p2"></p>

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

        let name = 'Ahmed';

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

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

إرسال تعليق

أحدث أقدم

نموذج الاتصال