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方法再次被改造成下面的代碼。
