كما هو مبين في العنوان، سنتطرق إن شاء الله هنا لمثال تطبيقي مبسط لـوحدات الجفا سكريبت. كنت في مشاركة سابقة قد أشرت أنه من الممكن تشغيل مشروع بلغة البرمجة الجافا سكريبت على خادم (server). في هذا المثال، سأقول ليس من الممكن تشغيل هذا المثال إلا من خلال خادم. نعم وحدات الجافا سكريبت،لا تعمل إلا من خلال خادم (إلى هذه اللحظة). سنستخدم في هذا المثال ثلاثة ملفات.الأول و هو الرئيسي سيكون بامتداد "test.php" كود HTML: <!doctype html> <html lang="ar" dir="rtl"> <head> <meta charset="utf-8"> <title>Module | جافا سكريبت</title> </head> <body> </body> </html> أما الثاني و الثالث سيكونا بامتداد "js." "parent.js" و "child.js" الملف الثاني و هو الفرعي "child" سيضم برمجية "code" تفيد بإنشاء دالة تقوم بإنشاء معرف وحيد عشوائـي، وتعود بقيمة "output". نقوم بتخزين هذه الدالة داخل متغير. و بذلك نكون في الواقع قد خزنا القيمة التي سيتم تصديرها "export" و هي المعرف الوحيد. كود HTML: 'use strict'; // تعريف دالة تقوم بإنشاء معرف وحيد،ثم تصديرها // (التعريف ضروري و التصدير إختياري) // الإرجاع يكون قيمة المعرف المنشأ export function generateID() { const time = Date.now(); const randomNumber = Math.floor(Math.random() * 1000000001); const uniqueId = time + "_" + randomNumber; return uniqueId; } // تصدير متغير يحتوي على القيمة التي تعود بها الدالة export const myID = generateID(); الملف الأول و هو الأصل "parent"، ستتم من خلاله عملية الجلب "import" سينم جلب المتغير الذي به الدالة، و الدالة في حد ذاتها، ثم عرض القيمة داخل عنصر "html" كود HTML: 'use strict'; /* في حالة تم تصدير الدالة */ // جلب المعطيات التي تم تصديرها من الملف المحدد import {generateID, myID} from './child.js'; // محدد HTML إظهار القيمة التي تم إرجاعها من الدالة على شكل متغير داخل عنصر document.getElementById('test').innerHTML = myID; // إختياري console.log(generateID); /* في حالة عدم تصدير الدالة import {myID} from './child.js'; // محدد HTML إظهار القيمة التي تم إرجاعها من الدالة على شكل متغير داخل عنصر document.getElementById('test').innerHTML = myID; */ لنفترض الآن أن لدينا خادم محلي منصب على جهازنا مسار الملفات ستكون كالآتي: كود: C:/xampp/htdocs/jsmodules/test.php C:/xampp/htdocs/jsmodules/parent.js C:/xampp/htdocs/jsmodules/child.js الـملـف الرئيسي "test.php" كامل كود HTML: <!doctype html> <html lang="ar" dir="rtl"> <head> <meta charset="utf-8"> <title>Module | جافا سكريبت</title> </head> <body> <center> <p style="margin:200px auto;font-size:18px;"> معرف وحيد تم إنشائه عشوائيا بالإعتماد على وحدات جافا سكريبت: <br> <!--أين ستظهر النتيجة HTML عنصر الـ --> <span id="test" style="color:#f70127"></span> </p> </center> <!-- إستدعاء ملفات الجفا سكريبت --> <script type="module" src="child.js"></script> <script type="module" src="parent.js"></script> </body> </html> كما لحظنا تم تعريف الملفين جافا سكريبت و الإعلان عن النوعية "type" بـ "module" و هذا الأمر ضروري. كود: <script type="module" src="child.js"></script> <script type="module" src="parent.js"></script> كل ما علينا الآن هو تشغيل الخادم، و الذهاب إلى العنوان كود: http://localhost/jsmodules/test.php الـنـتـيـجـة مــتــابــعــة طــيــبــة
