التحليل الأساسي: الخطوة 1: استخدم DOM لإنشاء علامات <script> أو <link> وإرفاق السمات بها، مثل النوع. الخطوة 2: استخدم طريقة appendChild لربط العلامة بعلامة أخرى، عادةً بـ <head> . طلب: 1. تحسين إعادة استخدام التعليمات البرمجية وتقليل كمية التعليمات البرمجية؛ 2. أضف وحدة تحكم وجلسة جافا سكريبت لتغيير نمط الصفحة ديناميكيًا؛ 3. بما أن الصفحة تقوم بتحميل الملفات بشكل تسلسلي من الأعلى إلى الأسفل وتشرحها أثناء التحميل، فيمكنك إضافة وحدة تحكم JavaScript للتحكم في ترتيب تحميل ملفات الصفحة، على سبيل المثال، قم بتحميل ملف تخطيط CSS أولاً، ثم قم بعرض ملف تجميل CSS مع الصور ثم قم بتحميل الملف الكاذب الكبير أو قم بتحميله حسب أهمية المحتوى. نصيحة للقراءة: يمكن للمبتدئين الذين لا يجيدون الكتابة الإلكترونية قراءة اللغة الصينية مباشرة، ثم نسخ الكود وتجربته. لتحميل ملف .js أو .css ديناميكيًا، باختصار، يعني ذلك استخدام أساليب DOM لإنشاء عنصر "برنامج نصي" أو "LINK" جديد فاخر أولاً، وتعيين السمات المناسبة له، وأخيرًا، استخدام element.appendChild() لإضافة العنصر إلى الموقع المطلوب داخل شجرة المستندات، يبدو الأمر أكثر روعة مما هو عليه بالفعل: هنا اقتباس: loadjscssfile("myscript.js", "js") // يقوم المتصفح بتحميل الملف ديناميكيًا عند فتح الصفحة. في هذه الحالة، يمكننا إضافة متغير صفيف عام جديد وحفظ اسم الملف المنضم فيه، قبل كل ربط، تحقق مما إذا كان موجودًا بالفعل، فسيظهر أنه موجود بالفعل ، ربطه. هنا اقتباس: هنا اقتباس: حسنًا، للمضي قدمًا، في بعض الأحيان قد يتطلب الموقف إزالة أو استبدال ملف .js أو .css المضاف، دعنا نرى كيف يتم ذلك بعد ذلك.
وظيفة تحميل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("javascript.php", "js") // يقوم المتصفح بتحميل "javascript.php" ديناميكيًا عند فتح الصفحة.
loadjscssfile("mystyle.css", "css") // يقوم المتصفح بتحميل ملف .css ديناميكيًا عند فتح الصفحة.
المهمة التالية هي الارتباط بالعلامة <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") // ملف زائد عن الحاجة، لذا لم تتم إضافة الملف
أنا هنا أقوم بالكشف بشكل تقريبي لمعرفة ما إذا كان الملف الذي تم تعيينه لإضافته موجود بالفعل ضمن قائمة أسماء الملفات المضافة المخزنة في ملفات متغيرة تمت إضافتها قبل اتخاذ قرار بالمتابعة أم لا.