跳到主要內容

重新學習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的驅動程式,剩下的就是政府單位的網頁和程式應該改版了吧!!!

在Windows Server設定L2TP over IPSec VPN

簡單地說,macOS Sierra與iOS 10發表後,大家忽然發現Apple不再支援PPTP,所以一定得設定其他的VPN型態。若不要另外裝client,用L2TP是最方便的,SSL VPN雖然好,但若沒有安裝Agent要連線到任一電腦或是非網頁服務還是挺麻煩的。