Ketjutuksen edut ja haitat JavaScriptissä

Huolimatta siitä, että ketjutus lyhentää koodia, useimmissa tapauksissa muuttujan käyttöönotto on kuitenkin kätevämpi. Vertaa kahta esimerkkiä - nyt olen ottanut käyttöön muuttujan elem ja voin asettaa minkä tahansa määrän attribuutteja, samalla kun querySelector kutsutaan vain kerran:

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

Nyt en ota käyttöön uutta muuttujaa ja siksi minun täytyy kutsua querySelector kaksi kertaa:

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

Mielestäni tästä koodista tuli monimutkaisempi, vaikka se viekin yhden rivin vähemmän. Lisäksi, jos haluan vaihtaa id-arvon arvosta 'elem' johonkin muuhun, minun täytyy tehdä se monessa kohdassa, mikä ei ole kovin kätevää.

On myös toinen ongelma - kuormitus selaimelle. Elementtien etsiminen sivulta, jota metodi querySelector tekee, on melko hidas operaatio (ja yleisesti ottaen mikä tahansa työskentely sivun elementtien kanssa on hidas operaatio - muista tämä).

Meidän tapauksessamme, jos käytämme querySelector joka kerta, selain joutuu käsittelemään HTML-sivun ja etsimään elementtiä annetulla id:llä useita kertoja (ei väliä, että id on sama - selain suorittaa kaikki toimenpiteet useita kertoja), tehden hyödyttömiä operaatioita, jotka voivat hidastaa selaimen toimintaa.

Jos taas käytämme muuttujaa elem - mitään etsintää sivulta ei tapahdu (elementti on jo löydetty ja viite siihen on tallennettuna muuttujaan).

html<img id="image" src="avatar.png" width="300" height="500">

javascriptconsole.log(document.querySelector('#image').src);
console.log(document.querySelector('#image').width);
console.log(document.querySelector('#image').height);