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);
Նշեք այս կոդի թերությունները: Ուղղեք դրանք:
