浅析js封装和作用域

ttx9n · 发表于 2013-7-9 11:56:55

在编写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);
     }
    }

wxrf98xr · 发表于 2022-10-12 22:29:34

了乐趣了去了去了去了去了

z80vh · 发表于 2022-10-25 01:39:10

收下来看看怎么样

64000928 · 发表于 2023-3-8 06:47:54

啦啦啦啦啦啦啦啦！

e5plu · 发表于 2023-5-15 11:40:22

逛逛看看瞧瞧

123456 · 发表于 2023-7-30 23:19:13

。。。。。。。。。。。。。。。

3t0ukmu · 发表于 2023-10-27 14:22:17

大家都不容易！

vir5051 · 发表于 2023-12-9 17:58:52

数据库了多久撒快乐的健身卡啦

hd1tvqb3 · 发表于 2024-3-2 05:58:56

66666666666

w18pvaep · 发表于 2024-4-17 22:02:58

看看看看看看看看看看看看看看看看看看看看看看看看看看看

账号		自动登录	找回密码
密码			立即注册

[JavaScript] 浅析js封装和作用域

相关帖子