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非法字符过滤代码(骂人的话等等)
May 26 Javascript
jquery插件之easing使用
Aug 19 Javascript
js监听输入框值的即时变化onpropertychange、oninput
Jul 13 Javascript
基于jQuery的前端数据通用验证库
Aug 08 Javascript
jQuery-serialize()输出序列化form表单值的方法
Dec 26 Javascript
JavaScript中的数学运算介绍
Dec 29 Javascript
javaScript中封装的各种写法示例(推荐)
Jul 03 Javascript
基于node.js express mvc轻量级框架实践
Sep 14 Javascript
详解利用Angular实现多团队模块化SPA开发框架
Nov 27 Javascript
Angular父组件调用子组件的方法
Apr 02 Javascript
实例详解BootStrap的动态模态框及静态模态框
Aug 13 Javascript
JavaScript 作用域实例分析
Oct 02 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 和 MySQL 基础教程(二)
2006/10/09 PHP
PHP下获取上个月、下个月、本月的日期(strtotime,date)
2014/02/02 PHP
php连接与操作PostgreSQL数据库的方法
2014/12/25 PHP
PHP编写简单的App接口
2016/08/28 PHP
php中各种定义变量的方法小结
2017/10/18 PHP
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
2018/09/03 PHP
Chrome中JSON.parse的特殊实现
2011/01/12 Javascript
JS 对输入框进行限制(常用的都有)
2013/07/30 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
2015/11/02 Javascript
javascript实现省市区三级联动下拉框菜单
2015/11/17 Javascript
js console.log打印对像与数组用法详解
2016/01/21 Javascript
js判断图片加载完成后获取图片实际宽高的方法
2016/02/25 Javascript
浅析JS原型继承与类的继承
2016/04/07 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
2016/06/07 Javascript
判断横屏竖屏(三种)
2017/02/13 Javascript
JavaScript函数参数的传递方式详解
2017/03/06 Javascript
jQuery中map函数的两种方式
2017/04/07 jQuery
js实现数字递增特效【仿支付宝我的财富】
2017/05/05 Javascript
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
解决vue 打包发布去#和页面空白的问题
2018/09/04 Javascript
[03:15]2014DOTA2国际邀请赛 专访国士无双信心满满
2014/07/12 DOTA
python中文乱码的解决方法
2013/11/04 Python
Python 基础教程之包和类的用法
2017/02/23 Python
Python 12306抢火车票脚本
2018/02/07 Python
关于python2 csv写入空白行的问题
2018/06/22 Python
python使用opencv驱动摄像头的方法
2018/08/03 Python
Python如何应用cx_Oracle获取oracle中的clob字段问题
2019/08/27 Python
在Python中利用pickle保存变量的实例
2019/12/30 Python
Python Tornado实现WEB服务器Socket服务器共存并实现交互的方法
2020/05/26 Python
python如何写出表白程序
2020/06/01 Python
Etam艾格英国官网:法国著名女装品牌
2019/04/15 全球购物
牛津在线药房:Oxford Online Pharmacy
2020/11/16 全球购物
电脑教师的教学自我评价
2013/11/26 职场文书
委托公证书
2014/04/08 职场文书
2015年学生资助工作总结
2015/05/25 职场文书
2016年教师节感言
2015/12/09 职场文书