JavaScript面向?qū)ο笾o態(tài)與非靜態(tài)類
更新時(shí)間：2010年02月03日 16:23:45 作者：
使用JavaScript面向?qū)ο笸耆鲇谂既唬驗(yàn)榇蟛糠謺r(shí)間我都是在無(wú)圖形界面的環(huán)境下工作，有時(shí)候就算是介入了web客戶端的工作的時(shí)候，在寫js和ajax時(shí)，最多的也只是寫寫function，從沒(méi)有考慮過(guò)要使用JavaScript面向?qū)ο筮@么高級(jí)的技巧。
直到有那么一天，我開(kāi)始在js中拼湊DOM標(biāo)簽，而且需要不停的拼湊，我發(fā)現(xiàn)我的代碼變得愈發(fā)的丑陋，不僅上是代碼簡(jiǎn)潔的問(wèn)題，甚至有時(shí)候還引發(fā)了性能問(wèn)題。長(zhǎng)此以往，不出三個(gè)月，上帝都將會(huì)不知道我寫過(guò)些什么，本篇的目的完全出于記錄使用心得。
首先，還是來(lái)看一下促使我改變書寫JavaScript習(xí)慣的垃圾代碼，在練習(xí)、測(cè)試、調(diào)試、甚至正式項(xiàng)目中，大量的充斥著下面的代碼。
Function finduser(userId)
{
}
Function showmessage(msg)
{
Var message=”提示，出錯(cuò)了，錯(cuò)誤原因”+msg;
Alert(message);
}
Function append(obj)
{
Var onclick=”createdom()”;
Var title=”你好”;
$(obj).append(“<a href='javascript:void(0)' onclick='”+onclick+”' title='”+title+”'>”+title+”</a>”);
}
不要告訴我你沒(méi)有見(jiàn)過(guò)上面的代碼，說(shuō)實(shí)話，上面的代碼確實(shí)寫得快，調(diào)用簡(jiǎn)單，如果前兩個(gè)函數(shù)還不足以引發(fā)你的憤慨，那么第三個(gè)函數(shù)應(yīng)該讓你有點(diǎn)想問(wèn)候?qū)戇@代碼創(chuàng)建者的沖動(dòng)了。是的，第三個(gè)函數(shù)直接觸發(fā)了我決定使用面向?qū)ο蟆?
實(shí)際上，我完全可以把第三個(gè)函數(shù)改造成下面這樣。
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);
}
這樣如何？有進(jìn)步吧，好，這就是我想要的代碼，但是還不夠簡(jiǎn)潔。我希望可以把創(chuàng)建DOM對(duì)象封裝到一個(gè)類中，并且把以上的三個(gè)方法都裝到一個(gè)對(duì)象中；那好吧，動(dòng)手起來(lái)是很簡(jiǎn)單的事情，這種工作不需要上網(wǎng)搜索代碼和示例的，直接應(yīng)用C#的面向?qū)ο笏季S就可以完成。
首先是封裝以上的三個(gè)方法到一個(gè)對(duì)象中,封裝很簡(jiǎn)單，應(yīng)該不用我多廢話的，直接上代碼。
封裝后的三個(gè)函數(shù)
User={
Function finduser(userId)
{
},
Function showmessage(msg)
{
Var message=”提示，出錯(cuò)了，錯(cuò)誤原因”+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);
}
}
只需要聲明一個(gè)User變量來(lái)存儲(chǔ)上面的三個(gè)方法即可，不同的方法間使用逗號(hào)分隔，需要注意的是，這時(shí)候的User是一個(gè)靜態(tài)的類，無(wú)構(gòu)造函數(shù)或者構(gòu)造函數(shù)私有（我猜的），反正不可new了。
其次，我再創(chuàng)建一個(gè)封裝創(chuàng)建DOM對(duì)象的靜態(tài)類，代碼如下：
createElement={
element=function(targetName){return document.createElement(targetName);},
a=document. createElement(“a”)
}
相當(dāng)簡(jiǎn)單，這樣我就可以測(cè)試一下上面的CreateElement對(duì)象是否可正常工作，這次測(cè)試是在append方法中進(jìn)行測(cè)試。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);
}
目前看來(lái)，append工作得相當(dāng)?shù)牧己茫冒?，我需要作出一點(diǎn)小改動(dòng)，我需要在append函數(shù)中創(chuàng)建三個(gè)a并把它依次添加到obj對(duì)象中，代碼如下：
代碼
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對(duì)象中只得到了一個(gè)a我十分的不理解，這一個(gè)a讓我覺(jué)得我又回到了C#的懷抱，多么美好呀，經(jīng)過(guò)分析，當(dāng)我通過(guò)Var a= CreateElement .a;
第一次調(diào)用在CreateElement.a來(lái)獲取a對(duì)象時(shí)，a屬性中的document.createElement(“a”)就已經(jīng)把a(bǔ)對(duì)象駐留到內(nèi)存中，這之后不管我再怎么調(diào)用CreateElement.a，實(shí)際上都只是得到了內(nèi)存中a的一個(gè)引用，改變的都竟然是同一個(gè)對(duì)象，這就是靜態(tài)類的特別之處，但是，當(dāng)我通過(guò)調(diào)用CreateElement.element函數(shù)來(lái)獲取對(duì)象時(shí)，每次我得到的都是一個(gè)新的對(duì)象，方法不會(huì)保存對(duì)象的引用，這是肯定的，解決方法就是通過(guò)調(diào)用CreateElement.element函數(shù)來(lái)創(chuàng)建新的對(duì)象，但是這種方法非面向?qū)ο笸扑]。
另外一種比較好的解決辦法是使用非靜態(tài)類，即實(shí)體類的方式，創(chuàng)建非靜態(tài)類的方式也是相當(dāng)?shù)暮?jiǎn)單，代碼如下：
createElement=function(){
element=function(targetName){return document.createElement(targetName);};
a=document. createElement(“a”);
}
直接聲明createElement對(duì)象，并使之有構(gòu)造函數(shù)，成員間以分號(hào)進(jìn)行分隔，當(dāng)然如果你喜歡，還可以直接這樣寫，也是沒(méi)有一樣的效果。
function createElement (){
element=function(targetName){return document.createElement(targetName);};
a=document. createElement(“a”);
}
經(jīng)過(guò)上面的聲明，我們就可以在append函數(shù)中像C#一樣使用createElement類來(lái)創(chuàng)建DOM對(duì)象了。
函數(shù)
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()都是一個(gè)新的對(duì)象，不存在引用的問(wèn)題了。
實(shí)際上，上面提到的就是Javascript中靜態(tài)類和非靜態(tài)類的區(qū)別；當(dāng)然也從中得知，使用靜態(tài)類非靜態(tài)類的效率上還是有些差別的，而且調(diào)用的時(shí)候肯定也是靜態(tài)類方便一些，如果不計(jì)較引用沖突問(wèn)題，我覺(jué)得靜態(tài)類應(yīng)該是首選的。
首先，還是來(lái)看一下促使我改變書寫JavaScript習(xí)慣的垃圾代碼，在練習(xí)、測(cè)試、調(diào)試、甚至正式項(xiàng)目中，大量的充斥著下面的代碼。
復(fù)制代碼 代碼如下:
Function finduser(userId)
{
}
Function showmessage(msg)
{
Var message=”提示，出錯(cuò)了，錯(cuò)誤原因”+msg;
Alert(message);
}
Function append(obj)
{
Var onclick=”createdom()”;
Var title=”你好”;
$(obj).append(“<a href='javascript:void(0)' onclick='”+onclick+”' title='”+title+”'>”+title+”</a>”);
}
不要告訴我你沒(méi)有見(jiàn)過(guò)上面的代碼，說(shuō)實(shí)話，上面的代碼確實(shí)寫得快，調(diào)用簡(jiǎn)單，如果前兩個(gè)函數(shù)還不足以引發(fā)你的憤慨，那么第三個(gè)函數(shù)應(yīng)該讓你有點(diǎn)想問(wèn)候?qū)戇@代碼創(chuàng)建者的沖動(dòng)了。是的，第三個(gè)函數(shù)直接觸發(fā)了我決定使用面向?qū)ο蟆?
實(shí)際上，我完全可以把第三個(gè)函數(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);
}
這樣如何？有進(jìn)步吧，好，這就是我想要的代碼，但是還不夠簡(jiǎn)潔。我希望可以把創(chuàng)建DOM對(duì)象封裝到一個(gè)類中，并且把以上的三個(gè)方法都裝到一個(gè)對(duì)象中；那好吧，動(dòng)手起來(lái)是很簡(jiǎn)單的事情，這種工作不需要上網(wǎng)搜索代碼和示例的，直接應(yīng)用C#的面向?qū)ο笏季S就可以完成。
首先是封裝以上的三個(gè)方法到一個(gè)對(duì)象中,封裝很簡(jiǎn)單，應(yīng)該不用我多廢話的，直接上代碼。
封裝后的三個(gè)函數(shù)
復(fù)制代碼 代碼如下:
User={
Function finduser(userId)
{
},
Function showmessage(msg)
{
Var message=”提示，出錯(cuò)了，錯(cuò)誤原因”+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);
}
}
只需要聲明一個(gè)User變量來(lái)存儲(chǔ)上面的三個(gè)方法即可，不同的方法間使用逗號(hào)分隔，需要注意的是，這時(shí)候的User是一個(gè)靜態(tài)的類，無(wú)構(gòu)造函數(shù)或者構(gòu)造函數(shù)私有（我猜的），反正不可new了。
其次，我再創(chuàng)建一個(gè)封裝創(chuàng)建DOM對(duì)象的靜態(tài)類，代碼如下：
復(fù)制代碼 代碼如下:
createElement={
element=function(targetName){return document.createElement(targetName);},
a=document. createElement(“a”)
}
相當(dāng)簡(jiǎn)單，這樣我就可以測(cè)試一下上面的CreateElement對(duì)象是否可正常工作，這次測(cè)試是在append方法中進(jìn)行測(cè)試。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);
}
目前看來(lái)，append工作得相當(dāng)?shù)牧己茫冒?，我需要作出一點(diǎn)小改動(dòng)，我需要在append函數(shù)中創(chuàng)建三個(gè)a并把它依次添加到obj對(duì)象中，代碼如下：
代碼
復(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對(duì)象中只得到了一個(gè)a我十分的不理解，這一個(gè)a讓我覺(jué)得我又回到了C#的懷抱，多么美好呀，經(jīng)過(guò)分析，當(dāng)我通過(guò)Var a= CreateElement .a;
第一次調(diào)用在CreateElement.a來(lái)獲取a對(duì)象時(shí)，a屬性中的document.createElement(“a”)就已經(jīng)把a(bǔ)對(duì)象駐留到內(nèi)存中，這之后不管我再怎么調(diào)用CreateElement.a，實(shí)際上都只是得到了內(nèi)存中a的一個(gè)引用，改變的都竟然是同一個(gè)對(duì)象，這就是靜態(tài)類的特別之處，但是，當(dāng)我通過(guò)調(diào)用CreateElement.element函數(shù)來(lái)獲取對(duì)象時(shí)，每次我得到的都是一個(gè)新的對(duì)象，方法不會(huì)保存對(duì)象的引用，這是肯定的，解決方法就是通過(guò)調(diào)用CreateElement.element函數(shù)來(lái)創(chuàng)建新的對(duì)象，但是這種方法非面向?qū)ο笸扑]。
另外一種比較好的解決辦法是使用非靜態(tài)類，即實(shí)體類的方式，創(chuàng)建非靜態(tài)類的方式也是相當(dāng)?shù)暮?jiǎn)單，代碼如下：
復(fù)制代碼 代碼如下:
createElement=function(){
element=function(targetName){return document.createElement(targetName);};
a=document. createElement(“a”);
}
直接聲明createElement對(duì)象，并使之有構(gòu)造函數(shù)，成員間以分號(hào)進(jìn)行分隔，當(dāng)然如果你喜歡，還可以直接這樣寫，也是沒(méi)有一樣的效果。
復(fù)制代碼 代碼如下:
function createElement (){
element=function(targetName){return document.createElement(targetName);};
a=document. createElement(“a”);
}
經(jīng)過(guò)上面的聲明，我們就可以在append函數(shù)中像C#一樣使用createElement類來(lái)創(chuàng)建DOM對(duì)象了。
函數(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()都是一個(gè)新的對(duì)象，不存在引用的問(wèn)題了。
實(shí)際上，上面提到的就是Javascript中靜態(tài)類和非靜態(tài)類的區(qū)別；當(dāng)然也從中得知，使用靜態(tài)類非靜態(tài)類的效率上還是有些差別的，而且調(diào)用的時(shí)候肯定也是靜態(tài)類方便一些，如果不計(jì)較引用沖突問(wèn)題，我覺(jué)得靜態(tài)類應(yīng)該是首選的。
相關(guān)文章
繼承是面向?qū)ο笾斜炔豢缮俚奶匦?，但javascript中并沒(méi)有繼承的概念機(jī)制，但我們可以自己來(lái)實(shí)現(xiàn)這種功能。2010-05-05
JavaScript 設(shè)計(jì)模式 安全沙箱模式
沙箱模式常見(jiàn)于YUI3 core,它是一種采用同一構(gòu)造器（Constructor）生成彼此獨(dú)立且互不干擾（self-contained）的實(shí)例對(duì)象，而從避免污染全局對(duì)象的方法2010-09-09
本文著重解析javascript類繼承機(jī)制，讓你從底層了解javascript是怎樣實(shí)現(xiàn)“繼承”這一概念的。2009-09-09
JavaScript 常見(jiàn)對(duì)象類創(chuàng)建代碼與優(yōu)缺點(diǎn)分析
這幾種javascript類定義方式中,最常用的是雜合prototype/constructor 和 動(dòng)態(tài)prototype方式。2009-12-12
面向?qū)ο蟮腏avascript之一(初識(shí)Javascript)
Javascript是一門極富表現(xiàn)力的語(yǔ)言，在當(dāng)今大行其道的Web浪潮中扮演著非常關(guān)鍵的作用。合理、高效地利用這門技術(shù)，可以讓我們的Web世界多姿多彩。首先，我們認(rèn)識(shí)一下這門技術(shù)的幾個(gè)獨(dú)特的特性2012-01-01
js類中獲取外部函數(shù)名的方法與代碼...2007-09-09
JavaScript 使用簡(jiǎn)略語(yǔ)法創(chuàng)建對(duì)象的代碼
JavaScript 使用簡(jiǎn)略語(yǔ)法創(chuàng)建對(duì)象的代碼 ，需要的朋友可以參考下。2010-01-01
js面向?qū)ο?多種創(chuàng)建對(duì)象方法小結(jié)
js面向?qū)ο?多種創(chuàng)建對(duì)象方法小結(jié)，需要的朋友可以參考下2012-05-05
研究了一下 jabsorb，寫了幾個(gè)簡(jiǎn)單的例子，希望能夠幫助菜鳥(niǎo)快速入門。2008-10-10
手把手教你自己寫一個(gè)js表單驗(yàn)證框架的方法
其實(shí)我自己也就能簡(jiǎn)單用用js而已，但是呢，相對(duì)很多初學(xué)者來(lái)說(shuō)多懂了點(diǎn)Know How所以斗膽孟浪一下，將一些所得記錄下來(lái)，以供更多的初學(xué)者能夠知道一個(gè)東西的實(shí)現(xiàn)過(guò)程，省去在源碼里摸索的過(guò)程。2010-09-09