直到有那么一天,我开始在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中静态类和非静态类的区别;当然也从中得知,使用静态类非静态类的效率上还是有些差别的,而且调用的时候肯定也是静态类方便一些,如果不计较引用冲突问题,我觉得静态类应该是首选的。
标签:
静态类,非静态类

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“JavaScript面向对象之静态与非静态类”

暂无“JavaScript面向对象之静态与非静态类”评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。