Code.ge Blog » JavaScript WTF http://www.code.ge ბლოგი ვებ პროგრამირებისა და ტექნოლოგიების შესახებ Mon, 03 May 2010 14:38:57 +0000 en hourly 1 http://wordpress.org/?v=3.0 JavaScript WTF Vol. 5 – magic of onchange event http://www.code.ge/posts/javascript-wtf-vol-5-magic-of-onchange-event http://www.code.ge/posts/javascript-wtf-vol-5-magic-of-onchange-event#comments Sat, 31 Jan 2009 11:06:59 +0000 იოსები http://www.code.ge/?p=168 ხშირად იყენებთ HTML ფორმის ელემენტების ამ ივენთს? :) და რა შემთხვევაში? ალბათ უფრო SELECT ელემენტთან მუშაობისას ხომ? თქვენი არ ვიცი მაგრამ ჩემს პირად პრაქტიკაში განსაკუთრებული გამოყენება ამ ივენთს არ ჰქონია… თუმცა ორიოდე დღის წინ ყველაფერი შეიცვალა და ჩემთვის ერთი ფრიად საინტერესო აღმოჩენა გავაკეთე.

ასეთი რამ გინახავათ?

<div onchange="handleEvent()">
//some other markup
</div>

დამეთანხმებით რომ ერთი შეხედვით ამ ივენთის DIV ელემენტთან გამოყენება ცოტა არ იყოს უცნაურია ხომ? რა ცვლილება უნდა მოხდეს ისეთი DIV ელემენტში რომ მისი დამუშავება მოვახდინოთ ამგვარი გზით? ან დავუშვათ და მოხდა ასეთი ცვლილება მაგრამ რანაირად?

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

კლასიკურად უფრო სწორად ძველი სკოლის მიდგომით ასეთი ამოცანის გადაჭრის დროს ყველა, SELECT და INPUT ელემენტის onchange ივენთს მივანიჭებდით ჰენდლერს. თუმცა თუ გავიხსენებთ ფაქტს რომ DOM დოკუმენტში ხდომილება ვრცელდება საწყისი ელემენტისგან(ელემენტი რომელზეც უშუალოდ მოხდა ესა თუ ის მოვლენა) ანუ ელემენტების იერარქიაში ქვევიდან ზევით, ჩემს მიერ ნაჩვენები კოდიც მომენტალურად პრაქტიკულ დანიშნულებას შეიძენს. ამ ინფორმაციაზე დაყრდნობით შესაძლებელია ასეთი კოდის დაწერა:

1
2
3
4
5
6
7
8
9
10
<div id="container">
   <input type="text" name="f1" />
   <br />
   <input type="text" name="f2" />
   <br />
   <select name="s1">
       <option value="v1">Value 1</option>
       <option value="v2">Value 2</option>
   </select>
</div>

ნაჩვენები კოდის შესაბამისი ამოცანა მდგომარეობს ყველა INPUT და SELECT ელემენტის onchange ივენთის დაჭერასა და შესაბამის დამუშავებაში. ნაცვლად იმისა რომ გამოვიყენოთ სათითაოდ ყველა ელემენტს onchange ივენთი, მარტივად შეგვიძლია გავაკეთოთ შემდეგი რამ:

1
2
3
4
5
6
7
8
9
10
11
12
13
document.getElementById('container').onchage = function(e) {
   
   //მოვიპოვოთ Event ობიექტი
   e = e || window.event;
   
   //მოვიპოვოთ საწყისი ელემენტი რომელზეც უშუალოდ დაფიქსირდა ივენთი
   var targetElement = e.target || e.srcElement;

   //თუ ელემენტი არის SELECT ან INPUT ტიპის შევასრულოთ დანარჩენი სამუშაო
   if (/^input|select$/i.test(target.nodeName)) {
       //do something here
   }
}

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

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

enjoy :)

]]> http://www.code.ge/posts/javascript-wtf-vol-5-magic-of-onchange-event/feed 11 JavaScript WTF Vol. 4 – DOM ელემენტების იტერაცია http://www.code.ge/posts/javascript-wtf-vol-4 http://www.code.ge/posts/javascript-wtf-vol-4#comments Thu, 27 Sep 2007 12:13:58 +0000 იოსები http://www.code.ge/javascript/javascript-wtf/javascript-wtf-vol-4 ამასწინათ David Flanagan – ის შესანიშნავ წიგნში JavaScript The Definitive Guide წავაწყდი კოდის ფრაგმენტს რომელმაც ჯერ დამაბნია ხოლო შემდეგ აღტაცება მომგვარა, რადგან მსგავსი რამ არც მომსვლია თავში აზრად არასოდეს და არც არსად მინახავს…

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

