JavaScriptда DOM билан ишлашни оптимизациялаш

DOM билан ишлаш секин амалдир. Шунинг учун элементларни олиш, маълумотларни ўқиш ва ёзишни, ахусса цикл ичида, минимал darajada чеклаш керак.

Келгила, мисолда кўрамиз. Фарз қилайлик, бизда киритиладиган сон бўлган инпут мавжуд:

<input>

Келгила, фокус йўқотилганда, киритилган сон белгиланган диапозонда эканини текширамиз:

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

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

Муаммо шундаки, биз инпутдан матнни икки марта ўқиёміз, ҳолбуки ундаги сон ўзгармайди. Бу, албатта, оптимал эмас. Оптимизация қилайлик:

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

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

Қуйидаги код киритилган қийматни текширади. Оптимизацияни бажаринг:

<input>

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

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

Қуйидаги код инпутга киритилган сонгача бўлган бүт сонлар йиғиндисини топади. Оптимизацияни бажаринг:

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

Қуйидаги код инпутга киритилган соннинг бўлувчилари йиғиндисини топади. Оптимизацияни бажаринг:

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

Қуйидаги код абзацлардаги сонларни квадратга кўтаради. Оптимизацияни бажаринг:

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

Қуйидаги код инпутга белгиланган диапозон узунлигидаги сатр киритилганлигини текширади. Оптимизацияни бажаринг:

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