Оптимизатсияи коркард бо DOM дар JavaScript

Коркард бо DOM амали камест. Аз ин рӯ, зарур аст, гирифтани унсурҳо, хондан ва навиштан маълумотҳо, хусусан дар ҳалқа, ба ҳадди имкон кам карда шавад.

Биёед мислан назар андозем. Фарз мекунем, ки мо инпут дорем, ки ба он рақам дохил карда мешавад:

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