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:

<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

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></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 senarai data, di mana setiap elemen mewakili nombor yang perlu dipaparkan. Fungsi render() akan menjana kod HTML yang sepadan berdasarkan data data dan memasukkannya ke dalam halaman. Fungsi update() 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:

<ul id="list">
    <li data-index="0">1</li>
    <li data-index="1">2</li>
    <li data-index="2">3</li>
</ul>

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 atribut li pada setiap elemen data-index untuk merekodkan kedudukan yang sepadan dengan nombor. Dalam fungsi render(), kami mencari elemen yang sepadan berdasarkan atribut data-index dan 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:

<ul id="list">
    <li></li>
    <li></li>
    <li></li>
</ul>

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></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 elemen li kosong dan menggunakan kaedah document.createTextNode() untuk mencipta nod teks. Kemudian, kami menggunakan kaedah append() jQuery untuk memasukkan nod teks ke dalam elemen li, dan akhirnya memasukkan elemen li ke 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!