Nota tentang menggunakan Lab.js untuk kali pertama kemahiran

Nota tentang menggunakan Lab.js untuk kali pertama kemahiran_javascript

WBOY

Lepaskan： 2016-05-16 16:12:20

asal

1249 orang telah melayarinya

Pemuatan dinamik fungsi JS

Secara amnya, apabila kami perlu memuatkan fail js, kami akan menggunakan tag skrip, serupa dengan kod berikut:

Salin kod Kod adalah seperti berikut:

Walau bagaimanapun, secara langsung menggunakan tag skrip untuk memuatkan fail js akan mempunyai kelemahan berikut:

1. Perintah bacaan yang ketat. Memandangkan penyemak imbas membaca fail Javascript dalam susunan yang mana

2. Penyemak imbas menggunakan "mod segerak" untuk memuatkan teg yang bermaksud halaman akan "disekat", menunggu fail JavaScript dimuatkan sebelum menjalankan kod HTML berikutnya. Apabila terdapat berbilang teg penyemak imbas tidak boleh membacanya pada masa yang sama Ia mesti membaca satu sebelum membaca yang lain, yang menyebabkan masa membaca menjadi sangat panjang dan respons halaman menjadi perlahan.

Pada masa ini kita akan memikirkan memuatkan JS secara dinamik Kaedah pelaksanaan memuatkan JS secara dinamik adalah serupa dengan kod berikut

Salin kod Kod adalah seperti berikut:

/*

*@desc: Tambahkan skrip secara dinamik

*@param src: Alamat fail js yang dimuatkan 

*@param panggil balik: Fungsi panggil balik yang perlu dipanggil selepas fail js dimuatkan

*@demo:

addDynamicStyle('http://webresource.c-ctrip.com/code/cquery/LABjs/LAB.js', fungsi () {

alert('lab.js pada pelayan Ctrip dimuatkan')

});

*/

fungsi addDynamicJS(src, panggil balik) {

var script = document.createElement("skrip");

​ script.setAttribute("type", "text/javascript");

​ script.src = src[i];

Script.charset = 'gb2312';

Document.body.appendChild(skrip);

Jika (panggilan balik != tidak ditentukan) {

          script.onload = fungsi () {

             panggil balik();

}

}

}

Ini tidak akan menyebabkan penyekatan halaman, tetapi ia akan menyebabkan masalah lain: fail Javascript yang dimuatkan dengan cara ini tidak berada dalam struktur DOM asal, jadi fungsi panggil balik dinyatakan dalam acara DOM-ready (DOMContentLoaded) dan window.onload peristiwa Tidak mempunyai kesan ke atasnya.

Pada masa ini kami akan memikirkan untuk menggunakan beberapa perpustakaan fungsi luaran untuk menguruskan isu pemuatan JS dengan berkesan.

Mari kita ke intinya dan bercakap tentang LAB.js

LAB.js

Jika kita menggunakan kaedah tradisional untuk memuatkan js, kod yang ditulis secara amnya adalah seperti yang ditunjukkan dalam kod di bawah.

Salin kod Kod adalah seperti berikut:

Artikel terbaru oleh pengarang