用外殼封裝法給javascript中的觸發器傳遞參數

用外殼封裝法給javascript中的觸發器傳遞參數

引用地址: http://callof.net/Site/pView.Asp?id=1270

在一個結構良好的網頁中，不僅要做到結構和表現的分離，而且應該做到結構和邏輯的分離。這裡的邏輯通常就是指在頁面中使用的js指令碼，比如：function toggleDl(){  //statement } var dl=document.getElementById("commentsList"); dl.onclick=toggleDl;  這就是一個結構分離的例子，它沒有把onclick直接插入到html代碼當中，而是通過dom模型取到這個結點然後加入語句來實現觸發點擊事件的功能。在這段代碼中，onclick是一個事件控制代碼，它的值應該是一個函數體，當點擊時會運行這個函數體。所以上面的語句不能夠寫成:dl.onclick=toggleDl(); 或者： dl.onclick="toggleDl()"; 前者把toggleDl()這個函數的傳回值賦給了dl.onclick，後者把一個字串賦給了dl.onclick，這都不是我們所要的。從這段代碼可以看出，要想給一個觸發器傳遞帶參數的函數，是做不到的，而且在很多文章中，說到web頁面的結構和邏輯頁面分離，就會提到只對不需要參數的函數有效。要說參數，實際上還是有一個的，就是this指標，函數體內可以使用this來表示調用它的對象。但在我設計這個blog的過程中，卻遇到了不得不傳遞參數過去的場合，即：右邊的blog列表都是通過XmlHttp從伺服器取得的，取到的是一個xml文檔，然後即時解析成xhtml文檔顯示出來。這時候，查看評論和發表評論兩個按鈕必須要綁定點擊事件，並且這個事件函數還必須傳遞日誌id為參數。直接寫入標記屬性是不行的，只能藉助觸發器來實現。但觸發器賦值又不能有參數，這個問題想了很久，終於功夫不負有心人，給我搞定了。解決辦法是這樣的： 由：dl.onclick=toggleDl(); 這樣的語句想到，實際上dl.onclick的值是toggleDl()這個函數的傳回值，即toggleDl()已經運行。那麼，為什麼不返回一個函數給dl.onclick呢？在返回的函數裡面使用外殼函數傳遞進來的參數就好了。想到這裡，小興奮的試了一下，果然可行，代碼如下：function toggleDl(test){  return function(){   alert(test);   //……  } } 事件操作的邏輯放在被返回的那個函數體中執行，而參數則是在封裝它的函數中傳遞，在這個例子中就是test作為參數。而綁定事件的語句就可以寫成如下的樣子： dl.onclick=toggleDl(12);//這樣就把alert(test)這個函數作為傳回值了 返回的是alert(12); //dl.onclick=toggleDl();這個函數的傳回值賦給了dl.onclick這樣dl被點擊時就會正確的傳遞參數了。 再如: function beginAdding(a) {    a *= 5;    return function finishAdding(b){ alert(a+b); }  }  var add = beginAdding(10);//finishAdding(b){alert(a+b);}    add(20);