Dalam kode JavaScript, karena perbedaan perilaku antara browser, kami sering menyertakan sejumlah besar pernyataan IF dalam fungsi untuk memeriksa karakteristik browser dan memecahkan masalah kompatibilitas dari berbagai browser. Misalnya, fungsi kami yang paling umum untuk menambahkan acara ke simpul DOM:
Salinan kode adalah sebagai berikut:
Function AddEvent (Type, Element, Fun) {
if (element.addeventListener) {
element.addeventListener (tipe, menyenangkan, false);
}
lain if (element.attachevent) {
element.attachevent ('on' + type, fun);
}
kalau tidak{
elemen ['on' + type] = fun;
}
}
Setiap kali fungsi addEvent dipanggil, ia perlu memeriksa kemampuan yang didukung oleh browser. Pertama, periksa apakah metode AddEventListener didukung. Jika tidak didukung, periksa apakah metode attachEvent didukung. Jika tidak didukung, gunakan metode DOM Level 0 untuk menambahkan acara. Proses ini harus dilakukan setiap kali fungsi addEvent dipanggil. Bahkan, jika browser mendukung salah satu metode, itu akan selalu mendukungnya, dan tidak perlu mendeteksi cabang lain. Dengan kata lain, jika pernyataan tidak harus dieksekusi setiap saat, dan kode dapat berjalan lebih cepat.
Solusinya adalah teknik yang disebut Lazy Loading.
Yang disebut pemuatan malas berarti bahwa cabang jika fungsi hanya akan dieksekusi sekali, dan kemudian ketika fungsi dipanggil, ia akan secara langsung memasukkan kode cabang yang didukung. Ada dua cara untuk menerapkan pemuatan malas. Hal pertama adalah bahwa ketika fungsi dipanggil untuk pertama kalinya, fungsi itu sendiri akan diproses secara kuadratik. Fungsi akan ditimpa sebagai fungsi yang memenuhi kondisi cabang, sehingga panggilan ke fungsi asli tidak lagi harus melalui cabang yang dieksekusi. Kita dapat menggunakan pemuatan malas untuk menimpa addEvent () dengan cara berikut.
Salinan kode adalah sebagai berikut:
Function AddEvent (Type, Element, Fun) {
if (element.addeventListener) {
addevent = function (type, elemen, fun) {
element.addeventListener (tipe, menyenangkan, false);
}
}
lain if (element.attachevent) {
addevent = function (type, elemen, fun) {
element.attachevent ('on' + type, fun);
}
}
kalau tidak{
addevent = function (type, elemen, fun) {
elemen ['on' + type] = fun;
}
}
Return AddEvent (Type, Element, Fun);
}
Dalam addEvent yang dimuat malas ini, setiap cabang dari pernyataan IF akan memberikan nilai pada variabel addEvent, secara efektif menimpa fungsi asli. Langkah terakhir adalah memanggil fungsi penugasan baru. Lain kali Anda memanggil AddEvent (), fungsi yang baru ditetapkan akan dipanggil secara langsung, sehingga Anda tidak perlu lagi mengeksekusi jika pernyataan.
Cara kedua untuk mengimplementasikan pemuatan malas adalah dengan menentukan fungsi yang sesuai saat mendeklarasikan fungsi. Dengan cara ini, kinerja tidak akan hilang ketika fungsi disebut pertama kali, dan hanya sedikit kinerja yang akan hilang ketika kode dimuat. Berikut ini adalah ADDEVENT () yang ditulis ulang sesuai dengan ide ini.
Salinan kode adalah sebagai berikut:
var addevent = (function () {
if (document.addeventListener) {
fungsi pengembalian (type, elemen, fun) {
element.addeventListener (tipe, menyenangkan, false);
}
}
lain if (document.attachevent) {
fungsi pengembalian (type, elemen, fun) {
element.attachevent ('on' + type, fun);
}
}
kalau tidak {
fungsi pengembalian (type, elemen, fun) {
elemen ['on' + type] = fun;
}
}
}) ();
Trik yang digunakan dalam contoh ini adalah membuat fungsi pengukuhan diri anonim, dan menggunakan cabang yang berbeda untuk menentukan fungsi mana yang harus diimplementasikan. Logika sebenarnya adalah sama. Perbedaannya adalah bahwa ekspresi fungsi digunakan (fungsi didefinisikan oleh var) dan fungsi anonim ditambahkan. Selain itu, setiap cabang mengembalikan fungsi yang benar dan segera menetapkannya ke variabel addEvent.
Keuntungan dari fungsi pemuatan malas adalah bahwa jika cabang dieksekusi hanya sekali, menghindari fungsi yang dieksekusi jika cabang dan kode yang tidak perlu setiap kali dieksekusi, sehingga meningkatkan kinerja kode. Adapun metode mana yang lebih tepat, itu tergantung pada kebutuhan Anda.