一些寫程式碼的習慣

往事隨風非發表於2017-11-06
原文網址 : https://blog.csdn.net/lxh18682851338/article/details/78458290

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

一. 可讀性強的命名

命名是提高程式碼可讀性的第一步，也是極其重要的一步，不僅在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 ，這一長度本身就對變數做了一些說明——也就是說，改變數代表的是一個臨時的資料，它的作用域非常有限，適用於區域性變數或者迴圈變數;

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

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

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

  • begin / end

  • first / last

  • locked / unlocked

  • min / max

  • next / previous

  • old / new

  • up / down

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

const CONTROL_CHARACTER = '0x80';

characterType = CONTROL_CHARACTER;

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

  • done

  • error

  • found

  • success 或 ok

  1. 為列舉型別命名
    在使用列舉型別的時候，可以通過使用組字首，如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語句，大家可以慢慢實踐。


相關文章