Memuat fungsi JS secara dinamis
Secara umum, ketika kita perlu memuat file JS, kita akan menggunakan tag skrip untuk mengimplementasikannya, mirip dengan kode berikut:
Salinan kode adalah sebagai berikut:
<script type = "text/javaScript" src = "example.js"> </script>
Namun, menggunakan tag skrip untuk memuat file JS secara langsung memiliki kelemahan berikut:
1. Urutan bacaan yang ketat. Karena browser membaca file JavaScript dalam urutan di mana <script> muncul di halaman web dan kemudian menjalankannya segera, ketika beberapa file bergantung pada satu sama lain, file dengan ketergantungan paling sedikit harus ditempatkan di depan, dan file dengan ketergantungan paling banyak harus ditempatkan pada akhir, jika tidak kode akan melaporkan kesalahan.
2. Masalah kinerja. Browser menggunakan "Mode Sinkron" untuk memuat tag <script>, yaitu, halaman akan "memblokir", menunggu file JavaScript dimuat, dan kemudian jalankan kode HTML berikutnya. Ketika beberapa tag <script> ada, browser tidak dapat membaca secara bersamaan. Satu harus dibaca sebelum membaca yang lain, menghasilkan ekstensi besar waktu membaca dan respons halaman lambat.
Pada saat ini, kami akan memikirkan JS yang secara dinamis. Metode implementasi memuat secara dinamis JS mirip dengan kode berikut
Salinan kode adalah sebagai berikut:
/*
*@desc: Tambahkan skrip secara dinamis
*@param SRC: Alamat file JS yang dimuat
*@Param Callback: Fungsi panggilan balik yang perlu dipanggil setelah file JS dimuat
*@demo:
addDynamicstyle ('http://webresource.c-ctrip.com/code/cquery/labjs/lab.js', function () {
alert ('lab.js di ctrip server loading selesai')
});
*/
fungsi addDynamicjs (src, callback) {
var skrip = document.createElement ("Script");
Script.setAttribute ("type", "Text/JavaScript");
script.src = src [i];
script.charset = 'GB2312';
document.body.appendChild (skrip);
if (callback! = tidak terdefinisi) {
script.onload = function () {
callback ();
}
}
}
Ini tidak akan menyebabkan penyumbatan halaman, tetapi akan menyebabkan masalah lain: file JavaScript yang dimuat dengan cara ini tidak ada dalam struktur DOM asli, sehingga fungsi callback yang ditentukan dalam acara DOM-READY (DOMContentLoad) dan acara Window.Onload tidak valid untuk itu.
Pada saat ini, kami akan berpikir untuk menggunakan beberapa pustaka fungsi eksternal untuk secara efektif mengelola masalah pemuatan JS.
Mari kita pergi ke topik utama dan berbicara tentang lab.js
Lab.js
Jika kami menggunakan metode tradisional untuk memuat JS, kode yang kami tulis umumnya akan memiliki gaya yang ditampilkan dalam kode berikut.
Salinan kode adalah sebagai berikut:
<skrip src = "aaa.js"> </script>
<skrip src = "bbb-a.js"> </script>
<skrip src = "bbb-b.js"> </script>
<type skrip = "Teks/JavaScript">
initaaa ();
initbbb ();
</script>
<skrip src = "ccc.js"> </script>
<type skrip = "Teks/JavaScript">
initccc ();
</script>
Jika kami menggunakan lab.js, untuk mengimplementasikan fungsi kode di atas, kami menggunakan metode berikut
Salinan kode adalah sebagai berikut:
<!-Muat Perpustakaan Lab.js First->
<skrip src = "http://webresource.c-ctrip.com/code/cquery/labjs/lab.js"> </script>
<type skrip = "Teks/JavaScript">
$ Lab
.script ("aaa.js"). tunggu () // metode .Wait () tanpa parameter berarti menjalankan file JavaScript yang baru saja dimuat segera
.script ("BBB-A.JS")
.script ("bbb-b.js") // muat aaa.js bbb-a.js bbb-b-b.js dan kemudian menjalankan initaaa initbbbbb
.wait (function () {// metode .wait () dengan parameter juga segera menjalankan file javascript yang dimuat sekarang, tetapi juga menjalankan fungsi yang ditentukan dalam parameter.
initaaa ();
initbbb ();
})
.script ("ccc.js") // muat ccc.js dan jalankan metode initccc setelah memuat ccc.js
.wait (function () {
initccc ();
});
</script>
Beberapa rantai $ lab dapat dijalankan pada saat yang sama, tetapi mereka benar -benar independen dan tidak ada hubungan pesanan. Jika Anda ingin memastikan bahwa file JavaScript berjalan setelah file lain, Anda hanya dapat menulisnya dalam operasi rantai yang sama. Hanya ketika skrip tertentu sama sekali tidak terkait, Anda harus mempertimbangkan untuk membelahnya menjadi rantai $ lab yang berbeda, menunjukkan bahwa tidak ada korelasi di antara mereka.
Contoh Penggunaan Umum
Salinan kode adalah sebagai berikut:
$ Lab
.script ("Script1.js") // Script1, Script2, dan Script3 tidak saling bergantung dan dapat dieksekusi dalam urutan apa pun
.script ("Script2.js")
.script ("Script3.js")
.wait (function () {
waspada ("Script 1-3 dimuat!");
})
.script ("script4.js") // Anda harus menunggu script1.js, script2.js, script3.js untuk dieksekusi sebelum eksekusi
.wait (function () {script4func ();});
Salinan kode adalah sebagai berikut:
$ Lab
.script ("Script.js")
.script ({src: "script1.js", ketik: "teks/javascript"})
.script (["Script1.js", "Script2.js", "Script3.js"])
.script (function () {
// dengan asumsi `_is_ie` yang ditentukan oleh halaman host sebagai benar di IE dan false di browser lain
if (_is_ie) {
kembali "IE.JS"; // Hanya jika di IE, skrip ini akan dimuat
}
kalau tidak {
kembali nol; // Jika tidak di IE, panggilan skrip ini akan secara efektif diabaikan
}
})
Lihat Lab.js Memuat Informasi di Konsol
Jika Anda ingin men -debug atau melihat setiap informasi pemuatan JS di konsol, Anda dapat menggunakan metode $ lab.setglobaldefaults. Untuk detailnya, silakan lihat contoh kode.
Salinan kode adalah sebagai berikut:
<!-Muat Lab Lab Lab.js Ctrip First dan unduh online->
<type script = "Text/JavaScript" src = "http://webresource.c-ctrip.com/code/cquery/labjs/lab.js" charset = "gb2312"> </script>
<type skrip = "Teks/JavaScript">
$ Lab.setglobaldefaults ({debug: true}) // buka debugging
$ Lab
// rantai eksekusi pertama
.script ('http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js')
.script ('http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js')
// rantai eksekusi kedua
.wait (function () {
//console.log(window.$)
//console.log(window._)
})
// rantai eksekusi ketiga
.script ('http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/boottrap.min.js')
.script ('http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js')
// rantai eksekusi keempat
.wait (function () {
// console.log (plugin1function)
// console.log (plugin2function)
})
// rantai eksekusi kelima
.script ('js/aaa.js')
.script ('js/bbb.js')
// rantai eksekusi keenam
.wait (function () {
// console.log (Module1Function)
// console.log (Module2Function)
})
</script>
Pada saat ini, buka konsol dan lihat informasi, seperti yang ditunjukkan pada gambar berikut:
Saya yakin Anda akan kagum dengan fungsi debugging lab.js saat Anda melihat ini. Faktanya, Lab.js memang cukup kuat, dan saya hanya memahami beberapa fitur sederhana. Tuliskan dulu dan bagikan dengan itu. Ini juga untuk kenyamanan diri Anda di masa depan.