JavaScript-de DOM bilen işlemegi optimizasiýa etmek

DOM bilen işlemek haýal amaldyr. Şonuň üçin elementleri almagy, maglumatlary okamagy we ýazmagy, esasanam aýlawda, iň aza indirmek gerek.

Geliň, bir mysal göreli. Bizde bir san girizilýän input bolsun:

<input>

Geliň, fokus ýitirilende, girizilen sanyň bellenen aralykda ýa-da däl-digini barlaýaly:

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

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

Mesele şonda, biz inputdaky tekstden iki gezek okap alýarys, onuň içindäki san bolsa üýtgemeýär. Bu, elbetde, optimal däl. Optimizasiýa edeliň:

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

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

Aşakdaky kod girizilen bahany barlaýar. Optimizasiýa ýerine ýetiriň:

<input>

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

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

Aşakdaky kod inputa girizilen sanyň birinden bahasyna çenli bolan bitin sanlaryň jemini gözleýär. Optimizasiýa ýerine ýetiriň:

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

Aşakdaky kod inputa girizilen sanyň bölenleriniň jemini gözleýär. Optimizasiýa ýerine ýetiriň:

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

Aşakdaky kod abzaslardaky sanlary kwadratyna göterýär. Optimizasiýa ýerine ýetiriň:

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

Aşakdaky kod, inputa girizilen setiriň uzynlygynyň bellenen aralykda ýa-da däl-digini barlaýar. Optimizasiýa ýerine ýetiriň:

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