JavaScript面向对象之静态与非静态类


Posted in Javascript onFebruary 03, 2010

直到有那么一天,我开始在js中拼凑DOM标签,而且需要不停的拼凑,我发现我的代码变得愈发的丑陋,不仅上是代码简洁的问题,甚至有时候还引发了性能问题。长此以往,不出三个月,上帝都将会不知道我写过些什么,本篇的目的完全出于记录使用心得。
首先,还是来看一下促使我改变书写JavaScript习惯的垃圾代码,在练习、测试、调试、甚至正式项目中,大量的充斥着下面的代码。

Function finduser(userId) 
{ 
} 
Function showmessage(msg) 
{ 
Var message=”提示,出错了,错误原因”+msg; 
Alert(message); 
} 
Function append(obj) 
{ 
Var onclick=”createdom()”; 
Var title=”你好”; 
$(obj).append(“<a href='javascript:void(0)' onclick='”+onclick+”' title='”+title+”'>”+title+”</a>”); 
}

不要告诉我你没有见过上面的代码,说实话,上面的代码确实写得快,调用简单,如果前两个函数还不足以引发你的愤慨,那么第三个函数应该让你有点想问候写这代码创建者的冲动了。是的,第三个函数直接触发了我决定使用面向对象。
实际上,我完全可以把第三个函数改造成下面这样。
function append(obj) 
{ 
var a=document.craeteElement(“a”); 
a.title=”你好”; 
a.href=”javascript:void(0);”; 
a.innerHTML=a.title; 
a.click=function(){createdom();}; 
$(obj).append(a); 
}

这样如何?有进步吧,好,这就是我想要的代码,但是还不够简洁。我希望可以把创建DOM对象封装到一个类中,并且把以上的三个方法都装到一个对象中;那好吧,动手起来是很简单的事情,这种工作不需要上网搜索代码和示例的,直接应用C#的面向对象思维就可以完成。
首先是封装以上的三个方法到一个对象中,封装很简单,应该不用我多废话的,直接上代码。

封装后的三个函数

User={ 
Function finduser(userId) 
{ 
}, 
Function showmessage(msg) 
{ 
Var message=”提示,出错了,错误原因”+msg; 
Alert(message); 
}, 
Function append(obj) 
{ 
Var a=document.craeteElement(“a”); 
a.title=”你好”; 
a.href=”javascript:void(0);”; 
a.innerHTML=a.title; 
a.click=function(){createdom();}; 
$(obj).append(a); 
} 
}

只需要声明一个User变量来存储上面的三个方法即可,不同的方法间使用逗号分隔,需要注意的是,这时候的User是一个静态的类,无构造函数或者构造函数私有(我猜的),反正不可new了。
其次,我再创建一个封装创建DOM对象的静态类,代码如下:

createElement={ 
element=function(targetName){return document.createElement(targetName);}, 
a=document. createElement(“a”) 
}

相当简单,这样我就可以测试一下上面的CreateElement对象是否可正常工作,这次测试是在append方法中进行测试。append方法再次被改造成下面的代码。
function append(obj) 
{ 
Var a= createElement .a; 
a.title=”你好”; 
a.href=”javascript:void(0);”; 
a.innerHTML=a.title; 
a.click=function(){createdom();}; 
$(obj).append(a); 
}

目前看来,append工作得相当的良好,好吧,我需要作出一点小改动,我需要在append函数中创建三个a并把它依次添加到obj对象中,代码如下:

代码

function append(obj) 
{ 
For(i=0;i<3;i++) 
{ 
Var a= createElement .a; 
a.title=”你好”; 
a.href=”javascript:void(0);”; 
a.innerHTML=a.title; 
a.click=function(){createdom();}; 
$(obj).append(a); 
} 
}

最后显示的结果是obj对象中只得到了一个a我十分的不理解,这一个a让我觉得我又回到了C#的怀抱,多么美好呀,经过分析,当我通过Var a= CreateElement .a;
第一次调用在CreateElement.a来获取a对象时,a属性中的document.createElement(“a”)就已经把a对象驻留到内存中,这之后不管我再怎么调用CreateElement.a,实际上都只是得到了内存中a的一个引用,改变的都竟然是同一个对象,这就是静态类的特别之处,但是,当我通过调用CreateElement.element函数来获取对象时,每次我得到的都是一个新的对象,方法不会保存对象的引用,这是肯定的,解决方法就是通过调用CreateElement.element函数来创建新的对象,但是这种方法非面向对象推荐。
另外一种比较好的解决办法是使用非静态类,即实体类的方式,创建非静态类的方式也是相当的简单,代码如下:
createElement=function(){ 
element=function(targetName){return document.createElement(targetName);}; 
a=document. createElement(“a”); 
}

