Bagaimana untuk menyelesaikan pengumpulan rendering jquery

Dalam pembangunan web, jQuery ialah salah satu perpustakaan JavaScript yang paling biasa digunakan Ia komited untuk menjadikan kod JavaScript lebih ringkas, mudah digunakan dan boleh diselenggara. Menggunakan jQuery, anda boleh mengendalikan tugas dengan mudah seperti operasi DOM, pengikatan acara, kesan animasi dan interaksi data Ajax. Walau bagaimanapun, dalam pembangunan sebenar, kadangkala kami menghadapi keperluan untuk menjana secara dinamik, memberikan data dan melaksanakan pengumpulan dalam halaman. Artikel ini akan memberi tumpuan kepada cara menggunakan jQuery untuk menyelesaikan masalah pengumpulan rendering.

Penerangan Masalah

Andaikan kita mempunyai senarai yang perlu dipaparkan secara dinamik, di mana setiap item akan mempunyai nombor, dan nombor ini perlu terus terkumpul. Jika kami hanya menggunakan JavaScript untuk melaksanakannya, kami akan menghadapi kelemahan: setiap kali data dikemas kini, keseluruhan senarai perlu dipaparkan semula, menjadikan kesan visual halaman tidak cukup lancar dan pengalaman pengguna kurang baik.

Kod sampel adalah seperti berikut:

 
1
 
2
 
3
 

let data = [1, 2, 3]; function render() { let list = $('#list'); list.empty(); for (let i = 0; i < data.length; i++) { let num = data[i]; let li = $('
'); li.text(num); list.append(li); } } function update() { for (let i = 0; i < data.length; i++) { data[i]++; } render(); } setInterval(update, 1000);

Dalam kod sampel ini, kami mentakrifkan data senaraidata, di mana setiap elemen mewakili nombor yang perlu dipaparkan. Fungsirender()akan menjana kod HTML yang sepadan berdasarkan datadatadan memasukkannya ke dalam halaman. Fungsiupdate()mengemas kini data pada selang waktu tertentu dan memaparkan semula keseluruhan senarai. Walaupun kod ini mudah untuk dilaksanakan, setiap kemas kini memerlukan pemaparan semula keseluruhan senarai, yang akan menyebabkan kehilangan prestasi yang besar.

Penyelesaian

Untuk menyelesaikan masalah di atas, kita perlu mencari cara untuk menghasilkan kod HTML baharu dengan cekap dan memasukkannya ke dalam halaman selepas setiap kemas kini data tanpa menjejaskan bahagian lain. Terdapat dua kaedah yang biasa digunakan dalam jQuery:

Kaedah 1: Ubah suai elemen DOM

Idea asas kaedah ini adalah untuk merekodkan kedudukan yang sepadan dengan setiap nombor pada elemen dan indeks DOM ia Kemas kini dibuat tanpa memaparkan semula keseluruhan senarai.

Kod sampel adalah seperti berikut:

 
1
 
2
 
3
 

let data = [1, 2, 3]; function render() { for (let i = 0; i < data.length; i++) { let num = data[i]; let li = $('#list li[data-index="' + i + '"]'); li.text(num); } } function update() { for (let i = 0; i < data.length; i++) { data[i]++; } render(); } setInterval(update, 1000);

Dalam kod sampel ini, kami menambah atributlipada setiap elemendata-indexuntuk merekodkan kedudukan yang sepadan dengan nombor. Dalam fungsirender(), kami mencari elemen yang sepadan berdasarkan atributdata-indexdan mengemas kini nombor yang dipaparkan.

Kaedah 2: Gunakan nod teks

Idea asas kaedah ini adalah menggunakan nod teks untuk mengemas kini nombor terus dan memasukkannya ke dalam elemen DOM, yang lebih cekap daripada mengendalikan DOM secara langsung elemen.

Kod sampel adalah seperti berikut:

let data = [1, 2, 3]; function render() { let list = $('#list'); list.empty(); for (let i = 0; i < data.length; i++) { let numNode = document.createTextNode(data[i]); let li = $('
'); li.append(numNode); list.append(li); } } function update() { for (let i = 0; i < data.length; i++) { data[i]++; } render(); } setInterval(update, 1000);

Dalam kod sampel ini, kita mula-mula mencipta elemenlikosong dan menggunakan kaedahdocument.createTextNode()untuk mencipta nod teks. Kemudian, kami menggunakan kaedahappend()jQuery untuk memasukkan nod teks ke dalam elemenli, dan akhirnya memasukkan elemenlike dalam halaman.

Ringkasan

Dalam artikel ini, kami memperkenalkan dua kaedah untuk menyelesaikan masalah pengumpulan rendering menggunakan jQuery. Menggunakan kaedah ini, anda boleh mengelakkan masalah kecekapan memaparkan semula keseluruhan senarai setiap kali data dikemas kini dan meningkatkan kelajuan tindak balas halaman dan pengalaman pengguna. Sudah tentu, dalam pembangunan khusus, kita perlu memilih kaedah yang paling sesuai untuk pelaksanaan berdasarkan situasi sebenar.

Atas ialah kandungan terperinci Bagaimana untuk menyelesaikan pengumpulan rendering jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!