JavaScript面向对象之静态与非静态类
2024-05-06 14:11:39
供稿：网友
直到有那么一天，我开始在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方法再次被改造成下面的代码。
