Ahelate eelised ja puudused JavaScriptis

Hoolimata asjaolust, et ahelad koodi lühendavad, on enamikel juhtudel muutuja kasutuselevõtt siiski mugavam. Võrdle kahte näidet - nüüd võtsin kasutusele muutuja elem ja saan kirjutada suvalise arvu atribuute, samal ajal kui querySelector kutsutakse välja ainult üks kord:

let elem = document.querySelector('#elem');
elem.value = 'www';
elem.type  = 'submit';

Nüüd ma ei võta kasutusele uut muutujat ja seetõttu pean kutsuma querySelector kaks korda:

document.querySelector('#elem').value = 'www';
document.querySelector('#elem').type  = 'submit';

Minu arvates muutus see kood keerulisemaks, kuigi see võtab ühe rea võrra vähem ruumi. Lisaks sellele, kui ma soovin muuta id väärtust 'elem' pealt mõnele teisele, pean ma seda tegema paljudes kohtades, mis pole eriti mugav.

On ka veel üks probleem - brauseri koormus. Elementide otsimine lehelt, mida teeb meetod querySelector, on üsna aeglane operatsioon (ja üldse on igasugune töö lehe elementidega - aeglane operatsioon - jätke see meelde).

Meie juhul, kui me kasutame iga kord querySelector, siis brauser iga kord töötleb HTML-lehe ja otsib elementi etteantud id-ga mitu korda (ükskõik, et id on samad - brauser teeb kõik toimingud mitu korda läbi), sooritades kasutuid operatsioone, mis võivad brauseri tööd aeglustada.

Kui aga kasutame muutujat elem - siis mingit otsimist lehelt ei toimu (element on juba leitud ja viide sellele asub muutujas).

Antud on järgmine kood:

<img id="image" src="avatar.png" width="300" height="500">

console.log(document.querySelector('#image').src);
console.log(document.querySelector('#image').width);
console.log(document.querySelector('#image').height);

Näidake selle koodi puudusi. Parandage need.