DOM ilə işi JavaScript-də optimallaşdırmaq

DOM ilə iş yavaş əməliyyatdır. Ona görə də elementlərin alınmasını, məlumatların oxunması və yazılmasını minimuma endirmək lazımdır, xüsusən də dövr içərisində.

Gəlin bir nümunəyə baxaq. Tutaq ki, bizim rəqəm daxil edilən bir inputumuz var:

<input>

Gəlin fokus itirildikdə yoxlayaq ki, daxil edilmiş rəqəm təyin edilmiş aralıqdadırmı:

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

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

Problem ondadır ki, biz inputun dəyərini iki dəfə oxuyuruq, baxmayaraq ki, ondakı rəqəm dəyişmir. Bu, əlbəttə ki, optimal deyil. Gəlin optimallaşdıraq:

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

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

Aşağıdakı kod daxil edilmiş dəyəri yoxlayır. Optimallaşdırmanı yerinə yetirin:

<input>

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

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

Aşağıdakı kod inputa daxil edilmiş rəqəmə qədər olan tam ədədlərin cəmini tapır. Optimallaşdırmanı yerinə yetirin:

<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şağıdakı kod inputa daxil edilmiş rəqəmin bölənlərinin cəmini tapır. Optimallaşdırmanı yerinə yetirin:

<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şağıdakı kod abzaslardakı rəqəmləri kvadrata yüksəldir. Optimallaşdırmanı yerinə yetirin:

<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şağıdakı kod yoxlayır ki, inputa müəyyən edilmiş aralıqda uzunluğu olan sətir daxil edilibmi. Optimallaşdırmanı yerinə yetirin:

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