亲宝软件园·资讯

展开

浅析js封装和作用域

人气:0
基本的代码如下
复制代码 代码如下:

<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);
     } 
    }   

加载全部内容

相关教程
猜你喜欢
用户评论