淺析js封裝與作用域_javascript技巧

基本的程式碼如下

複製程式碼 程式碼如下:

複製程式碼
程式碼如下:

 var text="test";  () {      var   t=new functionTest(text);  });        

             $("#btnSave") .click(function (e) {     

       alertTestInnert();   
    });   est= function ()
     {     
        alert(alertText);
     } 
function alertTestInnert()
     {
        alert(alertText);
     } 

        alert(text);
   }


修改後，點選儲存可以了，而且正確的傳遞了參數，這樣就可以保證在不同點的情況下傳遞不同的參數了。
但還有一種情況，頁面會動態產生一些標籤，這些標籤的點擊事件也需要處理。再以取消按鈕為例，由於是動態生成，就不能使用和儲存一樣的方法了。

只能使用onclick="javascript:t.AlertTest;"這種類似的綁定
。於是有檢定如下：
修改




複製程式碼

程式碼如下:

程式碼如下:

="button" id="btnCancel" class="button" value="取消" onclick="javascript:t.AlertTest;" />
點選沒反應，修改如下

複製程式碼 程式碼如下:

程式碼如下:

 

點擊還是沒反應，也沒有錯誤，在修改如下：

複製程式碼

程式碼如下:

 

這次有反應了，看來是少了一對括號。修改為封裝的方法如下：

複製程式碼

程式碼如下:

點擊沒反應，提示Uncaught ReferenceError : t is not defined 看來是變數t沒有定義，作用域起作用了。於是修改js如下，也就是把變數t放到外邊，賦值放在裡邊，就是如下：

複製程式碼

程式碼如下:


  var   t;
      var text="test"; 
  🎜 > });   
    function functionTest(text)
    {
         click(function (e) {     
       alertTestInnert();   
    });            
          this.AlertTest= function ()     } 
      function alertTestInnert()
     {
     🎜>     } 
    }
      function alertTestOuter()
   {最後一步，如何給取消呼叫的方法傳遞參數？

第一步修改js如下，也就是把取消呼叫的函數改為需要傳遞參數的方法，程式碼如下：

複製程式碼

代碼如下:

  var   t;      var text="test";  t  $(documunction). =new functionTest(text);  });           $("#btnSave").click(function (e) {

       alertTestInnert();   

    });              {     
        alert(text);
     }

      unction alertTest
     {
        alert(alertText);
     } 
        alert(text);
   }


對應的html修改如下：

複製程式碼 程式碼如下:

程式碼如下:

程式碼如下:

程式碼 點擊，看看是不是正確的傳遞了參數，一切正常，看來這樣就完成了。 最後整理js程式碼：

把通用的js程式碼放到一個js檔案裡，這裡放到了common.js中，不同的程式碼放在htm中，修改後的所有程式碼如下：




複製程式碼


程式碼如下:

   $(document).ready(function (  new functionTest(text); //給t賦值，定義不能放在這裡邊
 });
   

  

common.js的程式碼：

複製碼


程式碼如下:


 function functionTest(text)
          $("#btnSave"). click(function (e) {     
       alertTestInnert();   
    }    function (text)
     {     
        alert(text);
     }

      function alertTestInnert()     {        alert(alertText);