淺析js封裝和作用域

更新時間：2013年07月09日 11:56:55 作者：

在編寫web軟件時，遇到一些可以共用js的情況，于是就想著如何封裝js代碼?；拘枨蠛芎唵?，其實就是根據(jù)不同的情況封裝js代碼

基本的代碼如下

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>  
</title>
<script src="jquery-1.4.4.min.js" type="text/javascript"></script> 
<script type="text/javascript">    
      var text="test"; 
   var   t=new functionTest(text); 
    function functionTest(text)
    {
          var alertText=text   
             $("#btnSave").click(function (e) {     
       alertTestInnert();   
    });             
          this.AlertTest= function ()
     {      
        alert(alertText);
     } 
      function alertTestInnert()
     {
        alert(alertText);
     } 
    } 
      function alertTestOuter()
   {
        alert(text);
   }
    </script>
<body>
 <input type="button" id="btnSave" class="button" value="保存"  />
 <input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:t.AlertTest;" />
</body>
</html>

再點擊保存，取消時需要一定的操作，第一次的代碼如上：
點擊保存，根本沒反應(yīng)，很奇怪，這種最常用的jquery綁定事件竟然不起作用了。后來一比較才知道，其實自己忘了，綁定應(yīng)該在$(document).ready(function () {})中進行；
js修改如下：

復(fù)制代碼代碼如下:

 var text="test"; 
   $(document).ready(function () {
      var   t=new functionTest(text); 
 });   
    function functionTest(text)
    {
          var alertText=text   
             $("#btnSave").click(function (e) {     
       alertTestInnert();   
    });             
          this.AlertTest= function ()
     {      
        alert(alertText);
     } 
      function alertTestInnert()
     {
        alert(alertText);
     } 
    } 
      function alertTestOuter()
   {
        alert(text);
   }

修改后，點擊保存可以了，而且正確的傳遞了參數(shù)，這樣就可以保證在不同點的情況下傳遞不同的參數(shù)了。
但還有一種情況，頁面會動態(tài)生成一些標(biāo)簽，這些標(biāo)簽的點擊事件也需要處理。再次以取消按鈕為例，由于是動態(tài)生成，就不能使用和保存一樣的方法了。
只能使用onclick="javascript:t.AlertTest;"這種類似的綁定。于是有測試如下：
修改

復(fù)制代碼代碼如下:

 <input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:t.AlertTest;" />

點擊沒反應(yīng)，修改如下

復(fù)制代碼代碼如下:

 <input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:alertTestOuter;" />

點擊還是沒反應(yīng)，也沒有錯誤，在修改如下：

復(fù)制代碼代碼如下:

 <input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:alertTestOuter();" />

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

復(fù)制代碼代碼如下:

<input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:t.AlertTest();" />

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

復(fù)制代碼代碼如下:

  var   t;
      var text="test"; 
   $(document).ready(function () {
          t=new functionTest(text); 
 });   
    function functionTest(text)
    {
          var alertText=text   
             $("#btnSave").click(function (e) {     
       alertTestInnert();   
    });             
          this.AlertTest= function ()
     {      
        alert(alertText);
     } 
      function alertTestInnert()
     {
        alert(alertText);
     } 
    } 
      function alertTestOuter()
   {
        alert(text);
   }

最后一步，如何給取消調(diào)用的方法傳遞參數(shù)？
第一步修改js如下，也就是把取消調(diào)用的函數(shù)改為需要傳遞參數(shù)的方法，代碼如下：

復(fù)制代碼代碼如下:

  var   t;
      var text="test"; 
   $(document).ready(function () {
          t=new functionTest(text); 
 });   
    function functionTest(text)
    {
          var alertText=text   
             $("#btnSave").click(function (e) {     
       alertTestInnert();   
    });             
          this.AlertTest= function (text)
     {      
        alert(text);
     }

      function alertTestInnert()
     {
        alert(alertText);
     } 
    } 
      function alertTestOuter()
   {
        alert(text);
   }

相應(yīng)的html修改如下：

復(fù)制代碼代碼如下:

 <input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:t.AlertTest('124');" />

點擊，看看是不是正確的傳遞了參數(shù)，一切正常，看來這樣就完成了。
最后整理js代碼：
把通用的js代碼放到一個js文件里，這里放到了common.js中，不同的代碼放在htm中，修改后的所有代碼如下：

復(fù)制代碼代碼如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>  
</title>
<script src="jquery-1.4.4.min.js" type="text/javascript"></script> 
<script src="common.js" type="text/javascript"></script> 
<script type="text/javascript">  
      var   t;//需要定義的外邊，否則點擊取消時，不能訪問到變量t
      var text="test"; //傳遞的參數(shù)
   $(document).ready(function () {      
          t=new functionTest(text); //給t賦值，定義不能放在這里邊
 });
    </script>
<body>
 <input type="button" id="btnSave" class="button" value="保存"  />
 <input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:t.AlertTest('124');" />
</body>
</html>

common.js的代碼：

復(fù)制代碼代碼如下:

 function functionTest(text)
    {
          var alertText=text   
             $("#btnSave").click(function (e) {     
       alertTestInnert();   
    });             
          this.AlertTest= function (text)
     {      
        alert(text);
     }

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