Javascript-də zəncirvari çağırışların üstünlükləri və çatışmazlıqları

Zəncirvari çağırışlar kodu qısaltsa da, əksər hallarda dəyişən təqdim etmək daha rahatdır. İki nümunəni müqayisə edin - indi mən elem dəyişənini təqdim etdim və istənilən sayda atribut təyin edə bilərəm, bununla da querySelector yalnız bir dəfə çağırılır:

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

İndi isə mən yeni dəyişən təqdim etmirəm və buna görə də mən querySelector-i iki dəfə çağırmaq məcburiyyətində qalıram:

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

Mənim fikrimcə, bu kod bir sətir az yer tutsa da, daha mürəkkəb oldu. Bundan əlavə, əgər mən id-nin qiymətini 'elem'-dən başqa birinə dəyişmək istəsəm, bunu bir çox yerdə etməli olacağam, ki bu da çox rahat deyil.

Başqa bir problem də var - brauzerə yüklənmə. querySelector metodunun etdiyi elementlərin səhifədə axtarışı kifayət qədər yavaş əməliyyatdır (və ümumiyyətlə səhifə elementləri ilə iş - bu yavaş əməliyyatdır - bunu xatırlayın).

Bizim vəziyyətimizdə, hər dəfə querySelector-dən istifadə etsək, brauzer hər dəfə HTML səhifəsini emal edəcək və müəyyən edilmiş id-li elementi bir neçə dəfə axtaracaq (id-nin eyni olmasının əhəmiyyəti yoxdur - brauzer bütün hərəkətləri bir neçə dəfə edəcək), brauzerin işini yavaşlada biləcək faydasız əməliyyatlar yerinə yetirəcək.

Əgər biz elem dəyişənindən istifadə etsək - səhifədə heç bir axtarış baş vermir (element artıq tapılıb və ona istinad dəyişəndə saxlanılır).

Aşağıdakı kod verilmişdir:

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

Bu kodun çatışmazlıqlarını göstərin. Onları düzəldin.