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