澳门新葡萄京官网首页浅析js封装和作用域

三个按钮,希望点击第一个按钮显示 0,第二个按钮显示 1,第三个按钮显示
2。怎么做呢?

在编写web软件时,遇到一些可以共用js的情况,于是就想着如何封装js代码。

基本的代码如下

<input type=”button” id=”b0″ value=”0″ /> <input type=”button”
id=”b1″ value=”1″ /> <input type=”button” id=”b2″ value=”2″ />
<script type=”text/javascript”
src=”;
<script type=”text/javascript”> <!– for (var i = 0; i < 3;
i++) { $(“b” + i).click(function(){ alert(i); }); } //–>
</script>

   基本需求很简单,其实就是根据不同的情况封装js代码。基本的代码如下

复制代码 代码如下:

以上代码是错误的,因为不论点哪个按钮,都是显示 3。

[html] <html xmlns=”; 
<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> 

<html xmlns=”;
<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>

这是由于 i 经过 for 循环后,变成了 3,再点击按钮,始终用的是 i
的最终值,那如下代码是不是正确了呢?

<html xmlns=”;
<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);
   }

再点击保存,取消时需要一定的操作,第一次的代码如上:
点击保存,根本没反应,很奇怪,这种最常用的jquery绑定事件竟然不起作用了。后来一比较才知道,其实自己忘了,绑定应该在$(document).ready(function
() {})中进行;
js修改如下:

for (var i = 0; i < 3; i++) { var m = i; $(“b” + i).click(function(){
alert(m); }); }

    </script>
<body>
 <input type=”button” id=”btnSave” class=”button” value=”保存” 
/>
 <input type=”button” id=”btnCancel” class=”button” value=”取消”
onclick=”javascript:t.AlertTest;” />
</body>
</html>
再点击保存,取消时需要一定的操作,第一次的代码如上:

复制代码 代码如下:

也不对,这个闭包的 m 在 alert 所处的 function 之外,也就是说不受
function 保护,仍会受到 for 循环的改变,function() 中的 m 值永远是外层 m
的最后值,点任何一个按钮都会显示 2(i 在循环内的最后值)。

点击保存,根本没反应,很奇怪,这种最常用的jquery绑定事件竟然不起作用了。后来一比较才知道,其实自己忘了,绑定应该在$(document).ready(function
() {})中进行;

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

正确的做法

js修改如下:

修改后,点击保存可以了,而且正确的传递了参数,这样就可以保证在不同点的情况下传递不同的参数了。
但还有一种情况,页面会动态生成一些标签,这些标签的点击事件也需要处理。再次以取消按钮为例,由于是动态生成,就不能使用和保存一样的方法了。
只能使用onclick=”javascript:t.AlertTest;”这种类似的绑定。于是有测试如下:
修改

for (var i = 0; i < 3; i++) { (function(i){ $(“b” +
i).click(function(){ alert(i); }) })(i); } // 等效于下面的: for (var i
= 0; i < 3; i++) { function f(i) { $(“b” + i).click(function(){
alert(i); }) } f(i); }

[javascript] 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); 
  } 

复制代码 代码如下:

注意 function(i) 中的 i 不能省略,否则 alert(i) 仍然是 for 循环的 i。

 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);
   }
修改后,点击保存可以了,而且正确的传递了参数,这样就可以保证在不同点的情况下传递不同的参数了。

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

另外还有一种方法,和上面的代码是一个道理,不过是借助了
ezj 中,click
可以向事件处理程序传送 DOM 对象的原理,我们可以发现 click 中的
function() 变成了 function(e)

但还有一种情况,页面会动态生成一些标签,这些标签的点击事件也需要处理。再次以取消按钮为例,由于是动态生成,就不能使用和保存一样的方法了。

点击没反应,修改如下

for (var i = 0; i < 3; i++) { var b = $(“b” + i); b.alertText = i;
b.click(function(e){ alert(e.alertText); }); }

只能使用onclick=”javascript:t.AlertTest;”这种类似的绑定。于是有测试如下:

复制代码 代码如下:

写完这篇文章后,才发现之前我已经写过类似的文章了,请参见用闭包留住
i,当作巩固吧。

修改

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

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

点击还是没反应,也没有错误,在修改如下:

 <input type=”button” id=”btnCancel” class=”button” value=”取消”
onclick=”javascript:t.AlertTest;” />点击没反应,修改如下

复制代码 代码如下:

[html]  <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:alertTestOuter;”
/>点击还是没反应,也没有错误,在修改如下:
[html] view plaincopyprint?<input type=”button” id=”btnCancel”
class=”button” value=”取消” onclick=”javascript:alertTestOuter();”
/> 

这次有反应了,看来是少了一对括号。修改为封装的方法如下:

 <input type=”button” id=”btnCancel” class=”button” value=”取消”
onclick=”javascript:alertTestOuter();” />
这次有反应了,看来是少了一对括号。修改为封装的方法如下:

复制代码 代码如下:

[html] <input type=”button” id=”btnCancel” class=”button”
value=”取消” 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:t.AlertTest();” />点击没反应,提示Uncaught
ReferenceError: t is not defined

点击没反应,提示Uncaught ReferenceError: t is not defined
看来是变量t没有定义,作用域起作用了。于是修改js如下,也就是把变量t放到外边,赋值放在里边,就是如下:

看来是变量t没有定义,作用域起作用了。于是修改js如下,也就是把变量t放到外边,赋值放在里边,就是如下:

复制代码 代码如下:

[javascript]  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); 
  } 

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

  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如下,也就是把取消调用的函数改为需要传递参数的方法,代码如下:

最后一步,如何给取消调用的方法传递参数?

复制代码 代码如下:

 
第一步修改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);
     }

[javascript]   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); 
  } 

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

  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修改如下:

相应的html修改如下:

[html]  <input type=”button” id=”btnCancel” class=”button”
value=”取消” onclick=”javascript:t.AlertTest(‘124’);” /> 

复制代码 代码如下:

 <input type=”button” id=”btnCancel” class=”button” value=”取消”
onclick=”javascript:t.AlertTest(‘124’);” />
点击,看看是不是正确的传递了参数,一切正常,看来这样就完成了。

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

最后整理js代码:

点击,看看是不是正确的传递了参数,一切正常,看来这样就完成了。
最后整理js代码: 把通用的js代码放到一个js文件里,这里放到了common.js中,不同的代码放在htm中,修改后的所有代码如下:

把通用的js代码放到一个js文件里,这里放到了common.js中,不同的代码放在htm中,修改后的所有代码如下:

复制代码 代码如下:

[html] <html xmlns=”; 
<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> 

<html xmlns=”;
<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>

<html xmlns=”;
<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的代码:

common.js的代码:

 

复制代码 代码如下:

[javascript]  function functionTest(text) 
   { 
         var alertText=text    
            $(“#btnSave”).click(function (e) {               
            alertTestInnert();           
         });                      
         this.AlertTest= function (text) 
       {             
          alert(text); 
       } 
                    
        function alertTestInnert() 
       { 
          alert(alertText); 
       }     
   }     

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

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

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

 

复制代码 代码如下: html
xmlns=”” headtitle /title script
src=”jquery-1.4.4.min.js” type=”text/javascript”/script script
typ…

 

 

 

基本需求很简单,其实就是根据不同的情况封装js代码。基本的…

发表评论

电子邮件地址不会被公开。 必填项已用*标注