浅析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 相关文章推荐
js 如何实现对数据库的增删改查
Nov 23 Javascript
固定表格行列(expression)在IE下适用
Jul 25 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
Jul 18 Javascript
JS控制网页动态生成任意行列数表格的方法
Mar 09 Javascript
jquery预加载图片的方法
May 27 Javascript
Javascript实现的简单右键菜单类
Sep 23 Javascript
谈一谈js中的执行环境及作用域
Mar 30 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
Sep 20 Javascript
基于js中的存储键值对以及注意事项介绍
Mar 30 Javascript
Javascript实现异步编程的过程
Jun 18 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
Dec 21 Javascript
vue中三级导航的菜单权限控制
Mar 31 Vue.js
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判断变量是否为0的方法
2014/02/08 PHP
PHP往XML中添加节点的方法
2015/03/12 PHP
PHP通过引用传递参数用法分析
2016/12/01 PHP
PHP设计模式之抽象工厂模式实例分析
2019/03/25 PHP
网站上面有这种切换效果
2006/06/26 Javascript
Javascript实现CheckBox的全选与取消全选的代码
2010/07/20 Javascript
为原生js Array增加each方法
2012/04/07 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
2012/12/12 Javascript
JavaScript 实现类的多种方法实例
2013/05/01 Javascript
javascript自定义的addClass()方法
2014/05/28 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
2014/12/29 Javascript
javascript消除window.close()的提示窗口
2015/05/20 Javascript
学习JavaScript事件流和事件处理程序
2016/01/25 Javascript
JS组件中bootstrap multiselect两大组件较量
2016/01/26 Javascript
Google 地图API Map()构造器详解
2016/08/06 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
2016/12/07 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
jQuery实现字体颜色渐变效果的方法
2017/03/29 jQuery
Vue前后端不同端口的实现方法
2018/09/19 Javascript
详解使用angular框架离线你的应用(pwa指南)
2019/01/31 Javascript
JQuery animate动画应用示例
2019/05/14 jQuery
layui点击弹框页面 表单请求的方法
2019/09/21 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
2019/09/25 Javascript
Python使用matplotlib绘制动画的方法
2015/05/20 Python
Python用于学习重要算法的模块pygorithm实例浅析
2018/08/16 Python
Pycharm无法使用已经安装Selenium的解决方法
2018/10/13 Python
Python3.5局部变量与全局变量作用域实例分析
2019/04/30 Python
python获取txt文件词向量过程详解
2019/07/05 Python
使用anaconda安装pytorch的实现步骤
2020/09/03 Python
python 贪心算法的实现
2020/09/18 Python
编码实现字符串转整型的函数
2012/06/02 面试题
学前教育学生自荐信范文
2013/12/31 职场文书
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
大学生职业生涯规划书参考模板
2014/03/05 职场文书
关于国庆节的演讲稿
2014/09/05 职场文书
Ubuntu Server 安装Tomcat并配置systemctl
2022/04/28 Servers