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