JavaScript даги занжирларнинг афзаллик ва камчиликлари

Занжирлар кодни қисқартирса-да, аксарияат ҳолларда ўзгарувчини киритиш анча қулай. Икки мисолни солиштиринг - ҳозир мен elem ўзгарувчисини киритдим ва ҳар қандай микдордаги атрибутларни ёза оламан, бу ҳолда querySelector фақат бир марта чақирилади:

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

Энди мен янги ўзгарувчини киритмаганман ва шу сабабли менга querySelector ни икки марта чақиришга тўғри келади:

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

Менингча, бу код қийинлашди, гарчи бир қаторга камроқ жой олса-да. Бундан ташқари, агар мен id нинг қийматини 'elem' дан бошқа бир нарсага ўзгартирмоқчи бўлсам, мен буни кўп жойларда бажаришимга тўғри келади, бу эса жуда қулай эмас.

Яна бир муаммо бор - браузерга юк. querySelector усули бажарадиган саҳифа бўйича элементларни излаш жуда секин амалга оширилади (ва умуман олганда саҳифа элементлари билан ишлаш - бу секин амалга оширилади - буни эслаб қолинг).

Бизнинг ҳолимизда, агар биз ҳар доим querySelector дан фойдалансак, у ҳолда браузер ҳар доим HTML саҳифани қайта ишлар ва берилган id га эга элементни бир неча марта излар (id лар бир хил эканлиги муҳим эмас - браузер барча амалларни бир неча марта бажаради), браузернинг ишлашини секинлаштириши мумкин бўлган бефойда амалларни бажаради.

Агар биз elem ўзгарувчисидан фойдалансак - саҳифа бўйича ҳеч қандай излаш бўлмайди (элемент аллакачо топилган ва унга ишора ўзгарувчида сақланган).

Қуйидаги код берилган:

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

Бу коднинг камчиликларини кўрсатинг. Уларни тўғриланг.