直接声明createElement对象,并使之有构造函数,成员间以分号进行分隔,当然如果你喜欢,还可以直接这样写,也是没有一样的效果。
function createElement (){ 
element=function(targetName){return document.createElement(targetName);}; 
a=document. createElement(“a”); 
}

经过上面的声明,我们就可以在append函数中像C#一样使用createElement类来创建DOM对象了。

函数

function append(obj) 
{ 
for(i=0;i<3;i++) 
{ 
var ele=new createElement(); 
var a=ele.a; 
a.title=”你好”; 
a.href=”javascript:void(0);”; 
a.innerHTML=a.title; 
a.click=function(){createdom();}; 
$(obj).append(a); 
} 
}

这样每次new createElement()都是一个新的对象,不存在引用的问题了。
实际上,上面提到的就是Javascript中静态类和非静态类的区别;当然也从中得知,使用静态类非静态类的效率上还是有些差别的,而且调用的时候肯定也是静态类方便一些,如果不计较引用冲突问题,我觉得静态类应该是首选的。
Javascript 相关文章推荐
用javascript控制iframe滚动的代码
Apr 10 Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
May 06 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
May 21 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
Oct 25 Javascript
怎样判断jQuery当前元素是隐藏还是显示
Nov 23 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
vue中eventbus被多次触发以及踩过的坑
Dec 02 Javascript
对Angular中单向数据流的深入理解
Mar 31 Javascript
详解使用VueJS开发项目中的兼容问题
Aug 02 Javascript
vue项目持久化存储数据的实现代码
Oct 01 Javascript
浅入深出Vue之组件使用
Jul 11 Javascript
vue 扩展现有组件的操作
Aug 14 Javascript
JavaScript 学习笔记(十六) js事件
Feb 01 #Javascript
js左侧多级菜单动态的解决方案
Feb 01 #Javascript
javascript 三种编解码方式
Feb 01 #Javascript
对字符串进行HTML编码和解码的JavaScript函数
Feb 01 #Javascript
javaScript 关闭浏览器 (不弹出提示框)
Jan 31 #Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
Jan 31 #Javascript
详细讲解JS节点知识
Jan 31 #Javascript
You might like
在数据量大(超过10万)的情况下
2007/01/15 PHP
php关于array_multisort多维数组排序的使用说明
2011/01/04 PHP
tp5框架使用composer实现日志记录功能示例
2019/01/10 PHP
图片上传插件jquery.uploadify详解
2013/11/15 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
2015/06/05 Javascript
JavaScript 对象深入学习总结(经典)
2015/09/29 Javascript
JavaScript正则表达式匹配 div  style标签
2016/03/15 Javascript
JS实现数字格式千分位相互转换方法
2016/08/01 Javascript
js中变量的连续赋值(实例讲解)
2017/07/08 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
2017/12/27 jQuery
[02:02:38]VG vs Mineski Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
[43:14]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
python编程通过蒙特卡洛法计算定积分详解
2017/12/13 Python
Python中分支语句与循环语句实例详解
2018/09/13 Python
解决python 自动安装缺少模块的问题
2018/10/22 Python
python如何实现从视频中提取每秒图片
2020/10/22 Python
PHP统计代码行数的小代码
2019/09/19 Python
详解python播放音频的三种方法
2019/09/23 Python
Pycharm配置PyQt5环境的教程
2020/04/02 Python
Django框架请求生命周期实现原理
2020/11/13 Python
CSS中几个与换行有关的属性简明总结
2014/04/15 HTML / CSS
Clearly澳大利亚:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
linux面试题参考答案(5)
2014/09/01 面试题
服装厂厂长职责
2013/12/16 职场文书
电子商务应届生自我鉴定
2014/01/13 职场文书
资助贫困学生倡议书
2014/05/16 职场文书
机械系毕业生求职信
2014/05/28 职场文书
2014年学校国庆主题活动方案
2014/09/16 职场文书
2014年手术室工作总结
2014/11/26 职场文书
员工辞职信范文
2015/03/02 职场文书
2015年基层党建工作总结
2015/05/14 职场文书
个人借条范本
2015/05/25 职场文书
分家协议书范本
2016/03/22 职场文书
Dashboard管理Kubernetes集群与API访问配置
2022/04/01 Servers
golang操作redis的客户端包有多个比如redigo、go-redis
2022/04/14 Golang