JavaScript-da DOM bilan ishlashni optimallashtirish

DOM bilan ishlash sekin amal hisoblanadi. Shuning uchun elementlarni olish, ma'lumotlarni o'qish va yozish, ayniqsa tsikl ichida, minimal darajada cheklash kerak.

Keling, bir misolni ko'rib chiqaylik. Faraz qilaylik, bizda raqam kiritiladigan kirish maydoni mavjud:

<input>

Kiritilgan raqam belgilangan oralig'ida ekanligini tekshirish uchun fokus yo'qolganida quyidagini bajaraylik:

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

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

Muammo shundaki, biz inputdagi matnni ikki marta o'qiymiz, garchi undagi raqam o'zgarmasa ham. Bu, albatta, optimal emas. Keling, optimallashtiramiz:

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

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

Quyidagi kod kiritilgan qiymatni tekshiradi. Optimallashtirishni bajaring:

<input>

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

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

Quyidagi kod inputga kiritilgan raqamgacha bo'lgan butun sonlar yig'indisini topadi. Optimallashtirishni bajaring:

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

Quyidagi kod inputga kiritilgan raqamning bo'luvchilari yig'indisini topadi. Optimallashtirishni bajaring:

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

Quyidagi kod abzatslardagi raqamlarni kvadratga ko'taradi. Optimallashtirishni bajaring:

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

Quyidagi kod inputga belgilangan oraligdagi uzunlikdagi satr kiritilganligini tekshiradi. Optimallashtirishni bajaring:

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