მოგეხსენებათ რომ DOM ობიექტების იტერაცია შესაძლოა ხშირად დაგვჭირდეს გარკვეული ამოცანების გადასაჭრელად, მათ შორის ერთერთი მნიშვნელოვანი არის კონკრეტული DOM ობიექტის მომდევნო ან წინა ელემენტის მიღება. ამისათვის არსებობს DOM ობიექტის შესაბამისი თვისებები რომლებიც მიუთითებენ ასეთ ელემენტებზე: nextSibling მომდევნო ელემენტისათვის და previousSibling შესაბამისად წინა ელემენტისათვის. თუმცა პირადად ჩემთვის დიდ სარგებლობას ეს თვისებები არ წარმოადგენენ რადგან ხშირად (X)HTML კოდში ელემენტის წინ/შემდეგ შესაძლოა ტექსტური ელემენტი(textNode) იყოს განთავსებული რომელიც უმეტეს შემთხვევაში არაფერში არ არის გამოსადეგი… ასევე უფრო ხშირად საჭიროა მაგალითად კონკრეტული span ელემენტის წინ არსებული div ელემენტის მოპოვება, ხოლო ამ span – სა და div – ს შორის შესაძლოა განთავსებული იყოს სხვა ელემენტები… გამომდინარე აქედან დაწერილი მაქვს შესაბამისი მეთოდები რომლებიც ამ პრობლემას მიგვარებენ… თუმცა აღნიშნული ფაქტის მერე ეს მეთოდები გადავწერე რომლებსაც აქ განვიხილავ მაგალითის სახით.

კოდი:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
var Util = {
 
  dom: {
   
    /**
     * param obj ობიექტი რომლის შემდეგი ელემენტის მოპოვებაც არის საჭირო
     * param tagName ელემენტის ტეგის სახელი ზუსტი ფილტრაციისათვის
     */
    getNextSibling: function(obj, tagName) {
      if (obj.nextSibling) {
        for (var o = obj.nextSibling; o; o = o.nextSibling) {
          if (o.tagName && o.tagName.toLowerCase() == tagName) {
            return o;
          }
        }
      }
    },
   
    /**
     * param obj ობიექტი რომლის წინა ელემენტის მოპოვებაც არის საჭირო
     * param tagName ელემენტის ტეგის სახელი ზუსტი ფილტრაციისათვის
     */
    getPrevSibling: function(obj, tagName) {
      if (obj.previousSibling) {
        for (var o = obj.previousSibling; o; o = o.previousSibling) {
          if (o.tagName && o.tagName.toLowerCase() == tagName) {
            return o;
          }
        }
      }
    }
 
  }
 
};

კეთილი და პატიოსანი, ეს ორი მეთოდი სავსებით საკმარისია მიზნის მისაღწევად, და მისი გამოყენების მაგალითები გამოიყურება შემდეგნაირად:

1
2
3
var el = document.getElementById('elemID');
var nextSibling = Util.dom.getNextSibling(el, 'p'); //დააბრუნებს ელემენტის შემდგომ არსებულ პირველსავე p ელემენტს
var nextSibling = Util.dom.getPrevSibling(el, 'div'); //დააბრუნებს ელემენტის წინ არსებულ პირველსავე div ელემენტს

მეთოდები საკმარისად მარტივია, იმ შემთხვევაში თუ მეთოდის პირველი პარამეტრის nextSibling/previousSibling თვისებები მიუთითებენ კონკრეტულ DOM ელემენტებს აქვს აზრი ელმენტების იტერაციას, if პირობაში მოწმდება გააჩნია თუ არა ელემენტს tagName თვისება რადგან textNode ტიპის ელემენტებს მსგავსი არაფერი გააჩნია, ხოლო თუ ეს თვისება არსებობს და მას აქვს მნიშვნელობა ხდება შედარება მეთოდის მეორე პარამეტრად გადაცემულ მნიშვნელობასთან. თუ ორი მნიშვნელობა უდრის ერთმანეთს მეთოდი დააბრუნებს მიმდინარე ობიექტს და შეწყვეტს მუშაობას.

თუმცა ეს არ არის საინტერესო… საინტერესოა სწორედ for ციკლი, კერძოდ კი შემდეგი ფრაგმენტი:

for (var o = obj.previousSibling; o; o = o.previousSibling)

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

