Faida na Hasara za Mnyororo katika JavaScript

Licha ya ukweli kwamba mnyororo hupunguza msimbo, katika hali nyingi kuanzisha kutofautisha bado ni rahisi. Linganisha mifano miwili - sasa nimeanzisha kutofautisha elem na naweza kuandika idadi yoyote ya sifa, wakati querySelector inaitwa moja tu:

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

Lakini sasa sianzishi kutofautisha kipya na kwa hivyo inabidi niite querySelector mara mbili:

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

Kwa maoni yangu, msimbo huu umekuwa mgumu, ingawa unachukua mstari mmoja chini. Zaidi ya hayo, ikiwa nitataka kubadilisha thamani ya id kutoka 'elem' hadi nyingine yoyote, itabidi nifanye hivyo katika sehemu nyingi, jambo ambalo si rahisi sana.

Kuna tatizo lingine - mzigo kwa kivinjari. Kutafuta vipengele kwenye ukurasa, ambacho hufanywa na njia querySelector, ni operesheni inayochukua muda (na kwa ujumla kazi yoyote na vipengele vya ukurasa - ni operesheni ya polepole - kumbuka hili).

Katika kesi yetu, ikiwa tunatumia kila wakati querySelector, basi kivinjari kila wakati kitasindika HTML ya ukurasa na kutafuta kipengele chenye id maalum mara kadhaa (haiwani kwamba id ni sawa - kivinjari kitafanya vitendo vyote mara kadhaa), kikifanya operesheni zisizo na maana, ambazo zinaweza kupunguza kasi ya kivinjari.

Lakini ikiwa tunatumia kutofautisha elem - hakuna utafutaji wowote kwenye ukurasa unaotokea (kipengele tayari kimepatikana na kiungo chake kiko katika kutofautisha).

Kuna msimbo ufuatao:

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

Elekeza kwenye mapungufu ya msimbo huu. Irekebishe.