DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> 淺析js封裝和作用域
淺析js封裝和作用域
編輯:JavaScript綜合知識     
在編寫web軟件時,遇到一些可以共用js的情況,於是就想著如何封裝js代碼。基本需求很簡單,其實就是根據不同的情況封裝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>


再點擊保存,取消時需要一定的操作,第一次的代碼如上:
點擊保存,根本沒反應,很奇怪,這種最常用的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();   
    });            
          this.AlertTest= function ()
     {     
        alert(alertText);
     } 
      function alertTestInnert()
     {
        alert(alertText);
     } 
    }
      function alertTestOuter()
   {
        alert(text);
   }


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

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


點擊沒反應,修改如下

復制代碼 代碼如下:
 <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:t.AlertTest();" />


點擊沒反應,提示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();   
    });            
          this.AlertTest= 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();   
    });            
          this.AlertTest= function (text)
     {     
        alert(text);
     }

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


相應的html修改如下:

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


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

復制代碼 代碼如下:
<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"; //傳遞的參數
   $(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的代碼:

復制代碼 代碼如下:


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

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved