浅析js封装和作用域_javascript技巧-js教程-PHP中文网

浅析js封装和作用域_javascript技巧

php中文网

发布： 2016-05-16 17:29:16

原创

1139人浏览过

基本的代码如下

复制代码代码如下:

<br>

再点击保存，取消时需要一定的操作，第一次的代码如上：
点击保存，根本没反应，很奇怪，这种最常用的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;"这种类似的绑定。于是有测试如下：
修改

复制代码代码如下:

点击没反应，修改如下

复制代码代码如下:

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

复制代码代码如下:

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

复制代码代码如下:

点击没反应，提示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修改如下：

复制代码代码如下:

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

复制代码代码如下:

<br>

common.js的代码：

复制代码代码如下:

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

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