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)文章
JavaScript面向?qū)ο笤O(shè)計(jì)二 構(gòu)造函數(shù)模式
在Javascript面向?qū)ο笤O(shè)計(jì)一——工廠模式 中介紹了使用CreateEmployee（）函數(shù)創(chuàng)建員工類。ECMAScript中的構(gòu)造函數(shù)可以用來(lái)創(chuàng)建特定類型的對(duì)象，如Object和Array這樣的原生構(gòu)造函數(shù)，在運(yùn)行時(shí)會(huì)自動(dòng)出現(xiàn)在執(zhí)行環(huán)境中，此外也可以創(chuàng)建自定義的構(gòu)造函數(shù)，從而創(chuàng)建自定義對(duì)象類型的屬性和方法2011-12-12
javascript面向?qū)ο笕腴T基礎(chǔ)詳細(xì)介紹
本文章介紹了js中常用的對(duì)象包括有JavaScript對(duì)象簡(jiǎn)介 字符串對(duì)象 date() 數(shù)組 數(shù)學(xué)對(duì)象 函數(shù)對(duì)象 應(yīng)用介紹，有需要了解的同學(xué)可參考一下
2012-09-09 
面向?qū)ο蟮腏avascript之二(接口實(shí)現(xiàn)介紹)
接口是面向?qū)ο驤avascript工具箱中最有用的特性之一。我們都知道GOF在設(shè)計(jì)模式中說(shuō)到：面向接口編程，而非面向?qū)崿F(xiàn)編程
2012-01-01 
在上一遍我們簡(jiǎn)單的介紹了怎么樣使用JavaScript進(jìn)行構(gòu)造函數(shù)的書寫，現(xiàn)在來(lái)認(rèn)識(shí)下JavaScript的構(gòu)造函數(shù)其原理，主要是關(guān)注與原型的概念，首先看如下代碼。
2010-06-06 
下面對(duì)代碼的封裝是比較常用的，也比較好理解，只有先掌握了這些，才能更深入的了解面向?qū)τ谝约癹son格式的定義方法。
2010-04-04 
2009-07-07
Javascript 面向?qū)ο缶幊?coolshell)
Javascript是一個(gè)類C的語(yǔ)言，他的面向?qū)ο蟮臇|西相對(duì)于C++/Java比較奇怪，但是其的確相當(dāng)?shù)膹?qiáng)大，在 Todd 同學(xué)的“對(duì)象的消息模型”一文中我們已經(jīng)可以看到一些端倪了
2012-03-03 ![[推薦]javascript 面向?qū)ο蠹夹g(shù)基礎(chǔ)教程](http://img.jbzj.com/images/xgimg/bcimg8.png)
[推薦]javascript 面向?qū)ο蠹夹g(shù)基礎(chǔ)教程
看了很多介紹javascript面向?qū)ο蠹夹g(shù)的文章,很暈.為什么?不是因?yàn)閷懙貌缓?而是因?yàn)樘願(yuàn)W.
javascript中的對(duì)象還沒(méi)解釋清楚怎么回事,一上來(lái)就直奔主題,類/繼承/原型/私有變量....
2009-03-03 
javascript 模式設(shè)計(jì)之工廠模式學(xué)習(xí)心得
接口的實(shí)現(xiàn)，從而使不同子類可以被同等的對(duì)待,恰當(dāng)?shù)氖褂霉S模式,但不要拘泥與形式,理解本質(zhì)。
2010-04-04