Optimering van DOM-werk in JavaScript

Werk met die DOM is 'n stadige bewerking. Daarom moet dit tot die minimum beperk word om elemente te verkry, data te lees en te skryf, veral in 'n lus.

Kom ons kyk na 'n voorbeeld. Gestel ons het 'n invoerveld waarin 'n nommer ingevoer word:

<input>

Kom ons toets wanneer fokus verloor word, dat die ingevoerde nommer binne die gespesifiseerde reeks val:

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

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

Die probleem is dat ons twee keer die teks uit die invoerveld lees, hoewel die nommer daarin nie verander nie. Dit is, natuurlik, nie optimaal nie. Kom ons optimaliseer:

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

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

Die volgende kode toets die ingevoerde waarde. Voer optimalisering uit:

<input>

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

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

Die volgende kode soek die som van heelgetalle van een tot by die nommer wat in die invoerveld ingevoer is. Voer optimalisering uit:

<input>

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

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

Die volgende kode soek die som van delers van die nommer wat in die invoerveld ingevoer is. Voer optimalisering uit:

<input>
<div></div>

let 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;
		}
	}
});

Die volgende kode verhef die nommers uit die paragrawe tot die tweede mag. Voer optimalisering uit:

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

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

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

Die volgende kode toets dat 'n string van 'n lengte binne die gespesifiseerde reeks in die invoerveld ingevoer is. Voer optimalisering uit:

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

let 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('---');
	}
});