JavaScript 七大實(shí)用技巧：輕松編程

當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流 →『技術(shù)文檔交流』

admin

2011年12月28日 23:18 本文熱度 3344

　　我寫(xiě)JavaScript代碼已經(jīng)很久了，都記不起是什么年代開(kāi)始的了。對(duì)于JavaScript這種語(yǔ)言近幾年所取得的成就，我感到非常的興奮;我很幸運(yùn)也是這些成就的獲益者。我寫(xiě)了不少的文章，章節(jié)，還有一本專(zhuān)門(mén)討論它的書(shū)，然而，我現(xiàn)在依然能發(fā)現(xiàn)一些關(guān)于這種語(yǔ)言的新知識(shí)。下面的描述的就是過(guò)去讓我不由得發(fā)出“啊!”的感嘆的編程技巧，這些技巧你應(yīng)該現(xiàn)在就試試，而不是等著未來(lái)的某個(gè)時(shí)候偶然的發(fā)現(xiàn)它們。

　　簡(jiǎn)潔寫(xiě)法

　　JavaScript里我最喜歡的一種東西就是生成對(duì)象和數(shù)組的簡(jiǎn)寫(xiě)方法。

　　在過(guò)去，如果你想創(chuàng)建一個(gè)對(duì)象，你需要這樣：

　　1 var car = new Object();

　　2 car.colour = "red";

　　3 car.wheels = 4;

　　4 car.hubcaps = "spinning";

　　5 car.age = 4;

　　下面的寫(xiě)法能夠達(dá)到同樣的效果：

　　1 var car = {

　　2 colour:"red",

　　3 wheels:4,

　　4 hubcaps:"spinning",

　　5 age:4

　　6 }

　　簡(jiǎn)單多了，你不需要反復(fù)使用這個(gè)對(duì)象的名稱(chēng)。

　　這樣 car 就定義好了，也許你會(huì)遇到 invalidUserInSession 的問(wèn)題，這只有你在使用IE時(shí)會(huì)碰到，只要記住一點(diǎn)，不要右大括號(hào)前面寫(xiě)分號(hào)，你就不會(huì)有麻煩。

　　另外一個(gè)十分方便的簡(jiǎn)寫(xiě)是針對(duì)數(shù)組的。

　　傳統(tǒng)的定義數(shù)組的方法是這樣：

　　1 var moviesThatNeedBetterWriters = new Array(

　　2 "Transformers","Transformers2","Avatar","Indiana Jones 4"

　　3 );

　　簡(jiǎn)寫(xiě)版的是這樣：

　　1 var moviesThatNeedBetterWriters = [

　　2 "Transformers","Transformers2","Avatar","Indiana Jones 4"

　　3 ];

　　對(duì)于數(shù)組，這里有個(gè)問(wèn)題，其實(shí)沒(méi)有什么圖組功能。但你會(huì)經(jīng)常發(fā)現(xiàn)有人這樣定義上面的 car ，就像這樣

　　1 var car = new Array();

　　2 car["colour"] = "red";

　　3 car["wheels"] = 4;

　　4 car["hubcaps"] = "spinning";

　　5 car["age"] = 4;

　　數(shù)組不是萬(wàn)能的;這樣寫(xiě)不對(duì)，會(huì)讓人困惑。圖組實(shí)際上是對(duì)象的功能，人們混淆了這兩個(gè)概念。

　　另外一個(gè)非?？岬暮?jiǎn)寫(xiě)方法是使用與三元條件符號(hào)。

　　你不必寫(xiě)成下面的樣子…

　　1 var direction;

　　3 direction = 1;

　　4 } else {

　　5 direction = -1;

　　6 }

　　你可以使用三元條件符號(hào)簡(jiǎn)化它：

　　1 var direction = x 200 ? 1 : -1;

　　當(dāng)條件為true 時(shí)取問(wèn)號(hào)后面的值，否則取冒號(hào)后面的值。

　　用 JSON 形式存儲(chǔ)數(shù)據(jù)

　　在我發(fā)現(xiàn)JSON之前，我使用各種瘋狂的方法把數(shù)據(jù)存貯在JavaScript固有的數(shù)據(jù)類(lèi)型里面，例如：數(shù)組，字符串，中間夾雜著容易進(jìn)行拆分的標(biāo)志符號(hào)以及其它的令人討厭的東西。

　　Douglas Crockford 發(fā)明了JSON 之后，一切全變了。

　　使用JSON，你可以使用JavaScript自有功能把數(shù)據(jù)存貯成復(fù)雜的格式，而且不需要再做其它的額外轉(zhuǎn)換，直接可以訪問(wèn)使用。

　　JSON 是 “JavaScript Object Notation” 的縮寫(xiě)，它用到了上面提到的兩種簡(jiǎn)寫(xiě)方法。

　　于是，如果你想描述一個(gè)樂(lè)隊(duì)，你可能會(huì)像這樣寫(xiě)：

　　01 var band = {

　　02 "name":"The Red Hot Chili Peppers",

　　03 "members":[

　　04 {

　　05 "name":"Anthony Kiedis",

　　06 "role":"lead vocals"

　　07 },

　　08 {

　　09 "name":"Michael "Flea" Balzary",

　　10 "role":"bass guitar, trumpet, backing vocals"

　　11 },

　　12 {

　　13 "name":"Chad Smith",

　　14 "role":"drums,percussion"

　　15 },

　　16 {

　　17 "name":"John Frusciante",

　　18 "role":"Lead Guitar"

　　19 }

　　20 ],

　　21 "year":"2009"

　　22 }

