Voordele en Nadele van Kettings in JavaScript

Ten spyte daarvan dat kettings die kode verkort, is die invoer van 'n veranderlike in die meeste gevalle steeds makliker. Vergelyk die twee voorbeelde - nou het ek 'n veranderlike elem ingevoer en kan ek enige aantal eienskappe toeskryf, terwyl querySelector slegs een keer aangeroep word:

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

Nou voer ek geen nuwe veranderlike in nie en daarom moet ek querySelector twee keer aanroep:

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

Na my mening het hierdie kode meer ingewikkeld geword, alhoewel dit een reël minder beslaan. Boonop, as ek die waarde van id wil verander van 'elem' na iets anders, sal ek dit in baie plekke moet doen, wat nie baie gerieflik is nie.

Daar is ook nog 'n probleem - die las op die blaaier. Die soektog na elemente op die bladsy wat deur die metode querySelector gedoen word, is 'n taamlik stadige operasie (en enige werk met bladsyelemente is 'n stadige operasie - onthou dit).

In ons geval, as ons elke keer querySelector gebruik, sal die blaaier elke keer die HTML-bladsy verwerk en die element met die gegewe id 'n paar keer soek (maak nie saak of die id dieselfde is nie - die blaaier sal al die handelinge 'n paar keer uitvoer), en nuttelose operasies doen wat die werking van die blaaier kan vertraag.

As ons egter die veranderlike elem gebruik - vind geen soektog op die bladsy plaas nie (die element is reeds gevind en 'n verwysing daarna lê in die veranderlike).

Die volgende kode word gegee:

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

Wys op die tekortkominge van hierdie kode. Reg dit.