淺析js封裝和作用域

在編寫web軟件時遇到一些可以共用js的情況於是就想著如何封裝js代碼基本需求很簡單其實就是根據不同的情況封裝js代碼

　　基本的代碼如下

復制代碼代碼如下:
<html xmlns="
<head><title>
</title>
<script src="jqueryminjs" 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();
    });
          thisAlertTest= 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:tAlertTest;" />
</body>
</html>

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

復制代碼代碼如下:
var text="test";
   $(document)ready(function () {
      var   t=new functionTest(text);
});
    function functionTest(text)
    {
          var alertText=text
             $("#btnSave")click(function (e) {
       alertTestInnert();
    });
          thisAlertTest= function ()
     {
        alert(alertText);
     }
      function alertTestInnert()
     {
        alert(alertText);
     }
    }
      function alertTestOuter()
   {
        alert(text);
   }

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

復制代碼代碼如下:
<input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:tAlertTest;" />

　　
點擊沒反應修改如下

復制代碼代碼如下:
<input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:alertTestOuter;" />

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

復制代碼代碼如下:
<input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:alertTestOuter();" />

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

復制代碼代碼如下:
<input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:tAlertTest();" />

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

復制代碼代碼如下:
var   t;
      var text="test";
   $(document)ready(function () {
          t=new functionTest(text);
});
    function functionTest(text)
    {
          var alertText=text
             $("#btnSave")click(function (e) {
       alertTestInnert();
    });
          thisAlertTest= function ()
     {
        alert(alertText);
     }
      function alertTestInnert()
     {
        alert(alertText);
     }
    }
      function alertTestOuter()
   {
        alert(text);
   }

　　
最後一步如何給取消調用的方法傳遞參數？
第一步修改js如下也就是把取消調用的函數改為需要傳遞參數的方法代碼如下

復制代碼代碼如下:
var   t;
      var text="test";
   $(document)ready(function () {
          t=new functionTest(text);
});
    function functionTest(text)
    {
          var alertText=text
             $("#btnSave")click(function (e) {
       alertTestInnert();
    });
          thisAlertTest= function (text)
     {
        alert(text);
     }

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

　　
相應的html修改如下

復制代碼代碼如下:
<input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:tAlertTest();" />

　　
點擊看看是不是正確的傳遞了參數一切正常看來這樣就完成了
最後整理js代碼
把通用的js代碼放到一個js文件裡這裡放到了commonjs中不同的代碼放在htm中修改後的所有代碼如下

復制代碼代碼如下:
<html xmlns="
<head><title>
</title>
<script src="jqueryminjs" type="text/javascript"></script>
<script src="commonjs" type="text/javascript"></script>
<script type="text/javascript">
      var   t;//需要定義的外邊否則點擊取消時不能訪問到變量t
      var text="test"; //傳遞的參數
   $(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:tAlertTest();" />
</body>
</html>

　　
commonjs的代碼

復制代碼代碼如下:

From:http://tw.wingwit.com/Article/program/Java/Javascript/201311/25500.html