　　你可以在JavaScript里直接使用JSON，可以把它封裝在函數(shù)里，甚至作為一個(gè)API的返回值形式。

　　我們把這稱(chēng)作 JSON-P ，很多的API都使用這種形式。

　　你可以調(diào)用一個(gè)數(shù)據(jù)提供源，在script代碼里直接返回 JSON-P 數(shù)據(jù)：

　　這是調(diào)用 Delicious 網(wǎng)站提供的 Web service 功能，獲得JSON格式的最近的無(wú)序書(shū)簽列表。

　　基本上，JSON是最輕便的描述復(fù)雜數(shù)據(jù)結(jié)構(gòu)的方法，而且它能在瀏覽器里運(yùn)行。

　　你甚至可以在PHP里用 json_decode() 函數(shù)來(lái)運(yùn)行它。

　　JavaScript的自帶函數(shù)(Math, Array 和 String)

　　讓我感到驚奇的一個(gè)事情是，當(dāng)我研究了JavaScript里的math和String函數(shù)后，發(fā)現(xiàn)它們能極大的簡(jiǎn)化我的編程勞動(dòng)。

　　使用它們，你可以省去復(fù)雜的循環(huán)處理和條件判斷。

　　例如，當(dāng)我需要實(shí)現(xiàn)一個(gè)功能，找出數(shù)字?jǐn)?shù)組里最大的一個(gè)數(shù)時(shí)，我過(guò)去是這樣寫(xiě)出這個(gè)循環(huán)的，就像下面：

　　1 var numbers =

　　[3,342,23,22,124];

　　2 var max = 0;

　　3 for(var i=0;i

　　> max){

　　5 max = numbers[i];

　　6 }

　　7 }

　　8 alert(max);

　　我們不用循環(huán)也能實(shí)現(xiàn)：

　　1 var numbers =

　　[3,342,23,22,124];

　　2 numbers.sort(function(a,b){return b -

　　a});

　　3 alert(numbers[0]);

　　需要注意的是，你不能對(duì)一個(gè)數(shù)字字符數(shù)組進(jìn)行 sort() ，因?yàn)檫@種情況下它只會(huì)按照字母順序進(jìn)行排序。

　　如果你想知道更多的用法，可以閱讀這篇不錯(cuò)的關(guān)于 sort() 的文章。

　　再有一個(gè)有意思的函數(shù)就是 Math.max()。

　　這個(gè)函數(shù)返回參數(shù)里的數(shù)字里最大的一個(gè)數(shù)字：

　　1 Math.max(12,123,3,2,433,4); // returns 433

　　因?yàn)檫@個(gè)函數(shù)能夠校驗(yàn)數(shù)字，并返回其中最大的一個(gè)，所以你可以用它來(lái)測(cè)試瀏覽器對(duì)某個(gè)特性的支持情況：

　　1 var scrollTop=

　　Math.max(

　　2 doc.documentElement.scrollTop,

　　3 doc.body.scrollTop

　　4 );

　　這個(gè)是用來(lái)解決IE問(wèn)題的。你可以獲得當(dāng)前頁(yè)面的 scrollTop 值，但是根據(jù)頁(yè)面上 DOCTYPE 的不同，上面這兩個(gè)屬性中只有一個(gè)會(huì)存放這個(gè)值，而另外一個(gè)屬性會(huì)是 undefined，所以你可以通過(guò)使用 Math.max() 得到這個(gè)數(shù)。

　　閱讀這篇文章你會(huì)得到更多的關(guān)于使用數(shù)學(xué)函數(shù)來(lái)簡(jiǎn)化JavaScript的知識(shí)。

　　另外有一對(duì)非常有用的操作字符串的函數(shù)是 split() 和 join()。我想最有代表性的例子應(yīng)該是，寫(xiě)一個(gè)功能，用來(lái)給頁(yè)面元素附加CSS樣式。

　　是這樣的，當(dāng)你給頁(yè)面元素附加一個(gè)CSS class時(shí)，要么它是這個(gè)元素的第一個(gè)CSS class，或者是它已經(jīng)有了一些class

　　, 需要在已有的class后加上一個(gè)空格，然后追加上這個(gè)class。而當(dāng)你要去掉這個(gè)class時(shí)，你也需要去掉這個(gè)class前面的空格(這個(gè)在過(guò)去非常重要，因?yàn)橛行├系臑g覽器不認(rèn)識(shí)后面跟著空格的class)。

　　于是，原始的寫(xiě)法會(huì)是這樣：

　　1 function addclass(elm,newclass){

　　2 var c = elm.className;

　　3 elm.className = (c === "") ? newclass : c+" "+newclass;

　　4 }

　　你可以使用 split() 和 join() 函數(shù)自動(dòng)完成這個(gè)任務(wù)：

　　1 function addclass(elm,newclass){

　　2 var classes = elm.className.split(" ");

　　3 classes.push(newclass);

　　4 elm.className = classes.join(" ");

　　5 }

　　這會(huì)確保所有的class都被空格分隔，而且你要追加的class正好放在最后。