1) კონსტრუქციის პირველ ნაწილში ხდება o ცვლადის ინიციალიზაცია და მას ენიჭება საწყისი მნიშვნელობა ანუ obj.previousSibling;
2) კონსტრუქციის მეორე ნაწილში მოწმდება პირობა, ანუ o ობიექტი არ უნდა იყოს null, ზუსტად ეს განაპირობებს ციკლის შესრულება გაგრძელდება თუ არა;
3) კონსტრუქციის მესამე ნაწილში ყოველ შემდეგ იტერაციაზე o ობიექტს ენიჭება იერარქიაში მის წინ მყოფი ელემენტი;

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

შესაძლოა ეს ძალიან მარტივად მოგეჩვენოთ თუმცა ჩემთვის პირადად ძალიან სასიამოვნო დეტალი იყო რადგან ობიექტების იტერაციის მსგავსი მეთოდი არ მინახავს და არც გამომიყენებია :)

მარტივი მაგრამ ჩემის აზრით ძალიან სასარგებლო დეტალი ენისა რომელის დეტალებიც დღემდე მართლა ბნელით არის მოცული :)

]]> http://www.code.ge/posts/javascript-wtf-vol-4/feed 4 JavaScript WTF Vol. 3 – onload და onunload მოვლენები http://www.code.ge/posts/javascript-wtf-vol-3-2 http://www.code.ge/posts/javascript-wtf-vol-3-2#comments Fri, 02 Mar 2007 06:17:57 +0000 იოსები http://www.ioseb.com/?p=27 ვაგრძელებ 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 ფუნქციის გამოყენებისა.

]]> http://www.code.ge/posts/javascript-wtf-vol-3-2/feed 0 JavaScript WTF Vol. 2 – ანონიმური ფუნქციები http://www.code.ge/posts/javascript-wtf-vol-2 http://www.code.ge/posts/javascript-wtf-vol-2#comments Thu, 22 Feb 2007 18:59:49 +0000 იოსები http://www.ioseb.com/?p=24 ანონიმური ფუნქციები JavaScript-ში ერთერთი მოქნილი და სასარგებლო საშუალებაა თუმცა პერიოდულად გარკვეული სირთულეები მათი გამოყენებისას მაინც გვხვდება.

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

მაგალითისათვის განვიხილოთ შემდეგი კოდი:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function init() {
   
    //private variable
    var privateVar = "This is private variable";
   
    //public variable
    this.publicVar = "This is public variable";
   
    //private method
    var privateMethod = function() {
        alert("This is private method");
    }
   
    //public method
    this.publicMethod = function() {
        alert("This is public method");
    }
   
    //initialize anchor onclick
    var anchor = document.getElementById("test");
    anchor.onclick = function() {
        alert(privateVar); //alert private variable
        alert(publicVar); //alert public variable
        privateMethod(); //call private method
        publicMethod(); //call public method
    }
   
}

//window onload event calls init function
window.onload = init;

ასევე ამ მაგლითისთვის საჭიროა შემდეგი HTML კოდი:

1
<a href="#" id="test">Test onclick</a>

განვიხილოთ init() ფუნქცია რომელიც დოკუმენტის სრულად ჩატვირთვის თანავე გამოიძახება (იხ. window.onload = init;). მას გააჩნია რამდენიმე private და public წევრი. ასევე ამ ფუნქციის მეშვეობით ხდება a ელემენტის onclick მოვლენისათვის (ანონიმური)ფუნქციის მინიჭება, რომელიც შესრულებისას test() ფუნქციის ყველა წევრს მიმართავს(იძახებს) მიმდევრობით. თუ ამ კოდს შევასრულებთ ერთმანეთის მიყოლებით მივიღებთ შეტყობინებებს:

  • This is private variable
  • This is public variable
  • This is private method
  • This is public method

ერთი შეხედვით ყველაფერი ნათელია და ყველაფერი სწორად მუშაობს. ასევე შეგვიძლია გავაკეთოთ დასკვნა რომ init() ფუნქციის კონტექსტს აბსოლუტურად იზიარებს anchor.onclick – ისთვის განსაზღვრული ანონიმური ფუნქცია. თუმცა კოდს თუ გავუკეთებთ მცირე მოდიფიკაციას დავინახავთ რომ სურათი რადიკალურად იცვლება და ამან შეიძლება გარკვეული პრობლემები წარმოშვას გარკვეულ შემთხვევებში, კოდის ბოლო სტრიქონი ჩავანაცვლოთ შემდეგი კოდით:

1
2
3
4
5
6
function callInit() {
  var testInit = new init();
}

//window onload event calls callInit function
window.onload = callInit;

ამჯერად a ელემენტზე დაკლივის შემდეგ მივიღებთ მხოლოდ ერთ შეტყობინებას:

  • This is private variable

