Uboreshaji wa Uendeshaji na DOM katika JavaScript

Uendeshaji na DOM ni operesheni ya polepole. Kwa hivyo ni muhimu kupunguza kwa kiwango cha chini upatikanaji wa vipengele, usomaji na uandikaji wa data, hasa katika kitanzi.

Wacha tuangalie kwa mfano. Tuchukulie tuna kiingilio (input), ambacho nambari inaingizwa:

<input>

Wacha tuangalie, baada ya kupoteza umakini (blur), kama nambari iliyoingizwa iko katika anuwai iliyobainishwa:

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

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

Tatizo ni kwamba, tunasoma maandishi kutoka kwa kiingilio mara mbili, ingawa nambari ndani yake haibadilika. Hii, bila shaka, sio bora. Wacha tuiboreshe:

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

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

Msimbo unaofuata unakagua thamani iliyoingizwa. Fanya uboreshaji:

<input>

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

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

Msimbo unaofuata unatafuta jumla ya nambari kamili kuanzia moja hadi nambari iliyoingizwa kwenye kiingilio. Fanya uboreshaji:

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

Msimbo unaofuata unatafuta jumla ya vigawanyiko (vigawo) vya nambari iliyoingizwa kwenye kiingilio. Fanya uboreshaji:

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

Msimbo unaofuata unainua nambari kutoka kwa aya (paragraphs) mraba. Fanya uboreshaji:

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

Msimbo unaofuata unakagua, ikiwa kwenye kiingilio kimeingizwa mfuatano wa herufi (string) urefu uko katika anuwai maalum. Fanya uboreshaji:

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