您當前位置：首頁 > web前端 > jscript > JavaScript面向對象之靜態與非靜態類

JavaScript面向對象之靜態與非靜態類

來源：程序員人生發布時間：2014-03-25 19:33:32 閱讀次數：3237次

　　使用JavaScript面向對象完全出于偶然，因為大部分時間我都是在無圖形界面的環境下工作，有時候就算是介入了web客戶端的工作的時候，在寫js和ajax時，最多的也只是寫寫function，從沒有考慮過要使用JavaScript面向對象這么高級的技巧。直到有那么一天，我開始在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對象中，代碼如下：

　　代碼：

　　最后顯示的結果是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(){ 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對象了。

　　函數

　　這樣每次new createElement()都是一個新的對象，不存在引用的問題了。

　　實際上，上面提到的就是Javascript中靜態類和非靜態類的區別;當然也從中得知，使用靜態類非靜態類的效率上還是有些差別的，而且調用的時候肯定也是靜態類方便一些，如果不計較引用沖突問題，我覺得靜態類應該是首選的。

　　作者：老米　出處：http://www.cnblogs.com/viter/

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 SQL Server創新應用：COALESCE()函數

下一篇 如何在 Linux操作系統中收看直播

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

日本搞逼视频_黄色一级片免费在线观看_色99久久_性明星video另类hd_欧美77_综合在线视频

JavaScript面向對象之靜態與非靜態類