JavaScript幾點編碼規範的說明

本文主要介紹提高代碼質量的JavaScript幾點編碼規範

- JavaScript幾點編碼規範的說明

1. 在每個函數的開頭部分聲明所有變量

直接使用未經聲明的變量，JavaScript會將這種變量作爲隱式全局變量處理，所以忘記聲明變量會導致全局變量污染。
JavaScript採用了塊語法卻沒有提供塊作用域，JavaScript的作用域爲函數作用域。所以在每個函數開頭部分聲明所有變量是更好的方式。

2. “{”放在上一行的尾部而不是下一行的頭部

JavaScript有一個自動修復機制，通過自動插入分好來修正有缺損的程序，但有時這會導致錯誤。比如：
return { status: true };

自動插入分號會導致返回undefined:
return; { status: true };

所以應該將“{”放在上一行尾部避免這種問題：
return{ status: true };

3. 判斷null類型不能直接用typeof

typeof null 返回“object”而不是“null”，typeof無法區別null與對象，但null值爲假，所有對象值爲真，所以可以這樣判斷：
if(my_value && typeof my_value === 'object'){...}
或者直接判斷 my_value===null

4. parseInt方法應該加上基數參數

parseInt將字符串轉換爲整數，但遇到非數字時會停止解析，parseInt(“16”)和parseInt(“16 tons”) 產生相同結果。而如果字符串第一個字符爲“0”，會基於八進制進行解析，parseInt(“08”)會返回0作爲結果。所以加上基數參數parseInt(“08”,10)會返回正確的十進制結果8。

5. 判斷是否爲數字不能直接用typeof

NaN是一個特殊的數量值，表示的不是一個數字，但typeof NaN === 'number' 卻返回true,試圖轉換非數字形式字符串爲數字時會產生NaN, parseInt(‘str’)返回NaN。typeof不能辨別數字和NaN，而且NaN不等於自身：NaN === NaN返回false。isNaN函數可以辨別數字與NaN。但判斷數字的最佳方式是使用isFinite函數，它會篩除掉NaN和Infinity(無窮大)：var isNumber = function isNumber(value){return typeof value ==='number' && isFinite(value);}

6. 辨別數組和對象不能直接typeof

typeof數組返回的是‘object’,因爲JavaScript沒有真正的數組。判斷數組還需要檢查constructor屬性：
if(my_value && typeof my_value === 'object' && my_value.constructor === Array){...}
但以上方法對於不同幀或窗口創建的數組將會返回false,以下爲可能出現這種狀況時更可靠的檢測方法：
if(Object.prototype.toString.apply(my_value) === '[object Array]'){...}

7. 假值之間不可互換

值	類型
0	number
NaN	number
”	string
false	boolean
null	object
undefined	undefined

以上均爲假值，即if(*)判斷爲假。但它們之間不可互換。用“==”這種不可靠地方式會強制轉換，且會產生不確定的結果。比如：”==null 返回false,undefined==null 返回true。所以要避免假值之間的互換，而且不要使用‘==’應該使用‘===‘。

8. 避免使用with語句

JavaScript提供的with語句結果有時不可預料，應當避免使用。
比如：with(obj){a=b;}和下面的代碼做同樣的事情：

if(obj.a===undefined){
    a=obj.b===undefined?b:obj.b;
}else{
    obj.a=obj.b===undefined?b:obj.b;
}

所以無法確定代碼會執行想要的事情。with嚴重影響了JavaScript處理速度，因爲阻斷了詞法作用域綁定。

9. 避免使用eval函數

eval函數傳遞一個字符串給JavaScript編譯器，並且執行其結果。
比如：eval("myValue = myObject." + myKey +";");
只是執行了一條檢索賦值語句，但eval使程序性能顯著降低，因爲需要運行編譯器，且可讀性較差。
另外eval函數還降低了程序安全性，因爲它給了字符串參數太多權利。window的setTimeout和setInterval函數同樣可以接受字符串參數，應該避免使用，儘量使用函數參數。

10. if、while、do和for語句應該使用代碼塊

if、while、do和for語句可以接受花括號代碼塊，也可以接受單行語句。
比如：

if(ok)
    t=true;
    advance();

本意是：

if(ok){
    t=true;
}
advance();

單行語句模糊了程序的結構，很容易出錯，應該避免使用。

11. 避免使用++、–和位運算符

遞增、遞減運算符會造成代碼擁擠、複雜和隱晦，很容易造成錯誤，應當避免使用，可使用類似 i+=1替代。
JavaScript沒有整數型，只有雙精度浮點型，位操作符將運算數先轉換成整數再執行運算，然後再轉換回去。且JavaScript執行環境接觸不到硬件，比一般語言執行速度慢，所以使用位運算會非常慢。

12. function語句應該放在函數塊中，function表達式括在”（）“中

function語句在解析時會發生被提升的情況，不管function放置在哪裏都會被移動到被定義時所在的作用域頂層，大多數瀏覽器允許if語句中使用function語句，但解析時處理各不相同。應當避免在if語句中使用function語句。另外避免在循環中創建函數，只在函數塊中定義函數。
而一個語句不能以function表達式開頭，因爲會解析爲function語句，解決辦法爲把表達式放在圓括號中執行：

（function(){
    var value;
    ...
}()）;

13. 避免使用new和void

new創建一個繼承於原型的新對象，this綁定到新對象，如果忘記使用new
就是普通的函數調用，this綁定到全局對象而不是新創建的對象，會造成全局變量污染（且沒有警告）。可以以首字母大寫命名的方式命名構造器函數，但更好的策略是避免使用new。另外JavaScript有一套類型包裝對象new Boolean、new Array,但完全沒有必要使用，可用{}和[]代替。
JavaScript中void運算符接受一個運算數並返回undefined，沒什麼實際作用，且令人困惑，應當避免使用。

本文引用自《JavaScript 語言精粹》

之前的一篇文章，JavaScript需要避免的問題總結

另外可以使用JSHint工具用來規範自己的代碼，並對不規範的代碼給出提示和警告，JSHint可以自由配置規範，配置項可參考http://jshint.com/docs/options/
本人使用vscode編輯JavaScript代碼，vscode配置JSHint可參考另一篇文章：vscode配置JSHint提示工具
可以使用ECMAscript 5 strict mode嚴格模式來提升代碼質量，strict mode可以講常見編碼不規範轉化爲錯誤拋出，強制編碼人員養成良好的編碼習慣，避免產生錯誤，並可以提高編譯器效率，增加程序運行速度。嚴格模式可參考https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode

JavaScript幾點編碼規範的說明