戳藍字「前端技術優選」關注我們哦！
作者 | Daniel Anderson
譯者 | 劉小夕
本文最初發布於 Medium 網站，經原作者授權後翻譯和分享。
編碼標準可以幫助以下方面：保持代碼一致
易於閱讀和理解
易於維護
下面的編碼標準是我對上述幾點有幫助的看法。
1. 比較時使用 === 代替 ==這很重要，因為JavaScript是一種動態語言，因此使用==可能會給您帶來意想不到的結果，因為它允許類型不同。
Fail：
if(val==2)Pass：
if(val===2)2. 永遠不要使用 var，使用 let 來代替使用let將有助於避免JavaScript中各種var引起的作用域問題。
Fail：
varmyVar=10;Pass：
letmyVar=10;3. 使用 const 代替 let這阻止了開發人員嘗試更改不應該做的事情，並且確實有助於提高可讀性。
Fail：
letVAT_PERCENT=20;Pass：
constVAT_PERCENT=20;4. 始終使用分號（;）儘管這在JavaScript中是可選的，並不像其它語言一樣需要分號作為語句終止符。但是使用;有助於使代碼保持一致。
Fail：
constVAT_PERCENT=20;letamount=10returnaddVat(amount,vatPercent)Pass：
constvatPercent=20;letamount=10;returnaddVat(amount,vatPercent);5. JavaScript中的命名約定let應該使用駝峰命名。
const如果在文件的頂部使用大寫的蛇形命名法。如果不在文件頂部，請使用駝峰命名。
class應該是帕斯卡命名法:MyClass
functions函數應該是駝峰命名法:myFunction
6. 拼接字符串時使用模板字符串模板字符串中允許嵌入表達式。
Fail：
letfullName=firstName+""+lastName;Pass：
letfullName=`${firstName}${lastName}`;7. 儘可能使用ES6箭頭函數箭頭函數是編寫函數表達式的更簡潔的語法。
Fail：
varmultiply=function(a,b){returna*b;};Pass：
constmultiply=(a,b)=>{returna*b};8. 始終在控制結構周圍使用大括號所有控制結構都必須使用花括號（例如，if，else，for，do，while等），這樣後期維護時，不容易出錯。
Fail：
if(valid)doSomething();if(amount>100)doSomething();elseif(amount>200)doSomethingElse();Pass：
if(valid){doSomething();}if(amount>100){doSomething();}elseif(amount>200){doSomethingElse();}9. 確保大括號從同一行開始，中間有空格Fail：
if(myNumber===0){doSomething();}Pass：
if(myNumber===0){doSomething();}10. 嘗試減少嵌套if中嵌套if會變得混亂並且很難閱讀。有時你可能無法解決問題，但是可以好好查看代碼，看看是否可以改進。
Fail：
if(myNumber>0){if(myNumber>100){if(!hasDiscountAlready){returnaddDiscountPercent(0);}else{returnaddDiscountPercent(10);}}elseif(myNumber>50){if(hasDiscountAlready){returnaddDiscountPercent(5);}}else{if(!hasDiscountAlready){returnaddDiscountPercent(0);}else{returnaddDiscountPercent(1);}}}else{error();}Pass：
if(myNumber<=0){returnerror;}if(!hasDiscountAlready){returnaddDiscountPercent(0);}if(myNumber>100){returnaddDiscountPercent(10);}if(myNumber>50){returnaddDiscountPercent(5);}returnaddDiscountPercent(1);通過上面的示例可以看出，減少嵌套之後，會變得容易閱讀。
11. 儘可能使用默認參數在JavaScript中，如果你在調用函數時沒有傳遞參數，則它的值就是undefined
Fail：
myFunction(a,b){returna+b;}Pass：
myFunction(a=0,b=0){returna+b;}12. `Switch` 語句應使用 `break` 並具有 `default`我通常會嘗試不使用switch語句，但是你確實想使用它，請確保每個條件都break，並寫了defalut。
Fail：
switch(myNumber){case10:addDiscountPercent(0);case20:addDiscountPercent(2);case30:addDiscountPercent(3);}Pass：
switch(myNumber){case10:addDiscountPercent(0);break;case20:addDiscountPercent(2);break;case30:addDiscountPercent(3);break;default:addDiscountPercent(0);break;}13. 不要使用通配符導入Fail：
import*asFoofrom'./Foo';Pass：
importFoofrom'./Foo';14. 使用布爾值的快捷方式Fail：
if(isValid===true)if(isValid===false)Pass：
if(isValid)if(!isValid)15. 嘗試避免不必要的三元語句Fail：
constboo=a?a:b;Pass：
constboo=a||b;總結任何語言的編碼標準都可以真正幫助提高應用程序的可讀性和可維護性。如果你在團隊中工作，那麼一件很難的事情就是強制執行編碼標準。這裡有一些建議可以幫助你：
代碼審查，逐行Pass代碼。
整理或使用某種代碼分析器
創建新內容時，讓你們的一位高級開發人員初始化，其他開發人員可以使用該代碼作為指導。
留言列表