การวิเคราะห์หลักการ: ขั้นตอนที่ 1: ใช้ DOM เพื่อสร้างแท็ก <script> หรือ <link> และแนบแอตทริบิวต์ เช่น ประเภท ขั้นตอนที่ 2: ใช้เมธอด appendChild เพื่อผูกแท็กกับแท็กอื่น ซึ่งโดยปกติจะอยู่ที่ <head > . แอปพลิเคชัน: 1. ปรับปรุงการใช้โค้ดซ้ำและลดจำนวนโค้ด 2. เพิ่มตัวควบคุมจาวาสคริปต์และเซสชันเพื่อเปลี่ยนสไตล์ของเพจแบบไดนามิก 3. เนื่องจากเพจโหลดไฟล์ตามลำดับจากบนลงล่างและอธิบายในขณะที่โหลด คุณสามารถเพิ่มตัวควบคุม JavaScript เพื่อควบคุมลำดับการโหลดไฟล์เพจได้ ตัวอย่างเช่น โหลดไฟล์เค้าโครง CSS ก่อน จากนั้นจึงแสดงไฟล์การตกแต่ง CSS พร้อมรูปภาพ แล้วโหลดไฟล์ falsh ขนาดใหญ่ หรือโหลดตามความสำคัญของเนื้อหา เคล็ดลับการอ่าน: ผู้เริ่มต้นที่ไม่เก่งการเขียนอิเล็กทรอนิกส์สามารถอ่านภาษาจีนได้โดยตรง จากนั้นจึงคัดลอกโค้ดและทดลองใช้ หากต้องการโหลดไฟล์ .js หรือ .css แบบไดนามิก โดยสรุป หมายถึงการใช้วิธี DOM เพื่อสร้างองค์ประกอบ "สคริปต์" หรือ "LINK" ใหม่ที่หรูหราก่อน กำหนดคุณลักษณะที่เหมาะสมให้กับไฟล์ และสุดท้าย ใช้ element.appendChild() เพื่อเพิ่มองค์ประกอบไปยังตำแหน่งที่ต้องการภายในแผนผังเอกสาร ฟังดูแปลกตากว่าที่เป็นจริงมาก นี่คือคำพูด: loadjscssfile("myscript.js", "js") //เบราว์เซอร์จะโหลดไฟล์แบบไดนามิกเมื่อเปิดเพจ ในกรณีนี้ เราสามารถเพิ่มตัวแปรอาเรย์ส่วนกลางใหม่และบันทึกชื่อของไฟล์ที่ถูกผูกไว้ในนั้น ก่อนการโยงแต่ละครั้ง ให้ตรวจสอบว่ามีอยู่แล้วหรือไม่ ถ้ามีอยู่แล้ว ผูกมัน นี่คือคำพูด: นี่คือคำพูด: ตกลง ดำเนินการต่อ บางครั้งสถานการณ์อาจทำให้คุณต้องลบหรือแทนที่ไฟล์ .js หรือ .css ที่เพิ่มเข้ามา มาดูกันว่าจะทำอย่างไรต่อไป
ฟังก์ชั่น loadjscssfile (ชื่อไฟล์, ประเภทไฟล์) {
if (filetype=="js"){ //กำหนดประเภทไฟล์
var fileref=document.createElement('script')//สร้างแท็ก
fileref.setAttribute("type","text/javascript")//กำหนดค่าของประเภทแอตทริบิวต์เป็น text/javascript
fileref.setAttribute("src", filename)//ที่อยู่ของไฟล์
-
else if (filetype=="css"){ //กำหนดประเภทไฟล์
var fileref=document.createElement("ลิงก์")
fileref.setAttribute("rel", "สไตล์ชีท")
fileref.setAttribute("ประเภท", "ข้อความ/css")
fileref.setAttribute("href", ชื่อไฟล์)
-
ถ้า (ประเภทของ fileref! = "ไม่ได้กำหนด")
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") สองครั้ง คุณจะพบกับองค์ประกอบ "script" ใหม่สองรายการซึ่งทั้งคู่ชี้ไปที่ไฟล์ Javascript เดียวกัน นี่เป็นปัญหาเฉพาะจากไฟล์ ประสิทธิภาพ ประเด็นสำคัญ เนื่องจากคุณจะเพิ่มองค์ประกอบที่ซ้ำซ้อนลงในเพจและใช้หน่วยความจำเบราว์เซอร์ที่ไม่จำเป็นในกระบวนการนี้ วิธีง่ายๆ ในการป้องกันไม่ให้มีการเพิ่มไฟล์เดียวกันมากกว่าหนึ่งครั้งคือการติดตามไฟล์ที่เพิ่มโดย loadjscssfile() และ โหลดไฟล์เฉพาะในกรณีที่เป็นไฟล์ใหม่:
var filesadded="" //บันทึกตัวแปรอาร์เรย์ที่มีชื่อไฟล์ที่ถูกผูกไว้
ฟังก์ชั่น checkloadjscssfile (ชื่อไฟล์, ประเภทไฟล์) {
if (filesadded.indexOf("["+filename+"]")==-1){//indexOf กำหนดว่ามีรายการในอาร์เรย์หรือไม่
loadjscssfile(ชื่อไฟล์, ประเภทไฟล์)
filesadded+="["+ชื่อไฟล์+"]" //เพิ่มชื่อไฟล์ลงใน filesadded
-
อื่น
alert("เพิ่มไฟล์แล้ว!")//แจ้งเตือนหากมีอยู่แล้ว
-
checkloadjscssfile("myscript.js", "js") //success.js
checkloadjscssfile("myscript.js", "js") // ไฟล์ซ้ำซ้อน ดังนั้นจึงไม่ได้เพิ่มไฟล์
ที่นี่ฉันแค่ตรวจจับอย่างหยาบ ๆ เพื่อดูว่าไฟล์ที่ตั้งค่าให้เพิ่มมีอยู่แล้วในรายการชื่อไฟล์ที่เพิ่มซึ่งจัดเก็บไว้ในไฟล์ตัวแปรที่เพิ่มไว้ก่อนที่จะตัดสินใจว่าจะดำเนินการต่อไปหรือไม่