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 相关文章推荐
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
Dec 29 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
Jul 01 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
Oct 16 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
Mar 13 Javascript
JS创建对象几种不同方法详解
Mar 01 Javascript
详解JavaScript中数组的reduce方法
Dec 02 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
Feb 16 Javascript
浅谈Node框架接入ELK实践总结
Feb 22 Javascript
刷新页面后让控制台的js代码继续执行
Sep 20 Javascript
Vue路由的模块自动化与统一加载实现
Jun 05 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
Jul 31 Javascript
Vue与React的区别和优势对比
Dec 18 Vue.js
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面向对象全攻略 (十七) 自动加载类
2009/09/30 PHP
IIS7.X配置PHP运行环境小结
2011/06/09 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
php中Swoole的热更新实现代码实例
2021/03/04 PHP
JS弹出对话框返回值代码(asp.net后台)
2010/12/28 Javascript
Node.js+Express配置入门教程
2016/05/19 Javascript
AngularJS 输入验证详解及实例代码
2016/07/28 Javascript
微信小程序左滑删除效果的实现代码
2017/02/20 Javascript
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
微信小程序 页面滑动事件的实例详解
2017/10/12 Javascript
详解如何优雅地在React项目中使用Redux
2017/12/28 Javascript
浅谈Vue数据响应思路之数组
2018/11/06 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
详解微信小程序的不同函数调用的几种方法
2019/05/08 Javascript
JavaScript JSON使用原理及注意事项
2020/07/30 Javascript
[01:00:26]Ti4主赛事胜者组第一天 EG vs NEWBEE 1
2014/07/19 DOTA
python随机生成指定长度密码的方法
2015/04/04 Python
Python3中简单的文件操作及两个简单小实例分享
2017/06/18 Python
python 控制Asterisk AMI接口外呼电话的例子
2019/08/08 Python
使用Python制作新型冠状病毒实时疫情图
2020/01/28 Python
pycharm 中mark directory as exclude的用法详解
2020/02/14 Python
Linux系统下升级pip的完整步骤
2021/01/31 Python
销售辞职报告范文
2014/01/12 职场文书
护理专业学生职业生涯规划范文
2014/03/11 职场文书
给校长的建议书300字
2014/05/16 职场文书
党员承诺书格式
2014/05/21 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
2014购房个人委托书范本
2014/10/12 职场文书
小学四年级学生评语
2014/12/26 职场文书
项目合作意向书
2015/05/08 职场文书
迎新年主持词
2015/07/06 职场文书
新教师教学工作总结
2015/08/14 职场文书
2016应届毕业生实习心得体会
2015/10/09 职场文书
公司晚会主持词
2019/04/17 职场文书
使用CSS实现一个搜索引擎的原理解析
2021/09/25 HTML / CSS
关于的python五子棋的算法
2022/05/02 Python