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 相关文章推荐
JS input文本框禁用右键和复制粘贴功能的代码
Apr 15 Javascript
基于jquery的button默认enter事件(回车事件)。
May 18 Javascript
js继承call()和apply()方法总结
Dec 08 Javascript
JavaScript中number转换成string介绍
Dec 31 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
Jul 27 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
基于react后端渲染模板引擎noox发布使用
Jan 11 Javascript
element ui里dialog关闭后清除验证条件方法
Feb 26 Javascript
js闭包学习心得总结
Apr 17 Javascript
Vue+mui实现图片的本地缓存示例代码
May 24 Javascript
js如何获取图片url的Blob值并预览示例代码
Mar 07 Javascript
vue 中使用print.js导出pdf操作
Nov 13 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通过COM类调用组件的实现代码
2012/01/11 PHP
PHP缓冲区用法总结
2016/02/14 PHP
将PHP的session数据存储到数据库中的代码实例
2016/06/24 PHP
浅析JavaScript原型继承的陷阱
2013/12/03 Javascript
javascript 处理null及null值示例
2014/06/09 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
2015/02/10 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
2015/06/23 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
2015/09/28 Javascript
jQuery网页右侧广告跟随滚动代码分享
2020/04/20 Javascript
使用JQuery实现智能表单验证功能
2016/03/08 Javascript
BootStrap 模态框实现刷新网页并关闭功能
2017/01/04 Javascript
nodejs根据ip数组在百度地图中进行定位
2017/03/06 NodeJs
图解Javascript——作用域、作用域链、闭包
2017/03/21 Javascript
微信小程序 http请求的session管理
2017/06/07 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
2018/01/20 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
2018/03/01 Javascript
JS实现的JSON序列化操作简单示例
2018/07/02 Javascript
element-ui使用导航栏跳转路由的用法详解
2018/08/22 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
2020/09/02 Javascript
Python生成随机验证码的两种方法
2015/12/22 Python
R语言 vs Python对比:数据分析哪家强?
2017/11/17 Python
Python+OpenCV实现将图像转换为二进制格式
2020/01/09 Python
Python Pandas数据分析工具用法实例
2020/11/05 Python
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
2020/06/02 HTML / CSS
HTML5实现晶莹剔透的雨滴特效
2014/05/14 HTML / CSS
Notino希腊:购买香水和美容产品
2019/07/25 全球购物
手机业务员岗位职责
2013/12/13 职场文书
入党积极分子思想汇报范文
2014/01/05 职场文书
校园达人秀策划书
2014/01/12 职场文书
给小学生的新年寄语
2014/04/04 职场文书
寄语学生的话
2014/04/10 职场文书
放飞理想演讲稿
2014/09/09 职场文书
2014最新预备党员思想汇报范文:中国梦,我的梦
2014/10/25 职场文书
2014年妇女工作总结
2014/12/06 职场文书
2015年纪委工作总结
2015/05/13 职场文书
中秋节主题班会
2015/08/14 职场文书