星期三, 5月 12, 2010

重新學習JavaScript

因為1997年看過一點第一代的JavaScript,到2000年時就大幅度改寫,於是我一直很討厭學JavaScript。

最近因為被主管要求寫一個具有AJAX效果的網頁,所以再拿出jQuery in Action來看,書沒看完就寫code果然犯了兩個嚴重錯誤。



第一個錯誤就是因為bind事件因closure造成的memory leak。。在jQuery in Action的附錄有寫closure和memory leak,在 重新介紹JavaScript裏也有寫以下範例:

function addHandler() {
    var el = document.getElementById('el');
    el.onclick = function() {
        this.style.backgroundColor = 'red';
    }
}
要加上e1=null; 才不會memory leak


function addHandler() {
    var el = document.getElementById('el');
    el.onclick = function() {
        this.style.backgroundColor = 'red';
    }
    e1 = null;
}
第二個錯誤則是知道memory leak後在所有function底下把變數加上 xxx=null的宣告。這樣有什麼問題呢?一般的function不會有什麼問題,但我用了jQuery的$.ajax,非同步的宣告使得success的function比較晚執行,傳進去的closure變數已經被清空,所以原本可以執行的程式又變成不能執行。若要釋放變數應該要放在success區段的最底下。


function fail2() {
   var param = $("#somewhere").val();
   $.ajax({
        url: "test.php",
       dataType: "text",
       success: function(ret) {
          // 以下用到 closure的變數 param
         var xyz=param+ret; 
         // do something
       }
   });
   param = null; //在這裏釋放就錯了
}
要改成


function fail2() {
   var param = $("#somewhere").val();
   $.ajax({
        url: "test.php",
       dataType: "text",
       success: function(ret) {
          // 以下用到 closure的變數 param
         var xyz=param+ret; 
          // do something
         param = null; //在這裏釋放才對
       }
   });
}
只能說當掉重修呀.... Orz

1 則留言:

Will 保哥 提到...

解釋的非常清楚,讚喔!