და კოდი შეწყვეტს მუშაობს შემდეგი შეტყობინებით “publicVar is not defined”… რა მოხდა ამ შემთხვევაში? onclick ელემენტის ანონიმურმა ფუნქციამ დაკარგა კავშირი init() ფუნქციასთან, მაგრამ მხოლოდ ნაწილობრივ? თუ init() ფუნქციის private წევრებზე აქვს წვდომა რატომ public წევრებზე არ აქვს წვდომა? სიმართლე რომ ითქვას ბოლომდე ვერ გავერკვიე ამ დეტალებში და გარკვეულ წილად ბუნდოვანი დარჩა რაღაც დეტალები რომ აქ ავხსნა, მაგრამ რამდენიმე(იმედია სწორი) დასკვნის გაკეთება შეგვიძლია აქედან:

  • ანონიმური ფუნქცია იზიარებს init ფუნქციის კონტექსტს მთლიანად(აქვს წვდომა მის ყველა წევრთან) მიუხედავად იმისა წევრი არის public თუ private.
  • ყველაფერი ერთ კონტექსტში სრულდება და init ფუნქციის ყველა წევრი სტატიკურია და არ საჭიროების init – ის ახალ ეგზემპლარს.
  • თუ init არ გამოიძახება პირდაპირ, არამედ მოხდება მისი ახალი ობიექტის(new init()) შექმნა, onclick – ისთვის განსაზღვრული ანონიმური ფუნქცია ნაწილობრივ გაიზიარებს init ფუნქციის კონტექსტს, არ დაკარგავს წვდომას მის private წევრებთან მაგრამ დაკარგავს წვდომას მის public წევრებზე, ანუ აღმოჩნდება ობიექტის(რომელიც იქმნება new ოპერატორით) კონტექსტს მიღმა

არის თუ არა ასეთი მდგომარეობიდან გამოსავალი? დიახ არის და შემდეგ მაგალითში ნაჩვენებია ასეთი შემთხვევა:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
function init() {
   
    //private variable
    var privateVar = "This is private variable";
   
    //public variable
    this.publicVar = "This is public variable";
   
    //private method
    var privateMethod = function() {
        alert("This is private method");
    }
   
    //public method
    this.publicMethod = function() {
        alert("This is public method");
    }
   
    //initialize anchor onclick
    var anchor = document.getElementById("test");
   
    //create reference to current object
    var ref = this;
   
    anchor.onclick = function() {
      var initRef = ref; //create reference to object
        alert(privateVar);
        alert(initRef.publicVar); //now call publicVar through initRef object reference
        privateMethod();
        initRef.publicMethod(); //now call publicMethod through initRef object reference
    }
   
}

function callInit() {
  var testInit = new init();
}

//window onload event calls callInit function
window.onload = callInit;

მოდიფიცირებულ კოდში ყურადღება უნდა მივაქციოთ var ref = this; ნაწილს, რადგან 1) ამ კოდს ვწერთ onclick ანონიმური ფუნქციის გარეთ; 2) onclick ანონიმურ ფუნქციაში ვქმნით ახალ initRef ცვლადს და მას ვანიჭებთ ref ცვლადს (var initRef = ref;); 3) init – ის public წევრებს მივმართავთ initRef – ის საშუალებით;

რეზულტატი აბსოლუტურად იგივეა რაც იყო პირველ შემთხვევაში თუმცა აქ უნდა გავამახვილოთ ყურადღება ref=this; კოდზე, რატომ დავწერეთ ეს კოდი onclick ანონიმური ფუნქციის გარეთ და არა თვით ფუნქციაში მაგ. var initRef = this;? ასე რომ დაგვეწერა ფუნქციის შიგნით this უკვე ამ ფუნქციაზე მიუთითებდა და არა init ფუნქციის რომელიმე ეგზემპლარზე, და წვდომა init – ის ობიექტთან კვლავ დაიკარგებოდა.

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

]]> http://www.code.ge/posts/javascript-wtf-vol-2/feed 1 JavaScript WTF Vol. 1 – ფუნქციის call და apply მეთოდები http://www.code.ge/posts/javascript-wtf-vol-1 http://www.code.ge/posts/javascript-wtf-vol-1#comments Thu, 22 Feb 2007 15:53:04 +0000 იოსები http://www.ioseb.com/?p=23 შემთხვევით რაღაც JavaScript კოდის გარჩევისას თვალი მოვკარი მსგავს: func.call() და func.apply() კოდს. თავიდან არ მივაქციე ყურადღება მაგრამ რამდენიმე დღის შემდეგ სხვა ადგილას მოვკარი თვალი იგივე ტიპის კოდს, თუმცა პირველად და მეორედ ნანახ კოდს ერთმანეთთან კავშირი არ ქონდა. დავინტერესდი და მოვიძიე ინფორმაცია ამ ორი მეთოდის call() და apply() – ს შესახებ და აღმოვაჩინე რომ…

