JavaScript-da Zanjirlashning Afzalliklari va Kamchiliklari

Zanjirlar kodni qisqartirishiga qaramasdan, aksariyat hollarda o'zgaruvchi kiritish ancha qulayroqdir. Ikkita misolni solishtiring - hozirda men elem o'zgaruvchisini kiritdim va istalgancha atributlarni yozishim mumkin, bunda querySelector faqat bir marta chaqiriladi:

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

Hozir esa men yangi o'zgaruvchi kiritmayapman va shuning uchun querySelector ni ikki marta chaqirishga majburman:

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

Mening fikrimcha, bu kod murakkablashdi, garchi bitta qatorga kamroq joy egallasa ham. Bundan tashqari, agar men id ning qiymatini 'elem' dan boshqasiga o'zgartirmoqchi bo'lsam, buni ko'p joylarda qilishim kerak bo'ladi, bu esa unchalik qulay emas.

Yana bir muammo bor - brauzerga bo'lgan yuk. querySelector usuli bajarydigan sahifa bo'yicha elementlarni qidirish, juda sekin operatsiyadir (va umuman sahifa elementlari bilan ishlash - bu sekin operatsiyadir - buni eslang).

Bizning holatimizda, agar har safar querySelector dan foydalansak, brauzer har safar HTML sahifani qayta ishlaydi va berilgan id ga ega elementni bir necha marta qidiradi (id lar bir xil bo'lsa ham farqi yo'q - brauzer barcha amallarni bir necha marta bajaradi), bu esa brauzerning ishlashini sekinlashtirishi mumkin bo'lgan foydasiz operatsiyalardir.

Agar elem o'zgaruvchisidan foydalansak - sahifa bo'yicha hech qanday qidiruv bo'lmaydi (element allaqachon topilgan va unga havola o'zgaruvchida saqlanadi).

Quyidagi kod berilgan:

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

Ushbu kodning kamchiliklarini ko'rsating. Ularni tuzating.