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