თურმე ყველა ფუნქციას გააჩნია call() და apply() მეთოდი, (JavaScript – ში ხომ ყველაფერი ობიექტია, თვით ფუნქციაც ასე რომ ფუნქციას სავსებით შეიძლება გააჩნდეს მეთოდები). ეს მეთოდები ფუნქციის ისე გამოძახების საშულებას გვაძლევს თითქოს ეს ფუნქცია სხვა რომელიმე ობიექტის მეთოდი იყოს.

ტესტირების მიზნით დავწერე ასეთი სკრიპტი:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function test() {
  this.variable = "test";
  this.member();
}

function testParams(paramOne, paramTwo) {
  this.memberParams(paramOne, paramTwo);
}

var objOne = {
  member: function() {
    alert(this.variable);
  },
  memberParams: function(paramOne, paramTwo) {
    alert(paramOne + " - " + paramTwo);
  }
}

//call test()
test.call(objOne);


//call tetsParams()
testParams.call(objOne, 'paramOne test', 'paramTwo test');

თუ კოდს დააკვირდებით დაინახავთ რომ test() ფუნქცია ოდნავ უცნაურად გამოიყურება, კერძოდ კი this.member() მეთოდის გამოძახება, რადგან test() ფუნქციაში მსგავსი წევრი არ არსებობს. member() მეთოდი სინამდვილეში objOne ობიექტის წევრია და მას არანაირი კავშირი არ აქვს test() ფუნქციასთან (გარდა იმისა რომ test() ფუნქცია გლობალურია და member() მეთოდს მასზე წვოდამ გააჩნია). თავის მხრივ თუ დავაკვრიდებით member() მეთოდს ისიც უცნაურად გამოიყურება რადგანდ objOne ობიექტს არანაირი “variable” წევრი არ გააჩნია, თუმცა ცვლადს იგივე სახელით test() ფუნქციაში ვხედავთ.

ამ კოდის test.call(objOne); შესრულების რეზულტატი კი აბსოლუტურად სწორია და test() ფუნქცია წარმატებით იძახებს member() მეთოდს ისე თითქოს ის მისი წევრი მეთოდი იყოს, ხოლო member() ფუნქციას წვდომა გააჩნია “variable” ცვლადზე თითქოს ეს ცვლადი objOne ობიექტის წევრი იყოს.

რა ხდება სინამდვილეში? როგორც ზემოთ ავღნიშნე call() მეთოდი ფუნქციის (ამ შემთხვევაში test() ფუნქცია) ისე გამოძახების საშულებას გვაძლევს თითქოს ეს ფუნქცია სხვა რომელიმე ობიექტის (ამ შემთხვევაში objOne ობიექტი) მეთოდი იყოს. იგივე ეხება apply() მეთოდსაც.

უფრო მეტი სიცხადისათვის პირველი მაგალითი შეგვიძლია გადავწეროთ ასე:

1
2
3
4
5
6
7
8
9
10
11
var objTwo = {
  variable: "test simple",
  test: function() {
    this.member();
  },
  member: function() {
    alert(this.variable);
  }
}

objTwo.test();

თუ შევასრულებთ ამ კოდს დავინახავთ რომ რეზულტატი იდენტურია პირველად შესრულებული კოდისა.

რა განსხვავებაა call() და apply() მეთოდებს შორის? ერთადერი განსხვავება რაც ამ ორ მეთოდს შორის არის ეხება პარამეტრებს. call() მეთოდის გამოყენების შემთხვევაში, თუ გამოძახებულ ფუნქციას გვინდა გადავცეთ პარამეტრი ან პარამეტრები კოდი დაიწერება ასე tetsParams.call(objOne, ‘paramOne test’, ‘paramTwo test’); ანუ პარამეტრები გამოიყოფა ტრადიციულად მძიმით. ხოლო apply() მეთოდის გამოყენების შემთხვევაში კი კოდს უნდა ქონდეს ასეთი სახე: tetsParams.apply(objOne, ['paramOne test', 'paramTwo test']); ანუ პარამეტრები გამოძახებულ ფუნქციას უნდა გადაეცეს მასივის სახით.

]]> http://www.code.ge/posts/javascript-wtf-vol-1/feed 3