浅析js封装和作用域(2)


  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" value="取消" />


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

复制代码 代码如下:


<html xmlns="http://www.w3.org/1999/xhtml">
<head><title> 
</title>
<script src="https://www.jb51.net/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="https://www.jb51.net/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" value="保存"  />
 <input type="button" value="取消" />
</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);
     } 
    }   

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdgwjx.html