«
»

JavaScript WTF Vol. 3 – onload და onunload მოვლენები

Mar 01 2007

ვაგრძელებ WTF სერიას და ამჯერად ყურადღებას შევაჩერებ window ობიექტის onload მოვლენაზე. რა საჭიროა ის, რაში გამოიყენება, როგორ გამოვიყენოთ და როგორ ავირიდოთ თავიდან მასთან დაკავშირებული პრობლემები.

პირველ რიგში საჭიროა იმის თქმა რომ ეს მოვლენა სრულდება მაშინ როდესაც ბროუზერი სრულად ჩამოტვირთავს დოკუმენტს და თუ ამ მოვლენას აქვს მინიჭებული რაიმე ფუნქცია, მოხდება მისი გამოძახება.

ფუნქცია ამ მოვლენას შეიძლება მივანიჭოთ შემდეგნაირად:

1
2
3
4
5
6
7
8
9
10
11
//ანონიმური ფუნქციის გამოყენება
window.onload = function() {
   alert("window.onload test");
}

//წინასწარ განსაზღვრული ფუნქციის გამოყენება
function init() {
    alert("initializing application");
}

window.onload = init;

ორივე მოცემულ შემთხვევაში ფუნქციების გამოძახება მოხდება მაშინათვე როგორც კი ბრაუზერი დაასრულებს დოკუმენტის ჩამოტვირთვას. თავიდანვე ცხადი ხდება თუ რისთვის შეიძლება გამოვიყენოთ ეს მოვლენა და როგორ უნდა გამოვიყენოთ იგი, თუმცა ღირს იმის აღნიშვნა რომ თანამედროვე ვებ აპლიკაციებში ხშირად არის საჭირო ბევრი ობიექტისა თუ დოკუმენტის ელემენტის ინიციალიზაცია მხოლოდ დოკუმენტის სრულად ჩამოტვირთვის შემდეგ.

თუმცა ამ კოდის წაკითხვის შემდეგ ჩნდება ასეთი შეკითხვები: მხოლოდ ერთხელ შეიძლება მივანიჭოთ ფუნქცია ამ მოვლენას? თუ უკვე აქვს მას მინიჭებული სხვა ფუნქცია მაშინ რა მოუვა მას თუ ვეცდებით ახალი ფუნქციის მინიჭებას? თუ ვიყენებთ რაიმე ბიბლიოთეკას რომელიც თავის მხრივ იყენებს ამ მოვლენას ინიციალიზაციისათვის ჩვენ როგორ მოვიქცეთ?

ყველა ამ შეკითხვის პასუხი არსებობს და არსებობს საკმაოდ მოხერხებული გამოსავალი, რომელის შესახებაც რამდენიმე წლის წინ წავიკითხე ინტერნეტში.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/**
 *@param function
 */
function windowAddOnLoad(newOnLoadFunction) {
    //შევინახოთ ახალ ცვლადში onload - ის მიმდინარე მნიშვნელობა
    var oldOnLoadFunction = window.onload;

    /*თუ onload - ის მნიშვნელობა არ არის ფუნქციის ტიპის
       მივანიჭოთ მას პარამეტრად გადმოცემული მნიშვნელობა*/
    if (typeof window.onload != 'function') {
        window.onload = newOnLoadFunction;
    } else {
        /* წინააღმდეგ შემთხვევაში, onload მოვლენას მივანიჭოთ ახალი
            ანონიმური ფუნქცია რომელიც გამოძახებისას გამოიძახებს ჯერ
            ძველ ფუნქციას ხოლო შემდეგ უკვე ახალ ფუნქციას*/
        window.onload = function() {
           //ძველი ფუნქციის გამოძახება
            oldOnLoadFunction();
           //ახალი ფუნქციის გამოძახება
            newOnLoadFunction();
        }
    }
}

ამ ფუნქციის დახმარებით უკვე თავისუფლად არის შესაძლებელი onload მოვლენის იმდენჯერ გამოყენება რამდენჯერაც ეს იქნება აუცილებელი კონკრეტული ამოცანისათვის.

გამოყენების კოდი კი შეიძლება იყოს ასეთი:

1
2
3
4
5
6
7
8
9
10
11
function init() {
    alert("test on load");
}

//passing function reference
windowAddOnLoad(init);

//passing anonymous function
windowAddOnLoad(function() {
                    alert("test anonymous function")
                });

მაგალითში ჩანს რომ სურვილის მიხედვით windowAddOnLoad ფუნქციას თავისუფლად შეგვიძლია გადავცეთ ან უკვე გამზადებული ფუნქცია, ან თუ საჭიროა გამოვიყენოთ ანონიმური ფუნქცია. შედეგი იქნება აბსოლუტურად ერთნაირი ნებისმიერ შემთხვევაში.

onload მოვლენიდან გამომდინარე ასევე მინდა ყურადღება შევაჩერო window ობიექტის onunload მოვლენაზე, რომელიც არის onload მოვლენის საპირისპირო და გამოიძახება დოკუმენტის დატოვების დროს. გარდა იმისა რომ აპლიკაციას ესაჭიროება ინიციალიზაცია და ხშირად საჭიროა onload მოვლენის გამოყენება მნიშვნელოვანია ყურადღება მივაქციოთ იმ ფაქტს რომ ბროუზერების მეხსიერების მენეჯმენტი და garbage collector – ის მუშაობა JavaScript-ისთვის არ არის ისეთი ეფექტური როგორიც ეს არის დავუშვათ Java-ში და ხშირ შემთხვევაში საჭიროა მეხსიერების ხელოვნურად გაწმენდა (რაიმე დესტრუქტორი ფუნქციების შექმნა და მათი გამოძახება) თუმცა არის ისეთი შემთხვევები რომ ჩვენს მიერ დაკავებულ მეხსიერებას ვერ გავწმენდთ იქამდე სანამ კლიენტი იმყოფება კონკრეტულ გვერდზე და იგი იყენებს აპლიკაციას. ასეთ შემთხვევებში მეხსიერების გაწმენდა უნდა მოხდეს გვერდის დატოვების მცდელობისას onunload მოვლენის გამოყენებით. ზემოთ დაწერილი ნიმუშის საფუძველზე ადვილად არის შესაძლებელი ფუნქციის გადაწერა ამ მოვლენისათვის, ხოლო მისი გამოყენება იქნება ანალოგიური windowAddOnLoad ფუნქციის გამოყენებისა.

ტეგები: ,

დატოვე კომენტარი:

ქართული კლავიატურა, ჩართვა/გამორთვა კლავიშით "~"