JavaScript'te Zincirleme Yönteminin Avantajları ve Dezavantajları

Zincirleme kodu kısaltmasına rağmen, çoğu durumda bir değişken tanımlamak daha kullanışlıdır. İki örneği karşılaştırın - şimdi bir elem değişkeni tanımladım ve istediğim sayıda nitelik atayabilirim, bu arada querySelector yalnızca bir kez çağrılıyor:

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

Şimdi ise yeni bir değişken tanımlamıyorum ve bu nedenle querySelector'ü iki kez çağırmak zorunda kalıyorum:

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

Bana göre, bu kod bir satır daha kısa olmasına rağmen daha karmaşık hale geldi. Ayrıca, eğer id değerini 'elem''den başka bir değere değiştirmek istersem, bunu birçok yerde yapmak zorunda kalacağım, bu da pek kullanışlı değil.

Bir başka sorun daha var - tarayıcı üzerindeki yük. querySelector metodunun yaptığı gibi sayfa üzerinde eleman aramak, oldukça yavaş bir işlemdir (ve genel olarak sayfa elemanlarıyla yapılan her türlü işlem yavaş bir işlemdir - bunu unutmayın).

Bizim durumumuzda, eğer her seferinde querySelector kullanırsak, tarayıcı her seferinde HTML sayfasını işleyecek ve belirtilen id'ye sahip elemanı birkaç kez arayacak (id'lerin aynı olması önemli değil - tarayıcı tüm işlemleri gereksiz yere birkaç kez tekrarlayacak), bu da tarayıcının performansını yavaşlatabilecek gereksiz işlemlere yol açacaktır.

Eğer elem değişkenini kullanırsak - sayfa üzerinde herhangi bir arama yapılmaz (eleman zaten bulunmuştur ve referansı değişkende saklanır).

Aşağıdaki kod verilmiştir:

<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 eksikliklerini belirtiniz. Düzeltiniz.