JavaScript-ում շղթաների առավելություններն ու թերությունները

Չնայած այն հանգամանքին, որ շղթաները կրճատում են կոդը, շատ դեպքերում փոփոխականի ներմուծումը դեռևս ավելի հարմար է: Համեմատեք երկու օրինակները. այժմ ես ներմուծել եմ elem փոփոխականը և կարող եմ գրել ցանկացած քանակի ատրիբուտներ, ընդ որում querySelector-ը կանչվում է միայն մեկ անգամ:

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

Իսկ հիմա ես նոր փոփոխական չեմ ներմուծում և, հետևաբար, ստիպված եմ կանչել querySelector-ը երկու անգամ:

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

Իմ կարծիքով, այս կոդը դարձել է ավելի բարդ, թեև զբաղեցնում է մեկ տողով պակաս: Բացի դրանից, եթե ես ուզենամ փոխել id-ի արժեքը 'elem'-ից որևէ այլ բանի, ստիպված կլինեմ դա անել բազմաթիվ տեղերում, ինչը շատ հարմար չէ:

Կա նաև մեկ այլ խնդիր՝ դիտարկիչի վրա բեռնվածությունը: Տարրերի որոնումը էջում, որն անում է querySelector մեթոդը, բավականին դանդաղ գործողություն է (և ընդհանրապես ցանկացած աշխատանք էջի տարրերի հետ դանդաղ գործողություն է - հիշեք սա):

Մեր դեպքում, եթե մենք ամեն անգամ օգտագործում ենք querySelector-ը, ապա դիտարկիչը ամեն անգամ կմշակի HTML էջը և կփնտրի տարրը տրված id-ով մի քանի անգամ (նշանակություն չունի, որ id-ները նույնն են. դիտարկիչը կկատարի բոլոր գործողությունները մի քանի անգամ), կատարելով անօգուտ գործողություններ, որոնք կարող են դանդաղեցնել դիտարկիչի աշխատանքը:

Եթե մենք օգտագործում ենք elem փոփոխականը, էջում որևէ որոնում չի կատարվում (տարրը արդեն գտնվել է, և նրա հղումը պահվում է փոփոխականում):

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