跳到主要內容

重新學習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

留言

Will 保哥寫道…
解釋的非常清楚,讚喔!

這個網誌中的熱門文章

自然人憑證讀卡機驅動程式

鳥毅用的是第一代的自然人憑證讀卡機,EZ100PU(後來有同事買EZmini可以讀SIM卡似乎更好),每年報稅時用一次。 本來只是要申請些政府業務,一時之間找不到光碟,沒想到在 驅動程式下載 居然看到Linux和Mac的驅動程式,剩下的就是政府單位的網頁和程式應該改版了吧!!!

用ZedGraph畫統計圖

Update: 沒想到這篇居然變成Google搜尋ZedGraph第一篇中文網頁,不過還是誠心建議用Windows上的C#先看一下 免費的圖表元件:Microsoft Chart Controls ,除非你非得用.Net 2.0(Windows 2000)或是用 Mono 。 BTW,我並不想成為微軟MVP,所以本Blog並不是有問必答的喲^_^ 才剛貼完上一篇,馬上就有位朋友丟過來一個LGPL Open Source元件的網址: ZedGraph 。 參考: A flexible charting library for .NET