一些寫程式碼的習慣

本篇將講述一下，我在重構專案的過程中總結的一些良好的程式碼習慣。

一. 可讀性強的命名

命名是提高程式碼可讀性的第一步，也是極其重要的一步，不僅在js裡要命名變數名、函式名，還要在CSS裡給命名class、id，給圖片命名。好的變數名要完全、準確地描述出該變數所代表的事物。下面是一些命名的規則：

1. 以問題為導向
   一個好記的變數名反映的通常都是問題，而不是解決方案。一個好名字通常表達的是“什麼（what）”，而不是“如何（how）”。

          2. 最適當的名字長度

              研究發現，當變數名的平均長度在10到16個字元的時候，除錯程式所需花費的力氣是最小的（1990）。平均名字長度在8到20個字元的程式也幾乎同樣容易除錯。這項原則並不意味著你應該儘量把變數名控制在9到15或者10到16個字元長。它強調的是，如果你檢視自己寫的程式碼時發現了很多更短名字，那麼你需要認真檢查，確保這些名字含義足夠清晰。

表1：變數名太長、太短或更好合適的示例

太長	太短	正好
numberOfPeopleOnTheUsOlympicTeam, numberOfSeatsInTheStadium, maximumNumberOfPointsInModernOlympics	n, np, ntm n, ms, nsisd m,mp,max,points	numTeamMembers, teamMemberCount numSeatsInStadium, seatCount teamPontMax,pointsRecodrd

note: 並不是所有短的變數名都不好，當你把一個變數名取得很短的時候，如 i ，這一長度本身就對變數做了一些說明——也就是說，改變數代表的是一個臨時的資料，它的作用域非常有限，適用於區域性變數或者迴圈變數;

也並不是所有的較長的名字不好，較長的名字適用於很少用到的變數或者全域性變數。

3. 變數名中的計算值限定詞
   很多程式都有表示計算結果的變數：總額、平均值、最大值，等等。如果你要用類似於Total、Sum、Average、Max、Min、Record、String、Pointer這樣的限定詞來修改某個名字，那麼請記住把限定詞加到名字的最後。

4. 變數名中的常用對仗詞

• begin / end

• first / last

• locked / unlocked

• min / max

• next / previous

• old / new

• up / down

5. 為狀態變數命名
   像這種statusFlag = 0x80這樣的語句是反映不出這段程式碼是做什麼的，除非你親自寫了這段程式碼，或者有文件能告訴你 statusFlag和0x80的含義。為了清楚起見，標記應該用列舉型別、具名常量，我們可以這樣優化

const CONTROL_CHARACTER = '0x80';

characterType = CONTROL_CHARACTER;

6. 為布林變數命名
   下面是一些格外有用的布林變數名：

• done

• error

• found

• success 或 ok

7. 為列舉型別命名
   在使用列舉型別的時候，可以通過使用組字首，如color_ , planet_ 或者 month_

二. 寫好註釋

程式碼註釋一定是註明程式碼的目的，而不是程式碼的行為。

三. 降低 if  else 麵條程式碼複雜度

重構複雜的 if else程式碼，簡單的方法是使用所謂的查詢表。它通過鍵值對的形式來封裝每個if else 的邏輯，如下程式碼：

function test1 (a, b, c) {}

function test2 (a, b, c) {}

function test3 (a, b, c) {}

function main (a, b, c) {

 let  product = getProduct();

 let result;

 if (product === 'aa') {

     result = test1(a, b, c);

 } else if (product === 'bb') {

     result = test2(a, b, c);

 } else if (product === 'cc') {

     result = test3(a, b, c);

 }

 return result

}

//我們可以優化成

function main (a, b, c) {

 let product = getProduct();

  let  productMap = {

        'aa' : function (a, b, c) {/* ... */},

        'bb' : function (a, b, c) {/* ... */},

        'cc' : function (a, b, c) {/* ... */},

   }

   return productMap[product](a, b, c)

}

           

優化後的程式碼要比用if  else 簡潔多了，使用這種查詢表的方式可以完成更復雜的if else語句，大家可以慢慢實踐。