ჯავასკრიპტში ჯაჭვების უპირატესობები და ნაკლოვანებები

მიუხედავად იმისა, რომ ჯაჭვები ამცირებს კოდს, უმეტეს შემთხვევაში ცვლადის შემოღება მაინც უფრო მოსახერხებელია. შეადარეთ ორი მაგალითი - ახლა მე შემოვიღე ცვლადი 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);