Analisis prinsip: Langkah 1: Gunakan DOM untuk membuat tag <script> atau <link>, dan lampirkan atribut ke dalamnya, seperti type. Langkah 2: Gunakan metode appendChild untuk mengikat tag ke tag lain, biasanya ke <head> . aplikasi: 1. Meningkatkan penggunaan kembali kode dan mengurangi jumlah kode; 2. Tambahkan pengontrol dan sesi javascript untuk mengubah gaya halaman secara dinamis; 3. Karena halaman memuat file secara berurutan dari atas ke bawah dan menjelaskannya saat memuat, Anda dapat menambahkan pengontrol JavaScript untuk mengontrol urutan pemuatan file halaman. Misalnya, memuat file tata letak CSS terlebih dahulu, lalu menampilkan file kecantikan CSS dengan gambar. Kemudian muat file palsu yang besar, atau muat sesuai dengan pentingnya konten. Tip membaca: Pemula yang tidak pandai menulis elektronik dapat membaca bahasa Mandarin secara langsung, lalu menyalin kodenya dan mencobanya. Singkatnya, untuk memuat file .js atau .css secara dinamis, ini berarti menggunakan metode DOM untuk terlebih dahulu membuat elemen "skrip" atau "LINK" baru yang megah, menetapkan atribut yang sesuai, dan terakhir, menggunakan elemen.appendChild() untuk menambahkan elemen ke lokasi yang diinginkan dalam pohon dokumen. Kedengarannya jauh lebih mewah daripada yang sebenarnya. Berikut kutipannya: loadjscssfile("myscript.js", "js") //Browser memuat file secara dinamis saat halaman dibuka. Dalam hal ini, kita dapat menambahkan variabel array global baru dan menyimpan nama file yang terikat di dalamnya. Sebelum setiap pengikatan, periksa apakah sudah ada , ikat itu. Berikut kutipannya: Berikut kutipannya: Oke, lanjutkan, terkadang situasinya mengharuskan Anda menghapus atau mengganti file .js atau .css yang ditambahkan. Mari kita lihat bagaimana hal itu dilakukan selanjutnya.
fungsi loadjscssfile(nama file, tipe file){
if (filetype=="js"){ //Tentukan jenis file
var fileref=document.createElement('script')//Buat tag
fileref.setAttribute("type","text/javascript")//Tentukan nilai tipe atribut sebagai teks/javascript
fileref.setAttribute("src", nama file)//Alamat file
}
else if (filetype=="css"){ //Tentukan jenis file
var fileref=document.createElement("tautan")
fileref.setAttribute("rel", "lembar gaya")
fileref.setAttribute("ketik", "teks/css")
fileref.setAttribute("href", nama file)
}
jika (typeof fileref!="tidak terdefinisi")
dokumen.getElementsByTagName("head")[0].appendChild(fileref)
}
loadjscssfile("javascript.php", "js") // Browser secara dinamis memuat "javascript.php" saat halaman dibuka.
loadjscssfile("mystyle.css", "css") //Browser memuat file .css secara dinamis saat halaman dibuka.
Tugas selanjutnya adalah mengikat tag <head>. Satu masalah saat mengikat adalah bahwa file yang sama mungkin terikat dua kali oleh kami. Tidak ada pengecualian jika browser terikat dua kali, tetapi efisiensinya akan rendah. untuk menghindari
dokumen.getElementsByTagName("head")[0].appendChild(fileref)
Dengan merujuk elemen HEAD halaman terlebih dahulu dan kemudian memanggil appendChild(), ini berarti elemen yang baru dibuat ditambahkan ke akhir tag HEAD. Selain itu, Anda harus menyadari bahwa tidak ada elemen yang dirugikan dalam penambahan tag HEAD elemen baru- artinya, jika Anda memanggil loadjscssfile("myscript.js", "js") dua kali, Anda sekarang akan mendapatkan dua elemen "skrip" baru yang keduanya menunjuk ke file Javascript yang sama. Ini hanya bermasalah dari sebuah efisiensi sudut pandang, karena Anda akan menambahkan elemen berlebihan ke halaman dan menggunakan memori browser yang tidak perlu dalam prosesnya. Cara sederhana untuk mencegah file yang sama ditambahkan lebih dari sekali adalah dengan melacak file yang ditambahkan oleh loadjscssfile(), dan hanya memuat file jika masih baru:
var filesadded="" //Simpan variabel array yang memiliki nama file terikat
fungsi checkloadjscssfile(nama file, tipe file){
if (filesadded.indexOf("["+filename+"]")==-1){//indexOf menentukan apakah ada item dalam array
loadjscssfile(nama file, tipe file)
filesadded+="["+namafile+"]" //Tambahkan nama file ke filesadded
}
kalau tidak
alert("file sudah ditambahkan!")//Prompt jika sudah ada
}
checkloadjscssfile("myscript.js", "js") //sukses
checkloadjscssfile("myscript.js", "js") //file berlebihan, jadi file tidak ditambahkan
Di sini saya hanya mendeteksi secara kasar untuk melihat apakah file yang akan ditambahkan sudah ada dalam daftar nama file yang ditambahkan yang disimpan dalam variabel filesadded sebelum memutuskan apakah akan melanjutkan atau tidak.