15個簡單的JS編碼標準讓你的程式碼更整潔(小結)
作者 | Daniel Anderson
本文最初發佈於 Medium 網站，經原作者授權後翻譯和分享。
編碼標準可以幫助以下方面：
- 保持程式碼一致
- 易於閱讀和理解
- 易於維護
下面的編碼標準是我對上述幾點有幫助的看法。
1. 比較時使用 === 代替 ==
這很重要，因為JavaScript是一種動態語言，因此使用==可能會給您帶來意想不到的結果，因為它允許型別不同。
Fail：
if (val == 2)
Pass：
if (val === 2)
2. 永遠不要使用 var，使用 let 來代替
使用 let 將有助於避免 JavaScript 中各種 var 引起的作用域問題。
var myVar = 10;
Pass：
let myVar = 10;
3. 使用 const 代替 let
這阻止了開發人員嘗試更改不應該做的事情，並且確實有助於提高可讀性。
Fail：
let VAT_PERCENT = 20;
Pass：
const VAT_PERCENT = 20;
4. 始終使用分號（;）
儘管這在 JavaScript 中是可選的，並不像其它語言一樣需要分號作為語句終止符。但是使用 ; 有助於使程式碼保持一致。
Fail：
const VAT_PERCENT = 20; let amount = 10 return addVat(amount,vatPercent)
Pass：
const vatPercent = 20; let amount = 10; return addVat(amount,vatPercent);
5. JavaScript中的命名約定
- let 應該使用駝峰命名。
- const 如果在檔案的頂部使用大寫的蛇形命名法。如果不在檔案頂部，請使用駝峰命名。
- class 應該是帕斯卡命名法:MyClass
- functions 函式應該是駝峰命名法:myFunction
6. 拼接字串時使用模板字串
模板字串中允許嵌入表示式。
Fail：
let fullName = firstName + " " + lastName;
Pass：
let fullName = `${firstName} ${lastName}`;
7. 儘可能使用ES6箭頭函式
箭頭函式是編寫函式表示式的更簡潔的語法。
Fail：
var multiply = function(a,b) {
return a* b;
};
Pass：
const multiply = (a,b) => { return a * b};
8. 始終在控制結構周圍使用大括號
所有控制結構都必須使用花括號（例如，if，else，for，do，while等），這樣後期維護時，不容易出錯。
Fail：
if (valid) doSomething(); if (amount > 100) doSomething(); else if(amount > 200) doSomethingElse();
Pass：
if (valid) {
doSomething();
}
if (amount > 100) {
doSomething();
}
else if(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) {
return a + b;
}
Pass：
myFunction(a = 0,b = 0) {
return a + b;
}
12. `Switch` 語句應使用 `break` 並具有 `default`
我通常會嘗試不使用 switch 語句，但是你確實想使用它，請確保每個條件都 break ，並寫了 defalut。
Fail：
switch (myNumber)
{
case 10:
addDiscountPercent(0);
case 20:
addDiscountPercent(2);
case 30:
addDiscountPercent(3);
}
Pass：
switch(myNumber)
{
case10:
addDiscountPercent(0);
break;
case20:
addDiscountPercent(2);
break;
case30:
addDiscountPercent(3);
break;
default:
addDiscountPercent(0);
break;
}
13. 不要使用萬用字元匯入
Fail：
import * as Foo from './Foo';
Pass：
import Foo from './Foo';
14. 使用布林值的快捷方式
Fail：
if (isValid === true) if (isValid === false)
Pass：
if (isValid) if (!isValid)
15. 嘗試避免不必要的三元語句
Fail：
const boo = a ? a : b;
Pass：
const boo = a || b;
總結
任何語言的編碼標準都可以真正幫助提高應用程式的可讀性和可維護性。如果你在團隊中工作，那麼一件很難的事情就是強制執行編碼標準。這裡有一些建議可以幫助你：
- 程式碼審查，逐行Pass程式碼。
- 整理或使用某種程式碼分析器
- 建立新內容時，讓你們的一位高階開發人員初始化，其他開發人員可以使用該程式碼作為指導。
原文連結: https://medium.com/javascript-in-plain-english/19-simple-javascript-coding-standards-to-keep-your-code-clean-7422d6f9bc0
到此這篇關於15個簡單的JS編碼標準讓你的程式碼更整潔(小結)的文章就介紹到這了,更多相關JS編碼標準內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！