JavaScript-те тізбектердің артықшылықтары және кемшіліктері

Тізбектер кодты қысқартқанымен, көптеген жағдайларда айнымалыны енгізу әлі де ыңғайлы. Екі мысалды салыстырыңыз - қазір мен elem айнымалысын енгіздім және кез келген атрибут санын жаза аламын, бұл ретте querySelector тек бір рет шақырылады:

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

Қазір мен жаңа айнымалы енгізбедім, сондықтан маған querySelector-ті екі рет шақыруға тура келеді:

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

Менің ойымша, бұл код қиындады, дегенмен бір жолға аз. Сонымен қатар, егер мен id мәнін 'elem'-ден басқа бір нәрсеге өзгерткім келсе, оны көп жерлерде жасауым керек, бұл өте ыңғайлы емес.

Тағы бір мәселе бар - браузерге түсетін жүктеме. querySelector әдісі жасайтын бет бойынша элементтерді іздеу өте баяу операция болып табылады (және жалпы бет элементтерімен кез келген жұмыс - бұл баяу операция - бұны есте сақтаңыз).

Біздің жағдайда, егер біз әр уақытта querySelector-ті қолдансақ, онда браузер әр уақытта HTML бетті өңдеп, берілген id-і бар элементті бірнеше рет іздейді (id бірдей болса да - браузер барлық әрекеттерді бірнеше рет орындайды), пайдасыз операцияларды жасай отырып, бұл браузердің жұмысын баяулата алады.

Егер біз elem айнымалысын қолдансақ - бет бойынша ешқандай іздеу болмайды (элемент табылған және оған сілтеме айнымалыда сақталады).

Мына код берілген:

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

Берілген кодтың кемшіліктерін көрсетіңіз. Оларды түзетіңіз.