來源:騰訊大講堂
本文檔整理大部分公認的、或者少有爭議的JavaScript良好書寫規(guī)范(Best Practice)。一些顯而易見的常識就不再論述(比如要用對象支持識別判斷,而不是瀏覽器識別判斷;比如不要嵌套太深)。條目順序按重要級粗略的從高到低排列。
把外部JavaScript文件放在HTML底部
我們的目標(biāo)是相同的:為用戶盡可能快地顯示內(nèi)容。當(dāng)載入一個腳本文件的時候,HTML會停止解析,直到腳本載入完畢。因此,用戶可能會長時間對著一個空白的屏幕,看上去什么都沒有發(fā)生。如果你的JavaScript代碼只是增加一些功能(比如按鈕的點擊動作),那么盡管大膽地把文件引用放在HTML底部吧(就在</body>之前),你會看到明顯的速度提升。如果是用于其他目的的腳本文件,則需要慎重地考慮。但無論如何,這毫無疑問是一個非常值得考慮的地方。
優(yōu)化循環(huán)
循環(huán)遍歷一個數(shù)組





用盡量簡短的代碼
如果可以增加可讀性的話,那么使用代碼的簡短格式是有意義的,下面是一份不完全的列表:






單引號和雙引號
為了避免混亂,我們建議在HTML中使用雙引號,在JavaScript中使用單引號。

避免混入其他技術(shù)
CSS:假設(shè)我們的頁面上有必須填入的輸入框(擁有class“mandatory”),如果它沒有被輸入數(shù)據(jù),周圍就會加上紅色邊框。


HTML:假設(shè)我們有內(nèi)多HTML內(nèi)容需要用JavaScript來載入,那么使用Ajax載入單獨的文件,而不是通過JavaScript處理DOM,后者會讓代碼難以處理,并且出現(xiàn)難以維護的兼容性問題。
驗證JavaScript代碼
瀏覽器處理JavaScript代碼可能會非常寬容,但我建議你不要依賴瀏覽器的解析能力,因此養(yǎng)成了懶散的編碼習(xí)慣。
最簡單的檢測你的代碼質(zhì)量的方法是通過一個在線JavaScript驗證工具JSLint。
“JSLint takes a JavaScript source and scans it. If it finds a problem, it returns a message describing the problem and an approximate location within the source. The problem is not necessarily a syntax error, although it often is. JSLint looks at some style conventions as well as structural problems. It does not prove that your program is correct. It just provides another set of eyes to help spot problems.”– JSLint Documentation
使用更簡單的格式來寫innerscript

總是檢查數(shù)據(jù)
要檢查你的方法輸入的所有數(shù)據(jù),一方面是為了安全性,另一方面也是為了可用性。用戶隨時隨地都會輸入錯誤的數(shù)據(jù)。這不是因為他們蠢,而是因為他們很忙,并且思考的方式跟你不同。用typeof方法來檢測你的function接受的輸入是否合法。


另一個安全隱患是直接從DOM中取出數(shù)據(jù)使用。比如說你的function從用戶名輸入框中取得用戶名做某項操作,但用戶名中的單引號或者雙引號可能會導(dǎo)致你的代碼崩潰。
避免全局變量
全局變量和全局函數(shù)是非常糟糕的。因為在一個頁面中包含的所有JavaScript都在同一個域中運行。所以如果你的代碼中聲明了全局變量或者全局函數(shù)的話,后面的代碼中載入的腳本文件中的同名變量和函數(shù)會覆蓋掉(overwrite)你的。



聲明變量的話,總是用var
JavaScript中的變量可能是全局域或者局部域,用var聲明的話會更加直觀。


使用前置+號來把字符串轉(zhuǎn)化為數(shù)字
JavaScript中,“+”操作符即被用來作為數(shù)字加,也被用來連接字符串。如果需要求表單中幾個值的和,那么用+可能會出現(xiàn)問題。


避免使用eval()方法
JavaScript中的eval()方法是在運行時把任何代碼當(dāng)作對象來計算/運行的方法。實際上由于安全性的緣故,大部分情況下都不應(yīng)該用eval(),總是有一種更“正確”的方法來完成同樣的工作的?;驹瓌t是,eval is evil,在任何時候都不要用它,除非你是一個老手,并且知道你不得不這樣做。
for in語句
遍歷一個對象中的所有條目的時候,用for in語句是非常方便的。但有時候我們不需要遍歷對象中的方法,如果不需要的話,可以加上一條filter。

不要偷懶省略”和{}
從技術(shù)上說,你可以忽略很多花括號和分號。

所以,要記住的原則是:1.永遠不要省略分號;2.不要省略花括號,除非在同一行中。

獲取對象屬性的時候用方括號而不是點號
在JavaScript中取得某對象的屬性有兩種方法:

如果是用點號標(biāo)記取得對象的屬性,屬性名稱是硬編碼,無法在運行時更改;而用方括號的話,JavaScript會求得方括號內(nèi)值然后通過計算結(jié)果來求得屬性名。也就是說用方括號標(biāo)記的方式,屬性名稱可以是硬編碼的,也可以是變量或者函數(shù)返回值。

假設(shè)JavaScript會被禁用
我知道這樣的假設(shè)會傷害JavaScript開發(fā)者的感情,可是在目前數(shù)據(jù)不明朗的情況下我們?yōu)榱税踩鹨姂?yīng)該做這樣的假設(shè)。這是漸進增強中很重要的一部分。
使用JavaScript庫
現(xiàn)在有很多非常流行的JavaScript庫,比如YUI和jQuery、Dojo。它們的缺點是需要下載一個額外的文件,優(yōu)點卻更多:兼容性更強;代碼更簡單易懂。好的庫有很多,但你不應(yīng)該在一個項目中把它們都用上,因為可能存在兼容性問題。選擇一個自己習(xí)慣的就好。
不要忘記的一點是,原生的JavaScript毫無疑問更快,如果是小規(guī)模的使用,最好還是用原生的。