15條JavaScript最佳實踐很經典噢

感受比較經典，特轉載騰訊大講堂。本文檔整理大部分公認的、或者少有爭議的JavaScript良好書寫規範（Best Practice）。一些顯而易見的常識就再也不論述（好比要用對象支持識別判斷，而不是瀏覽器識別判斷；好比不要嵌套太深）。條目順序按重要級粗略的從高到低排列。

 

把外部JavaScript文件放在HTML底部

 

咱們的目標是相同的：爲用戶儘量快地顯示內容。當載入一個腳本文件的時候，HTML會中止解析，直到腳本載入完畢。所以，用戶可能會長時間對着一個空白的屏幕，看上去什麼都沒有發生。若是你的JavaScript代碼只是增長一些功能（好比按鈕的點擊動做），那麼儘管大膽地把文件引用放在HTML底部吧（就在</body>以前），你會看到明顯的速度提高。若是是用於其餘目的的腳本文件，則須要慎重地考慮。但不管如何，這毫無疑問是一個很是值得考慮的地方。

 

優化循環

 

循環遍歷一個數組

 

 

用盡可能簡短的代碼

 

若是能夠增長可讀性的話，那麼使用代碼的簡短格式是有意義的，下面是一份不徹底的列表：

 

 

單引號和雙引號

 

爲了不混亂，咱們建議在HTML中使用雙引號，在JavaScript中使用單引號。

 

 

避免混入其餘技術

 

CSS:假設咱們的頁面上有必須填入的輸入框（擁有class「mandatory」），若是它沒有被輸入數據，周圍就會加上紅色邊框。

 

 

HTML:假設咱們有內多HTML內容須要用JavaScript來載入，那麼使用Ajax載入單獨的文件，而不是經過JavaScript處理DOM，後者會讓代碼難以處理，而且出現難以維護的兼容性問題。

 

驗證JavaScript代碼

 

瀏覽器處理JavaScript代碼可能會很是寬容，但我建議你不要依賴瀏覽器的解析能力，所以養成了懶散的編碼習慣。

 

最簡單的檢測你的代碼質量的方法是經過一個在線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

 

 

老是檢查數據

 

要檢查你的方法輸入的全部數據，一方面是爲了安全性，另外一方面也是爲了可用性。用戶隨時隨地都會輸入錯誤的數據。這不是由於他們蠢，而是由於他們很忙，而且思考的方式跟你不一樣。用typeof方法來檢測你的function接受的輸入是否合法。

 

 

另外一個安全隱患是直接從DOM中取出數據使用。好比說你的function從用戶名輸入框中取得用戶名作某項操做，但用戶名中的單引號或者雙引號可能會致使你的代碼崩潰。

 

避免全局變量

 

全局變量和全局函數是很是糟糕的。由於在一個頁面中包含的全部JavaScript都在同一個域中運行。因此若是你的代碼中聲明瞭全局變量或者全局函數的話，後面的代碼中載入的腳本文件中的同名變量和函數會覆蓋掉（overwrite）你的。

 

 

聲明變量的話，老是用var

 

JavaScript中的變量多是全局域或者局部域，用var聲明的話會更加直觀。

 

 

使用前置+號來把字符串轉化爲數字

 

JavaScript中，「+」操做符即被用來做爲數字加，也被用來鏈接字符串。若是須要求表單中幾個值的和，那麼用+可能會出現問題。

 

 

 

避免使用eval()方法

 

JavaScript中的eval()方法是在運行時把任何代碼看成對象來計算/運行的方法。實際上因爲安全性的緣故，大部分狀況下都不該該用eval()，老是有一種更「正確」的方法來完成一樣的工做的。基本原則是，eval is evil，在任什麼時候候都不要用它，除非你是一個老手，而且知道你不得不這樣作。

 

for in語句

 

遍歷一個對象中的全部條目的時候，用for in語句是很是方便的。但有時候咱們不須要遍歷對象中的方法，若是不須要的話，能夠加上一條filter。

 

 

不要偷懶省略」和{}

 

從技術上說，你能夠忽略不少花括號和分號。

 

 

因此，要記住的原則是：1.永遠不要省略分號；2.不要省略花括號，除非在同一行中。

 

 

獲取對象屬性的時候用方括號而不是點號

 

在JavaScript中取得某對象的屬性有兩種方法：

 

 

若是是用點號標記取得對象的屬性，屬性名稱是硬編碼，沒法在運行時更改；而用方括號的話，JavaScript會求得方括號內值而後經過計算結果來求得屬性名。也就是說用方括號標記的方式，屬性名稱能夠是硬編碼的，也能夠是變量或者函數返回值。

 

 

假設JavaScript會被禁用

 

我知道這樣的假設會傷害JavaScript開發者的感情，但是在目前數據不明朗的狀況下咱們爲了安全起見應該作這樣的假設。這是漸進加強中很重要的一部分。

 

使用JavaScript庫

 

如今有不少很是流行的JavaScript庫，好比YUI和jQuery、Dojo。它們的缺點是須要下載一個額外的文件，優勢卻更多：兼容性更強；代碼更簡單易懂。好的庫有不少，但你不該該在一個項目中把它們都用上，由於可能存在兼容性問題。選擇一個本身習慣的就好。

 

不要忘記的一點是，原生的JavaScript毫無疑問更快，若是是小規模的使用，最好仍是用原生的。