浅析js封装和作用域


Posted in Javascript onJuly 09, 2013

基本的代码如下

<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);
     } 
    }   
Javascript 相关文章推荐
jquery 查找select ,并触发事件的实现代码
Mar 30 Javascript
jquery ajax return没有返回值的解决方法
Oct 20 Javascript
JavaScript回调(callback)函数概念自我理解及示例
Jul 04 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
Aug 01 Javascript
Node.JS更改Windows注册表Regedit的方法小结
Aug 18 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
Oct 26 Javascript
vue中实现methods一个方法调用另外一个方法
Feb 08 Javascript
JavaScript笛卡尔积超简单实现算法示例
Jul 30 Javascript
浅析Vue实例以及生命周期
Aug 14 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
Oct 08 Javascript
ES6对象操作实例详解
May 23 Javascript
vscode中使用npm安装babel的方法
Aug 02 Javascript
js正则表达式的使用详解
Jul 09 #Javascript
解析Jquery的LigerUI如何实现文件上传
Jul 09 #Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
Jul 09 #Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
Jul 09 #Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
Jul 09 #Javascript
浅析js中取绝对值的2种方法
Jul 09 #Javascript
浅析LigerUi开发中谨慎载入common.css文件
Jul 09 #Javascript
You might like
php自动加载的两种实现方法
2010/06/21 PHP
PHP自动选择 连接本地还是远程数据库
2010/12/02 PHP
JS 网站性能优化笔记
2011/05/24 PHP
一个典型的PHP分页实例代码分享
2011/07/28 PHP
详解PHP使用Redis存储session时的一个Warning定位
2017/07/05 PHP
javascript 短路法代码精简
2009/08/20 Javascript
JQery jstree 大数据量问题解决方法
2010/03/09 Javascript
将光标定位于输入框最右侧实现代码
2012/12/04 Javascript
javascript ajax 仿百度分页函数
2013/10/29 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
JQuery标签页效果的两个实例讲解(4)
2015/09/17 Javascript
jquery实现的动态回到顶部特效代码
2015/10/28 Javascript
每天一篇javascript学习小结(属性定义方法)
2015/11/19 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
2017/02/14 Javascript
JavaScript 过滤关键字
2017/03/20 Javascript
AngularJS封装$http.post()实例详解
2017/05/06 Javascript
JS库之Particles.js中文开发手册及参数详解
2017/09/13 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
2017/09/29 Javascript
Vue 动态组件与 v-once 指令的实现
2019/02/12 Javascript
Layui动态生成select下拉选择框不显示的解决方法
2019/09/24 Javascript
Python操作串口的方法
2015/06/17 Python
Python实现二叉堆
2016/02/03 Python
Python学习小技巧总结
2018/06/10 Python
Python基于OpenCV库Adaboost实现人脸识别功能详解
2018/08/25 Python
Python字符串的一些操作方法总结
2019/06/10 Python
关于Python核心框架tornado的异步协程的2种方法详解
2019/08/28 Python
python3+openCV 获取图片中文本区域的最小外接矩形实例
2020/06/02 Python
Django生成数据库及添加用户报错解决方案
2020/10/09 Python
仿酷狗html5手机音乐播放器主要部分代码
2013/05/15 HTML / CSS
REISS美国官网:伦敦最受欢迎的时尚品牌
2019/08/16 全球购物
澳大利亚在线消费电子产品商店:TobyDeals
2020/01/05 全球购物
英文版餐饮业求职信
2013/10/18 职场文书
大学本科毕业生的自我鉴定
2013/11/26 职场文书
财务部出纳岗位职责
2013/12/22 职场文书
2015年房产经纪人工作总结
2015/05/15 职场文书
2019学生会干事辞职信
2019/06/27 职场文书