Bagaimana untuk meningkatkan kecekapan acara mengikat jquery

Dengan kerumitan halaman hadapan, rangka kerja JavaScript juga telah dibangunkan, antaranya jQuery merupakan salah satu rangka kerja yang paling popular. Apabila membangun dengan jQuery, pengikatan acara adalah tugas penting Ia membolehkan anda mengawal tingkah laku interaktif pada halaman dengan lebih baik, dan juga boleh meningkatkan pengalaman pengguna semasa melaksanakan interaksi yang kompleks. Walau bagaimanapun, pengikatan peristiwa yang salah boleh menyebabkan masalah prestasi dan menjejaskan kelajuan respons halaman. Oleh itu, dalam artikel ini, kami akan meneroka cara untuk meningkatkan kecekapan pengikatan acara jQuery dan menjadikan tapak web anda lebih lancar.

1. Gunakan delegasi acara

Delegasi acara ialah cara mengikat acara yang agak cekap Prinsipnya adalah untuk mengikat acara kepada elemen induk dan kemudian mempertaruhkannya melalui acara . Bubbles digunakan untuk bertindak balas kepada peristiwa unsur kanak-kanak, yang boleh mengurangkan bilangan pengikatan acara dan meningkatkan prestasi. Sebagai contoh, katakan kita mempunyai jadual dengan beberapa butang yang perlu diikat pada acara Kita boleh menggunakan kaedah berikut:

<table id="mytable">
  <tr>
    <td><button class="btn">按钮1</button></td>
    <td><button class="btn">按钮2</button></td>
    <td><button class="btn">按钮3</button></td>
  </tr>
  <tr>
    <td><button class="btn">按钮4</button></td>
    <td><button class="btn">按钮5</button></td>
    <td><button class="btn">按钮6</button></td>
  </tr>
</table>

$('#mytable').on('click', '.btn', function() {
  // 按钮的事件处理代码
});

Dalam contoh ini, kami menggunakan kaedah on() jQuery Untuk mengikat click. acara, nyatakan pemilih sub-elemen .btn yang mana peristiwa itu terikat dalam parameter kedua, supaya apabila butang diklik, acara itu akan dicetuskan.

2. Caching objek jQuery

Dalam proses mengikat peristiwa, pemilih jQuery sering digunakan untuk memilih elemen DOM. Walau bagaimanapun, enjin pemilih jQuery tidak menyimpan rujukan kepada elemen DOM Setiap pilihan perlu membina semula objek jQuery baharu, yang akan memberi kesan tertentu pada prestasi. Oleh itu, semasa proses pengikatan acara, adalah disyorkan untuk cache elemen DOM yang dipilih untuk mengelakkan pemilihan berulang. Sebagai contoh, kita boleh menulis seperti ini:

var $myButton = $('button#mybutton');
$myButton.on('click', function() {
  // 按钮的事件处理代码
});

Dalam contoh ini, kita cache objek butang pertanyaan menggunakan pembolehubah $myButton, dan kemudian menggunakan pembolehubah ini secara langsung untuk mengendalikan elemen semasa mengikat acara untuk mengelakkan Tetap isu prestasi pemilihan berulang.

3. Optimumkan pemilih

Dalam jQuery, pemilih ialah alat yang sangat berkuasa yang boleh memadankan elemen pada halaman dalam pelbagai cara. Walau bagaimanapun, kualiti pemilih juga merupakan salah satu faktor penting yang mempengaruhi kecekapan acara mengikat. Oleh itu, dalam aplikasi praktikal, kita perlu mengoptimumkan pemilih sebanyak mungkin.

Bagaimana untuk mengoptimumkan pemilih? Pertama sekali, anda perlu memberi perhatian kepada kerumitan pemilih dan cuba elakkan menggunakan pemilih yang terlalu kompleks, yang akan menjejaskan kelajuan memilih elemen. Kedua, anda perlu memilih pemilih yang sesuai mengikut senario aplikasi tertentu Bagi pemilih luas, adalah disyorkan untuk mengecilkan skop sebanyak mungkin untuk mempercepatkan pemilihan.

4. Acara menyahikat

Acara menyahikat ialah operasi biasa, tetapi jika digunakan secara salah, ia juga akan memberi kesan kepada prestasi. Dalam jQuery, terdapat dua cara untuk menyahikat peristiwa, satu ialah menggunakan kaedah off() dan satu lagi adalah menggunakan kaedah unbind(). Kesan kedua-dua kaedah ini adalah sama, tetapi terdapat beberapa perbezaan terperinci.

Jika anda menggunakan jQuery versi 1.7 ke atas, adalah disyorkan untuk menggunakan kaedah off(), kerana dalam versi baharu, kaedah off() boleh mengendalikan ruang nama acara dan pelbagai isu pengikatan dengan lebih baik, dan boleh menyahikat beberapa acara pada satu masa. Sebagai contoh, kita boleh menggunakannya seperti ini:

$myButton.off('click', '.btn1');

Jika anda menggunakan versi jQuery kurang daripada 1.7, adalah disyorkan untuk menggunakan kaedah unbind(), seperti yang ditunjukkan di bawah:

$myButton.unbind('click');

In aplikasi sebenar, anda perlu menggunakan Pilih kaedah unbundling yang sesuai mengikut situasi sebenar.

5. Kurangkan pelaksanaan berulang bagi respons acara

Kadangkala, kita perlu berulang kali mengikat acara yang sama pada elemen, contohnya, mengikat elemen <input> pada masa yang sama masa keyup dan change acara. Dalam kes ini, jika tidak dikendalikan, fungsi pemprosesan acara akan dilaksanakan berulang kali, menjejaskan prestasi. Dalam kes ini, anda boleh menggunakan kaedah debounce() untuk menyelesaikan masalah, yang menghalang peristiwa daripada dicetuskan berulang kali. Sebagai contoh, kod berikut boleh menjadikan pengendali acara melaksanakan paling banyak setiap 500 milisaat:

function handler() {
  // 处理函数
}

$('input').on('keyup change', $.debounce(500, handler));

Dalam contoh ini, kami menggunakan kaedah on() jQuery untuk mengikat acara keyup dan change, Kemudian Kaedah debounce() digunakan untuk menjadikan fungsi pemprosesan dilaksanakan paling banyak sekali setiap 500 milisaat, yang mengurangkan bilangan tindak balas acara dengan berkesan. Perlu diingat bahawa menggunakan kaedah debounce() akan meningkatkan kelewatan tertentu dan boleh menjejaskan pengalaman pengguna, jadi anda perlu memutuskan sama ada untuk menggunakannya berdasarkan keperluan khusus.

Ringkasnya, meningkatkan kecekapan pengikatan acara jQuery boleh bermula dari banyak aspek, termasuk menggunakan delegasi acara, caching objek jQuery, mengoptimumkan pemilih, acara tidak mengikat secara munasabah dan mengurangkan pelaksanaan berulang respons acara. Jika teknik ini boleh digunakan secara munasabah, kelajuan tindak balas halaman boleh dipertingkatkan dengan lebih baik dan pengalaman yang lebih baik boleh dibawa kepada pengguna.

Atas ialah kandungan terperinci Bagaimana untuk meningkatkan kecekapan acara mengikat jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!