Pengoptimuman Pengendalian DOM dalam JavaScript

Pengendalian DOM adalah operasi yang perlahan. Oleh itu, kita perlu meminimumkan pengambilan elemen, pembacaan dan penulisan data, terutamanya dalam gelung.

Mari kita lihat contoh. Katakan kita mempunyai input, di mana nombor dimasukkan:

html<input>

Mari kita semak, apabila input kehilangan fokus, sama ada nombor yang dimasukkan berada dalam julat yang ditetapkan:

javascriptlet input = document.querySelector('input');

input.addEventListener('blur', function() {
  if (+input.value > 0 && +input.value <= 10) {
    console.log('+++');
  } else {
    console.log('---');
  }
});

Masalahnya ialah kita membaca teks dari input dua kali, walaupun nombor di dalamnya tidak berubah. Ini sudah tentu tidak optimum. Mari kita optimumkan:

javascriptlet input = document.querySelector('input');

input.addEventListener('blur', function() {
  let num = +input.value;
  
  if (num > 0 && num <= 10) {
    console.log('+++');
  } else {
    console.log('---');
  }
});

Задание 1

Kod berikut menyemak nilai yang dimasukkan. Lakukan pengoptimuman:

html<input>

javascriptlet input = document.querySelector('input');

input.addEventListener('blur', function() {
  if (input.value === '1' || input.value === '2') {
    console.log('+++');
  } else {
    console.log('---');
  }
});

Задание 2

Kod berikut mencari jumlah integer dari satu hingga nombor yang dimasukkan ke dalam input. Lakukan pengoptimuman:

html<input>

javascriptlet input = document.querySelector('input');

input.addEventListener('blur', function() {
  let sum = 0;
  
  for (let i = 1; i <= +input.value; i++) {
    sum += i;
  }
  
  console.log(sum);
});

Задание 3

Kod berikut mencari jumlah pembahagi nombor yang dimasukkan ke dalam input. Lakukan pengoptimuman:

html<input>
<div></div>

javascriptlet input = document.querySelector('input');

input.addEventListener('blur', function() {
  let sum = 0;
  
  for (let i = 1; i <= +input.value; i++) {
    if (input.value % i === 0) {
      sum += i;
      
      let div = document.querySelector('div');
      div.textContent = sum;
    }
  }
});

Задание 4

Kod berikut memangkatkan nombor dari perenggan. Lakukan pengoptimuman:

html<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>

javascriptlet elems = document.querySelectorAll('p');

for (let elem of elems) {
  elem.textContent = elem.textContent * elem.textContent;
}

Задание 5

Kod berikut menyemak sama ada string yang dimasukkan ke dalam input mempunyai panjang dalam julat yang ditetapkan. Lakukan pengoptimuman:

html<input data-min="5" data-max="10">

javascriptlet inp = document.querySelector('input');

inp.addEventListener('blur', function() {
  if (inp.dataset.min > inp.value.length || inp.dataset.max < inp.value.length) {
    console.log('+++');
  } else {
    console.log('---');
  }
});