階段總結之—代碼風格

最近接手了公司一個新的項目，在大概看了一遍代碼之後覺得一些地方讓我看着有點難受，而且沒有太多註釋，不利於理解，所以就對自己看到的一些可以更合理的地方進行了改動。再結合之前自己寫過的一些不和規範的代碼，一起來做個總結。

1. 命名相關

• 不論是對變量命名，還是函數命名，又或者文件命名都要做到 語義化 ，爭取就算不做註釋別人也能一眼就看懂。在這個基礎上，再做到簡潔明瞭。縮寫可以有，但是不要用一些自我感覺良好的縮寫！後面過幾個月再看肯定想不起來這縮寫代表啥意思了。
• 組件名一定要語義化，讓人知道這個組件是幹啥的，下面這個完全看不出來是什麼意思。
• 如果是多個單詞要駝峯式命名。
• 特定的變量要適當的加註釋。
• 如果是Boolean值，在命名時最好以is/has/can 等開頭。
• 常量名大寫，如果是多個單詞用下劃線_相連。

2. JavaScript相關

if-else：

• 合理的使用 switch/數組/對象/循環 來代替較多的 if…else 語句。

switch (type) {
  case 'text':
    ...
    break
  case 'button':
    ...
    break
  case 'select':
    ...
    break
  default:
    ...
}

handler = {
  1: () => {}, // 記得return返回值
  2: () => {},
  3: () => {},
  default: () => {}
}
handler['1']() || handler['default']()

• 可以優先選一些條件分支，當進入這些分支之後，就立即退出這個函數。減少一些沒有用的 else 片段，簡化代碼。
• 如果條件分支語句太長，可以提煉成一個獨立的函數。

 

異常處理相關

• 在處理異步請求的時候，一定要對 response 中的數據進行異常處理。
• 在給變量賦值時，最好給一個默認兜底值。如：

  let name = person.name || ''
  let age = person.age || 1

   

優先使用函數式編程

• 普通的for循環可以用map, reduce, find等方法替代。 

函數相關

• 不寫太長的函數，儘量一個函數只實現一個邏輯。
• 儘量提取可複用的函數。
• 函數傳參時，傳遞對象參數代替傳遞過長的參數列表。
• 分辨併合理的使用return，break， continue。
• 功能函數最好爲純函數，只要輸入確定，保證輸出唯一。

遞歸函數相關

• 如果使用遞歸函數，最好改寫爲 尾遞歸 。（只存在一個調用幀，防止發生“棧溢出”錯誤）

 

3. Vue相關

• data中的屬性初始化時，不要所有都給默認值爲空字符串或者null，區分字符串，數字，空對象，數組，布爾值再賦值。
• props中的屬性聲明最好寫上接受類型。

 

目前想到的就這些了，後面如果碰到了其他情況再進行補充。