快捷導(dǎo)航

JavaScript面向?qū)ο笾o態(tài)與非靜態(tài)類

更新時間：2010年02月03日 16:23:45 作者：

使用JavaScript面向?qū)ο笸耆鲇谂既?，因為大部分時間我都是在無圖形界面的環(huán)境下工作，有時候就算是介入了web客戶端的工作的時候，在寫js和ajax時，最多的也只是寫寫function，從沒有考慮過要使用JavaScript面向?qū)ο筮@么高級的技巧。

直到有那么一天，我開始在js中拼湊DOM標簽，而且需要不停的拼湊，我發(fā)現(xiàn)我的代碼變得愈發(fā)的丑陋，不僅上是代碼簡潔的問題，甚至有時候還引發(fā)了性能問題。長此以往，不出三個月，上帝都將會不知道我寫過些什么，本篇的目的完全出于記錄使用心得。
首先，還是來看一下促使我改變書寫JavaScript習(xí)慣的垃圾代碼，在練習(xí)、測試、調(diào)試、甚至正式項目中，大量的充斥著下面的代碼。

復(fù)制代碼代碼如下:

 
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>”); 
} 

不要告訴我你沒有見過上面的代碼，說實話，上面的代碼確實寫得快，調(diào)用簡單，如果前兩個函數(shù)還不足以引發(fā)你的憤慨，那么第三個函數(shù)應(yīng)該讓你有點想問候?qū)戇@代碼創(chuàng)建者的沖動了。是的，第三個函數(shù)直接觸發(fā)了我決定使用面向?qū)ο蟆?
實際上，我完全可以把第三個函數(shù)改造成下面這樣。

復(fù)制代碼代碼如下:

 
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); 
} 

這樣如何？有進步吧，好，這就是我想要的代碼，但是還不夠簡潔。我希望可以把創(chuàng)建DOM對象封裝到一個類中，并且把以上的三個方法都裝到一個對象中；那好吧，動手起來是很簡單的事情，這種工作不需要上網(wǎng)搜索代碼和示例的，直接應(yīng)用C#的面向?qū)ο笏季S就可以完成。
首先是封裝以上的三個方法到一個對象中,封裝很簡單，應(yīng)該不用我多廢話的，直接上代碼。

封裝后的三個函數(shù)

復(fù)制代碼代碼如下:

 
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是一個靜態(tài)的類，無構(gòu)造函數(shù)或者構(gòu)造函數(shù)私有（我猜的），反正不可new了。
其次，我再創(chuàng)建一個封裝創(chuàng)建DOM對象的靜態(tài)類，代碼如下：

復(fù)制代碼代碼如下:

 
createElement={ 
element=function(targetName){return document.createElement(targetName);}, 
a=document. createElement(“a”) 
} 

相當(dāng)簡單，這樣我就可以測試一下上面的CreateElement對象是否可正常工作，這次測試是在append方法中進行測試。append方法再次被改造成下面的代碼。

復(fù)制代碼代碼如下:

 
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工作得相當(dāng)?shù)牧己?，好吧，我需要作出一點小改動，我需要在append函數(shù)中創(chuàng)建三個a并把它依次添加到obj對象中，代碼如下：

代碼

復(fù)制代碼代碼如下:

 
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); 
} 
} 

最后顯示的結(jié)果是obj對象中只得到了一個a我十分的不理解，這一個a讓我覺得我又回到了C#的懷抱，多么美好呀，經(jīng)過分析，當(dāng)我通過Var a= CreateElement .a;
第一次調(diào)用在CreateElement.a來獲取a對象時，a屬性中的document.createElement(“a”)就已經(jīng)把a對象駐留到內(nèi)存中，這之后不管我再怎么調(diào)用CreateElement.a，實際上都只是得到了內(nèi)存中a的一個引用，改變的都竟然是同一個對象，這就是靜態(tài)類的特別之處，但是，當(dāng)我通過調(diào)用CreateElement.element函數(shù)來獲取對象時，每次我得到的都是一個新的對象，方法不會保存對象的引用，這是肯定的，解決方法就是通過調(diào)用CreateElement.element函數(shù)來創(chuàng)建新的對象，但是這種方法非面向?qū)ο笸扑]。
另外一種比較好的解決辦法是使用非靜態(tài)類，即實體類的方式，創(chuàng)建非靜態(tài)類的方式也是相當(dāng)?shù)暮唵危a如下：

復(fù)制代碼代碼如下:

 
createElement=function(){ 
element=function(targetName){return document.createElement(targetName);}; 
a=document. createElement(“a”); 
} 

直接聲明createElement對象，并使之有構(gòu)造函數(shù)，成員間以分號進行分隔，當(dāng)然如果你喜歡，還可以直接這樣寫，也是沒有一樣的效果。

復(fù)制代碼代碼如下:

 
function createElement (){ 
element=function(targetName){return document.createElement(targetName);}; 
a=document. createElement(“a”); 
} 

經(jīng)過上面的聲明，我們就可以在append函數(shù)中像C#一樣使用createElement類來創(chuàng)建DOM對象了。

函數(shù)

復(fù)制代碼代碼如下:

 
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中靜態(tài)類和非靜態(tài)類的區(qū)別；當(dāng)然也從中得知，使用靜態(tài)類非靜態(tài)類的效率上還是有些差別的，而且調(diào)用的時候肯定也是靜態(tài)類方便一些，如果不計較引用沖突問題，我覺得靜態(tài)類應(yīng)該是首選的。

您可能感興趣的文章:

相關(guān)文章

JavaScript面向?qū)ο笤O(shè)計二構(gòu)造函數(shù)模式
在Javascript面向?qū)ο笤O(shè)計一——工廠模式中介紹了使用CreateEmployee（）函數(shù)創(chuàng)建員工類。ECMAScript中的構(gòu)造函數(shù)可以用來創(chuàng)建特定類型的對象，如Object和Array這樣的原生構(gòu)造函數(shù)，在運行時會自動出現(xiàn)在執(zhí)行環(huán)境中，此外也可以創(chuàng)建自定義的構(gòu)造函數(shù)，從而創(chuàng)建自定義對象類型的屬性和方法
2011-12-12
經(jīng)過前段時間，學(xué)習(xí)《ajax完全自學(xué)手冊》后，才知道javascript原來還可以這么寫。
2010-03-03