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实现检测指定目录是否存在的方法
Jan 12 Javascript
js 页面刷新location.reload和location.replace的区别小结
Dec 24 Javascript
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
Jul 17 Javascript
jquery获得页面元素的坐标值实现思路及代码
Apr 15 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
May 19 Javascript
javascript跨浏览器的属性判断方法
Mar 16 Javascript
Angularjs之filter过滤器(推荐)
Nov 27 Javascript
VueJS如何引入css或者less文件的一些坑
Apr 25 Javascript
Web开发使用Angular实现用户密码强度判别的方法
Sep 27 Javascript
vue组件watch属性实例讲解
Nov 07 Javascript
node.js Promise对象的使用方法实例分析
Dec 26 Javascript
js实现表单项的全选、反选及删除操作示例
Jun 05 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
php+highchats生成动态统计图
2014/05/21 PHP
Yii查询生成器(Query Builder)用法实例教程
2014/09/04 PHP
php中最简单的字符串匹配算法
2014/12/16 PHP
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
javascript 当前日期加(天、周、月、年)
2009/08/09 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
2016/05/09 Javascript
Vue.js实现无限加载与分页功能开发
2016/11/03 Javascript
jQuery中DOM节点删除之empty与remove
2017/01/20 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
详解require.js配置路径的用法和css的引入
2017/09/06 Javascript
AngularJS中controller控制器继承的使用方法
2017/11/03 Javascript
mpvue 单文件页面配置详解
2018/12/02 Javascript
js正则匹配多个全部数据问题
2019/12/20 Javascript
js模拟实现百度搜索
2020/06/28 Javascript
JSON Web Tokens的实现原理
2017/04/02 Python
Python中函数及默认参数的定义与调用操作实例分析
2017/07/25 Python
基于python中pygame模块的Linux下安装过程(详解)
2017/11/09 Python
Python字符串格式化%s%d%f详解
2018/02/02 Python
Python装饰器用法实例总结
2018/02/07 Python
基于python3 OpenCV3实现静态图片人脸识别
2018/05/25 Python
Python装饰器知识点补充
2018/05/28 Python
Python2实现的图片文本识别功能详解
2018/07/11 Python
django 捕获异常和日志系统过程详解
2019/07/18 Python
python中@contextmanager实例用法
2021/02/07 Python
美国在线自行车商店:Jenson USA
2018/05/22 全球购物
艺术家策划的室内设计:Curious Egg
2019/03/06 全球购物
俄罗斯有趣和原创礼物网上商店:MagicMag
2019/08/01 全球购物
美体小铺波兰官方网站:The Body Shop波兰
2019/09/03 全球购物
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
办公室秘书自我鉴定
2014/01/18 职场文书
党员活动日总结
2014/05/05 职场文书
离婚案件原告代理词
2015/05/23 职场文书
开学典礼校长致辞
2015/07/29 职场文书
八年级作文之友谊
2019/12/02 职场文书
MySQL优化常用的19种有效方法(推荐!)
2022/03/17 MySQL
Spring中bean集合注入的方法详解
2022/07/07 Java/Android