საიტის ნავიგაცია| script ტეგის სასარგებლო დეტალები 2 2024-05-20 |
მაგალითისათვის განვიხილოთ რეალური კოდი: Code <script type="text/javascript" id="widget"> var script = document.getElementById("widget"); console.log(script); </script> კოდის შესრულების შედეგად კონსოლი გამოგვიტანს DOM ობიექტს რომელიც რეალურად არის ის script ელემენტი რომლის შიგნითაც სრულდება ნაჩვენები კოდი. ერთი შეხედვით ბანალური კოდია… თუმცა მიაქციეთ ყურადღება რომ script ტეგის შიგნით კოდიდან "მშობელ” ელემენტზე წვდომა ხდება getElementById() მეთოდის მეშვეობით, რადგან, სხვა ალტერნატიული გზა არ არსებობს(მაგ. this ან სხვა რაიმე გასაღები სიტყვა). რა პრაქტიკული დანიშნულება აქვს ამ მცირე აღმოჩენას? წარმოვიდგინოთ რომ ვწერთ ვიდჯეტს, რომელიც, მომხმარებლებმა უნდა ჩასვან თავიანთ საიტებზე. დაახლოებით მსგავსი კოდის მეშვეობით: Code <script type="text/javascript" src="http://widget.vendor.com/weather.js"></script> ასეთ შემთხვევაში გარე სკრიპტის ევალება მომხმარებლის გვერდზე სკრიპტის ადგილას გამოიტანოს/დახატოს რაიმე სახის ინფორმაცია(ამ შემთხვევაში ამინდის პროგნოზი). ის რეალიზაციები რაც ძირითადად მინახავს ასეთ შემთხვევაში იყენებენ document.write(…) მეთოდს, რომელიც, სკრიპტის შესრულების თანავე იწყებს კონტენტის გენერაციას და დოკუმენტში გამობეჭდვას. ასეთ მიდგომას უამრავი მინუსი აქვს(თუნდაც ბლოკირების ეფექტი) თუმცა ამ თემის განვრცობას ამ პოსტში არ ვაპირებ  ნაცვლად აღნიშნული მეთოდისა შესაძლებელია ზუსტად პოსტის დასაწყიში ნაჩვენები შესაძლებლობის გამოყენება. მაგალითად თუ სკრიპტ ტეგს შევცვლით და დავამატებთ ორ ატრიბუტს id და defer: Code <script type="text/javascript" src="http://widget.vendor.com/weather.js" id="widget" defer="defer"></script> მივიღებთ შემდეგ ეფექტს ა) defer ატრიბუტის დამსახურებით არ შეაფერხდება გვერდის რენდერი და ავიცილებთ ე.წ. ბლოკირების ეფექტს; 2) გარე სკრიპტს შესაძლებლობა ექნება მოპოვოს მშობელი DOM ელემენტი და განახორციელოს საჭირო მანიპულაციები რომელიც ნაჩვენებია ქვემოთ; Code var div = document.createElement('div'); div.innerHTML = 'Good sunny weather! B-)'; var script = document.getElementById('widget'); script.parentNode.insertBefore(div, script); შედეგად ბრაუზერში ზუსტად იმ ადგილას რა ადგილასაც ჩავსვით გარე სკრიპტი script ტეგის მეშვეობით დაიხატება ამინდის პროგნოზი(პირობითად) და მივიღებთ ასეთ DOM სტრუქტურას: Code <div>Good sunny weather! B-)</div> <script type="text/javascript" src="http://widget.vendor.com/weather.js" id="widget" defer="defer"></script> და ეს ყველაფერი მოხდება ბრაუზერის ბლოკირების გარეშე! მარტივია ხო?
|
| სულ კომენტარები: 1 | |
