優(yōu)秀的Stoyan Stefanov在他的新書中(《Javascript Patterns》)介紹了很多編寫高質(zhì)量代碼的技巧,比如避免使用全局變量,使用單一的var關(guān)鍵字,循環(huán)式預(yù)存長(zhǎng)度等等。
這篇文章不僅僅從代碼本身來(lái)考慮如何優(yōu)化編碼,也從代碼的設(shè)計(jì)階段來(lái)考慮,包括書寫API文檔,同事的review,使用JSLint。這些習(xí)慣都能幫助你編寫更加高質(zhì)量的、更易于理解的、可維護(hù)的代碼(讓你的代碼在多年之后仍使你引以為傲)。
軟件的BUG修復(fù)需要花費(fèi)大量的精力。尤其當(dāng)代碼已經(jīng)發(fā)布之后,隨著時(shí)間的增長(zhǎng),維護(hù)的成本愈發(fā)的高。當(dāng)你一發(fā)現(xiàn)BUG的時(shí)候,就立即去修復(fù),這時(shí)候你的代碼還是熱乎的,你也不需要回憶,因?yàn)榫褪莿倓倢懞玫摹5钱?dāng)你做了其他任務(wù),幾乎完全忘記了這份代碼,這時(shí)候就需要:
另外一個(gè)問(wèn)題是,在大項(xiàng)目或者大公司里面,經(jīng)常是解決BUG的人不是產(chǎn)生BUG的人,而且也不是發(fā)現(xiàn)BUG的人。所以減少理解代碼的時(shí)間就是最重要的問(wèn)題,無(wú)論這個(gè)代碼是你自己以前寫的還是團(tuán)隊(duì)中的其他成員寫的,因?yàn)槲覀兌枷肴ジ愀阈碌挠幸馑嫉臇|西,而不是去維護(hù)那些個(gè)陳舊的代碼。
還有一個(gè)開(kāi)發(fā)中的普遍問(wèn)題就是,往往讀代碼的時(shí)間比寫代碼的時(shí)間還要多。有時(shí)候你鉆研一個(gè)問(wèn)題,可以花整整一個(gè)下午的時(shí)間來(lái)考慮代碼的編寫。這個(gè)代碼當(dāng)時(shí)是可以工作的,但是隨著開(kāi)發(fā)的進(jìn)行,其他東西發(fā)生了很大的變化,這時(shí)候也就需要你自己來(lái)重新審查修改編寫代碼。比如:
因?yàn)檫@些原因,也許你當(dāng)時(shí)一個(gè)下午寫好的代碼,后面需要花費(fèi)幾周的時(shí)間來(lái)閱讀。所以編寫可維護(hù)的代碼對(duì)于軟件的成功至關(guān)重要。
可維護(hù)的代碼包括:
Javascript使用函數(shù)來(lái)約定作用域。一個(gè)在函數(shù)內(nèi)部聲明的變量在外部是不可見(jiàn)的。所以,全局變量也就是聲明在任何函數(shù)之外的或者沒(méi)有被聲明的變量。
Javascript中,在任何函數(shù)之外有個(gè)可訪問(wèn)的全局對(duì)象,每一個(gè)你創(chuàng)建的全局變量都是這個(gè)對(duì)象的一個(gè)屬性。在瀏覽器中,為了方便,通常用window來(lái)指代這個(gè)全局變量。下面的代碼就是說(shuō)明如何創(chuàng)建一個(gè)全局變量:
myglobal = "hello"; // antipatternconsole.log(myglobal); // "hello"console.log(window.myglobal); // "hello"console.log(window["myglobal"]); // "hello"console.log(this.myglobal); // "hello
全局變量的問(wèn)題在于,他在你的所有代碼或者一個(gè)頁(yè)面中都共享。他們?cè)谕粋€(gè)命名空間下面,這通常會(huì)造成變量名沖突–兩個(gè)同名的變量,但是確實(shí)不同的用處。
通常在一些頁(yè)面中需要引入一些其他人的代碼,比如:
加入其中一個(gè)第三方組件定義了一個(gè)全局變量:result。然后在你的程序中,也定義了一個(gè)全局變量result。最后的這個(gè)result會(huì)覆蓋點(diǎn)之前的result,這樣第三方的腳本就會(huì)停止工作。
所以,為了對(duì)其他的腳本友好,在一個(gè)頁(yè)面中使用越少的全局變量越好。在后面會(huì)有一些方法來(lái)告訴你如何減少全局變量,比如使用命名空間,或者自執(zhí)行的匿名函數(shù),但是最好的避免全局變量的方法就是使用var關(guān)鍵字來(lái)聲明變量。
因?yàn)閖avascript的兩個(gè)特性,創(chuàng)建一個(gè)全局變量非常的簡(jiǎn)單。第一,你可以使用一個(gè)甚至沒(méi)有聲明的變量,第二,在javascript中,所有未聲明的變量都會(huì)成為全局對(duì)象的一個(gè)屬性(就像一個(gè)聲明了的全局變量一樣)。看看這個(gè)例子:
function sum(x,y){ result = x + y; return result;}
在這個(gè)代碼中,result在沒(méi)有被聲明的情況下就被使用了,這個(gè)代碼也能很好的工作,但是在調(diào)用了這個(gè)函數(shù)之后,就會(huì)多一個(gè)名為result的全局變量,這是所有問(wèn)題的根源了。
解決這個(gè)問(wèn)題的辦法就是使用var: