av激情亚洲男人的天堂国语,日韩欧美精品一中文字幕,无码av一区二区三区无码,国产又色又爽又刺激的a片,国产又色又爽又刺激的a片

15個簡單的JS編碼標準讓你的代碼更整潔

編碼標準可以幫助以下方面：

  • 保持代碼一致
  • 易于閱讀和理解
  • 易于維護

下面的編碼標準是我對上述幾點有幫助的看法。

1. 比較時使用 === 代替 ==

這很重要，因為JavaScript是一種動態(tài)語言，因此使用==可能會給您帶來意想不到的結果，因為它允許類型不同。

Fail：

 
 
 
      
  
  
  1. if (val == 2) 
    2.

Pass：

 
 
 
      
  
  
  1. if (val === 2) 
    2.

2. 永遠不要使用 var，使用 let 來代替

使用 let 將有助于避免 JavaScript 中各種 var 引起的作用域問題。

Fail：

 
 
 
      
  
  
  1. var myVar = 10; 
    2.

Pass：

 
 
 
      
  
  
  1. let myVar = 10; 
    2.

3. 使用 const 代替 let

這阻止了開發(fā)人員嘗試更改不應該做的事情，并且確實有助于提高可讀性。

Fail：

 
 
 
      
  
  
  1. let VAT_PERCENT = 20; 
    2.

Pass：

 
 
 
      
  
  
  1. const VAT_PERCENT = 20; 
    2.

4. 始終使用分號(;)

盡管這在 JavaScript 中是可選的，并不像其它語言一樣需要分號作為語句終止符。但是使用 ; 有助于使代碼保持一致。

Fail：

 
 
 
      
  
  
  1. const VAT_PERCENT = 20; 
    2.   
  
  
  2. let amount = 10 
    3.   
  
  
  3. return addVat(amount, vatPercent) 
    4.

Pass：

 
 
 
      
  
  
  1. const vatPercent = 20; 
    2.   
  
  
  2. let amount = 10; 
    3.   
  
  
  3. return addVat(amount, vatPercent); 
    4.

5. JavaScript中的命名約定

  • let 應該使用駝峰命名。
  • const 如果在文件的頂部使用大寫的蛇形命名法。如果不在文件頂部，請使用駝峰命名。
  • class 應該是帕斯卡命名法:MyClass
  • functions 函數應該是駝峰命名法:myFunction

6. 拼接字符串時使用模板字符串

模板字符串中允許嵌入表達式。

Fail：

 
 
 
      
  
  
  1. let fullName = firstName + " " + lastName; 
    2.

Pass：

 
 
 
      
  
  
  1. let fullName = `${firstName} ${lastName}`; 
    2.

7. 盡可能使用ES6箭頭函數

箭頭函數是編寫函數表達式的更簡潔的語法。

Fail：

 
 
 
      
  
  
  1. var multiply = function(a, b) { 
    2.   
  
  
  2.   return a* b; 
    3.   
  
  
  3. }; 
    4.

Pass：

 
 
 
      
  
  
  1. const multiply = (a, b) => { return a * b}; 
    2.

8. 始終在控制結構周圍使用大括號

所有控制結構都必須使用花括號(例如，if，else，for，do，while等)，這樣后期維護時，不容易出錯。

Fail：

 
 
 
      
  
  
  1. if (valid) 
    2.   
  
  
  2.    doSomething(); 
    3.   
  
  
  3. if (amount > 100)  
    4.   
  
  
  4.     doSomething(); 
    5.   
  
  
  5. else if(amount > 200) 
    6.   
  
  
  6.     doSomethingElse(); 
    7.

Pass：

 
 
 
      
  
  
  1. if (valid) { 
    2.   
  
  
  2.    doSomething(); 
    3.   
  
  
  3. } 
    4.   
  
  
  4. if (amount > 100) { 
    5.   
  
  
  5.    doSomething(); 
    6.   
  
  
  6. }  
    7.   
  
  
  7. else if(amount > 200) { 
    8.   
  
  
  8.     doSomethingElse(); 
    9.   
  
  
  9. } 
    10.

9. 確保大括號從同一行開始，中間有空格

Fail：

 
 
 
      
  
  
  1. if (myNumber === 0) 
    2.   
  
  
  2. { 
    3.   
  
  
  3.     doSomething(); 
    4.   
  
  
  4. } 
    5.

Pass：

 
 
 
      
  
  
  1. if (myNumber === 0) { 
    2.   
  
  
  2.     doSomething(); 
    3.   
  
  
  3. } 
    4.

10. 嘗試減少嵌套

if 中嵌套if 會變得混亂并且很難閱讀。有時你可能無法解決問題，但是可以好好查看代碼，看看是否可以改進。

Fail：

 
 
 
      
  
  
  1. if (myNumber > 0) { 
    2.   
  
  
  2.   if (myNumber > 100) { 
    3.   
  
  
  3.        if (!hasDiscountAlready) { 
    4.   
  
  
  4.            return addDiscountPercent(0); 
    5.   
  
  
  5.        } else { 
    6.   
  
  
  6.            return addDiscountPercent(10); 
    7.   
  
  
  7.        } 
    8.   
  
  
  8.   } else if (myNumber > 50) { 
    9.   
  
  
  9.     if (hasDiscountAlready) { 
    10.   
  
  
  10.        return addDiscountPercent(5); 
    11.   
  
  
  11.     } 
    12.   
  
  
  12.   } else { 
    13.   
  
  
  13.     if (!hasDiscountAlready) { 
    14.   
  
  
  14.       return addDiscountPercent(0); 
    15.   
  
  
  15.     } else { 
    16.   
  
  
  16.       return addDiscountPercent(1); 
    17.   
  
  
  17.     } 
    18.   
  
  
  18.   } 
    19.   
  
  
  19. } else { 
    20.   
  
  
  20.      error(); 
    21.   
  
  
  21. } 
    22.

Pass：

 
 
 
      
  
  
  1. if (myNumber <= 0) { 
    2.   
  
  
  2.    return error; 
    3.   
  
  
  3. } 
    4.   
  
  
  4. if (!hasDiscountAlready) { 
    5.   
  
  
  5.     return addDiscountPercent(0); 
    6.   
  
  
  6. } 
    7.   
  
  
  7. if (myNumber > 100) {  
    8.   
  
  
  8.     return addDiscountPercent(10); 
    9.   
  
  
  9. } 
    10.   
  
  
  10. if (myNumber > 50) {  
    11.   
  
  
  11.     return addDiscountPercent(5); 
    12.   
  
  
  12. } 
    13.   
  
  
  13. return addDiscountPercent(1); 
    14.

通過上面的示例可以看出，減少嵌套之后，會變得容易閱讀。

11. 盡可能使用默認參數

在 JavaScript 中，如果你在調用函數時沒有傳遞參數，則它的值就是 undefined

Fail：

 
 
 
      
  
  
  1. myFunction(a, b) { 
    2.   
  
  
  2.   return a + b; 
    3.   
  
  
  3. } 
    4.

Pass：

 
 
 
      
  
  
  1. myFunction(a = 0, b = 0) {  
    2.   
  
  
  2.    return a + b; 
    3.   
  
  
  3. } 
    4.

12. `Switch` 語句應使用 `break` 并具有 `default`

我通常會嘗試不使用 switch 語句，但是你確實想使用它，請確保每個條件都 break ，并寫了 defalut。

Fail：

 
 
 
      
  
  
  1. switch (myNumber) 
    2.   
  
  
  2. { 
    3.   
  
  
  3.   case 10:  
    4.   
  
  
  4.    addDiscountPercent(0); 
    5.   
  
  
  5.   case 20:  
    6.   
  
  
  6.    addDiscountPercent(2); 
    7.   
  
  
  7.   case 30: 
    8.   
  
  
  8.    addDiscountPercent(3); 
    9.   
  
  
  9. } 
    10.

Pass：

 
 
 
      
  
  
  1. switch (myNumber) 
    2.   
  
  
  2. { 
    3.   
  
  
  3.   case 10:  
    4.   
  
  
  4.     addDiscountPercent(0); 
    5.   
  
  
  5.     break; 
    6.   
  
  
  6.   case 20:  
    7.   
  
  
  7.     addDiscountPercent(2); 
    8.   
  
  
  8.     break; 
    9.   
  
  
  9.   case 30: 
    10.   
  
  
  10.     addDiscountPercent(3); 
    11.   
  
  
  11.     break; 
    12.   
  
  
  12.   default:  
    13.   
  
  
  13.     addDiscountPercent(0); 
    14.   
  
  
  14.     break; 
    15.   
  
  
  15. } 
    16.

13. 不要使用通配符導入

Fail：

 
 
 
      
  
  
  1. import * as Foo from './Foo'; 
    2.

Pass：

 
 
 
      
  
  
  1. import Foo from './Foo'; 
    2.

14. 使用布爾值的快捷方式

Fail：

 
 
 
      
  
  
  1. if (isValid === true) 
    2.   
  
  
  2. if (isValid === false) 
    3.

Pass：

 
 
 
      
  
  
  1. if (isValid) 
    2.   
  
  
  2. if (!isValid) 
    3.

15. 嘗試避免不必要的三元語句

Fail：

 
 
 
      
  
  
  1. const boo = a ? a : b; 
    2.

Pass：

 
 
 
      
  
  
  1. const boo = a || b; 
    2.

總結

任何語言的編碼標準都可以真正幫助提高應用程序的可讀性和可維護性。如果你在團隊中工作，那么一件很難的事情就是強制執(zhí)行編碼標準。這里有一些建議可以幫助你：

  • 代碼審查，逐行Pass代碼。
  • 整理或使用某種代碼分析器
  • 創(chuàng)建新內容時，讓你們的一位高級開發(fā)人員初始化，其他開發(fā)人員可以使用該代碼作為指導。

網頁題目：15個簡單的JS編碼標準讓你的代碼更整潔
文章來源：http://uogjgqi.cn/article/dhoogdg.html
掃二維碼與項目經理溝通

我們在微信上24小時期待你的聲音

解答本文疑問/技術咨詢/運營咨詢/技術建議/互聯網交流