Përparësitë dhe Disavantazhet e Zinxhirëve në JavaScript

Edhe pse zinxhirët e shkurtojnë kodin, në shumicën e rasteve futja e një ndryshoreje është megjithatë më e përshtatshme. Krahasoni dy shembuj - tani unë kam futur një ndryshore elem dhe mund të regjistroj çdo numër atributesh, ndërsa querySelector thirret vetëm një herë:

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

Tani unë nuk fut një ndryshore të re dhe për këtë arsye më duhet të thirr querySelector dy herë:

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

Sipas mendimit tim, ky kod u bë më i ndërlikuar, edhe pse zë një rresht më pak. Përveç kësaj, nëse dua të ndryshoj vlerën id nga 'elem' në diçka tjetër, do të më duhet të bëj këtë në shumë vende, gjë që nuk është shumë e përshtatshme.

Ka edhe një problem tjetër - ngarkesa në shfletues. Kërkimi i elementeve në faqe, i cili bëhet nga metoda querySelector, është një operacion mjaft i ngadaltë (dhe në përgjithësi çdo punë me elementët e faqes - është një operacion i ngadaltë - mbani mend këtë).

Në rastin tonë, nëse ne përdorim çdo herë querySelector, atëherë shfletuesi çdo herë do të përpunojë faqen HTML dhe do të kërkojë elementin me id të caktuar disa herë (nuk ka rëndësi që id janë të njëjta - shfletuesi do të kryejë të gjitha veprimet disa herë), duke kryer operacione të padobishme, të cilat mund të ngadalësojnë funksionimin e shfletuesit.

Nëse përdorim ndryshoren elem - nuk ndodh asnjë kërkim në faqe (elementi është gjetur tashmë dhe një referencë për të ndodhet në ndryshore).

Jepet kodi në vijim:

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

Tregoni disavantazhet e këtij kodi. Korrigjoni ato.