قم بتحميل ملفات CSS وJS الخارجية ديناميكيًا باستخدام DOM لإنشاء علامات <script> أو <link> وإرفاق السمات بها، مثل النوع وما إلى ذلك. ثم استخدم طريقة appendChild لربط العلامة بعلامة أخرى، عادةً بـ <head>.
طلب:
1. تحسين إعادة استخدام التعليمات البرمجية وتقليل كمية التعليمات البرمجية؛
2. أضف وحدة تحكم وجلسة جافا سكريبت لتغيير نمط الصفحة ديناميكيًا؛
3. بما أن الصفحة تقوم بتحميل الملفات بشكل تسلسلي من الأعلى إلى الأسفل وتشرحها أثناء التحميل، فيمكنك إضافة وحدة تحكم JavaScript للتحكم في ترتيب تحميل ملفات الصفحة، على سبيل المثال، قم بتحميل ملف تخطيط CSS أولاً، ثم قم بعرض ملف تجميل CSS مع الصور ثم قم بتحميل الملف الكاذب الكبير أو قم بتحميله حسب أهمية المحتوى.
لتحميل ملف .js أو .css ديناميكيًا، باختصار، يعني ذلك استخدام أساليب DOM لإنشاء عنصر "برنامج نصي" أو "LINK" جديد فاخر أولاً، وتعيين السمات المناسبة له، وأخيرًا، استخدام element.appendChild() لإضافة العنصر إلى الموقع المطلوب داخل شجرة المستندات، يبدو الأمر أكثر روعة مما هو عليه بالفعل:
المهمة التالية هي الارتباط بالعلامة <head>. إحدى المشكلات عند الربط هي أنه قد يتم ربط الملف نفسه مرتين، ولن يكون هناك استثناء إذا تم ربط المتصفح مرتين، لكن الكفاءة ستكون منخفضة. لتجنب هذا الموقف، يمكننا إضافة متغير صفيف عام جديد وحفظ اسم الملف المنضم فيه، قبل كل ربط، تحقق مما إذا كان موجودًا بالفعل غير موجود، ربطه.
| document.getElementsByTagName("head")[0].appendChild(fileref) |
من خلال إحالة عنصر HEAD للصفحة أولاً ثم استدعاء appendChild()، فهذا يعني إضافة العنصر الذي تم إنشاؤه حديثًا إلى نهاية علامة HEAD علاوة على ذلك، يجب أن تدرك أنه لن يتضرر أي عنصر موجود عند إضافة العنصر عنصر جديد - وهذا يعني أنه إذا قمت باستدعاء ملفloadjscssfile("myscript.js", "js") مرتين، فسينتهي بك الأمر الآن بعنصرين "نصي" جديدين يشيران إلى نفس ملف Javascript. وهذا يمثل مشكلة فقط من ملف من وجهة نظر الكفاءة، حيث ستضيف عناصر زائدة عن الحاجة إلى الصفحة وتستخدم ذاكرة متصفح غير ضرورية في العملية. هناك طريقة بسيطة لمنع إضافة نفس الملف أكثر من مرة وهي تتبع الملفات التي تمت إضافتها بواسطةloadjscssfile(). وقم بتحميل الملف فقط إذا كان جديدًا:
| var filesadded = "" // احفظ متغير المصفوفة الذي يحتوي على أسماء ملفات مرتبطة وظيفة التحقق من تحميلjscssfile (اسم الملف، نوع الملف) { if (filesadded.indexOf("["+filename+"]")==-1){//indexOf يحدد ما إذا كان هناك عنصر في المصفوفة تحميلjscssfile (اسم الملف، نوع الملف) filesadded+="["+filename+"]" // أضف اسم الملف إلى filesadded } آخر تنبيه ("تمت إضافة الملف بالفعل!") // اسأل إذا كان موجودًا بالفعل } checkloadjscssfile("myscript.js", "js") //success checkloadjscssfile("myscript.js", "js") // ملف زائد عن الحاجة، لذا لم تتم إضافة الملف |
وظيفة تحميلjscssfile (اسم الملف، نوع الملف) { if (filetype=="js"){ //تحديد نوع الملف var fileref=document.createElement('script')//إنشاء علامة fileref.setAttribute ("type"، "text/javascript")// تحديد قيمة نوع السمة كنص/javascript fileref.setAttribute("src"، filename)// عنوان الملف } else if (filetype=="css"){ //تحديد نوع الملف var fileref=document.createElement("link") fileref.setAttribute("rel"، "ورقة الأنماط") fileref.setAttribute("type"، "text/css") fileref.setAttribute("href"، اسم الملف) } إذا (نوع الملف! = "غير محدد") document.getElementsByTagName("head")[0].appendChild(fileref) } loadjscssfile("myscript.js", "js") // يقوم المتصفح بتحميل الملف ديناميكيًا عند فتح الصفحة. loadjscssfile("javascript.php", "js") // يقوم المتصفح بتحميل "javascript.php" ديناميكيًا عند فتح الصفحة. loadjscssfile("mystyle.css", "css") // يقوم المتصفح بتحميل ملف .css ديناميكيًا عند فتح الصفحة. |