前端｜一些良好的代碼習慣

背景

之前的一個項目， 當時需求緊急， 在專案結構和代碼品質上有點把控不嚴格， 為此leader命我重構， 感覺這是件很有意思的事情，

不僅能瞭解到其他同事代碼風格， 還能學習到其他同事的一些優秀的邏輯。

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

一. 可讀性強的命名

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

以問題為導向

一個好記的變數名反映的通常都是問題， 而不是解決方案。 一個好名字通常表達的是“什麼（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 ， 這一長度本身就對變數做了一些說明——也就是說， 改變量代表的是一個臨時的資料， 它的作用域非常有限， 適用於區域變數或者迴圈變數;

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

變數名中的計算值限定詞

很多程式都有表示計算結果的變數：總額、平均值、最大值，

等等。 如果你要用類似於Total、Sum、Average、Max、Min、Record、String、Pointer這樣的限定詞來修改某個名字， 那麼請記住把限定詞加到名字的最後。

變數名中的常用對仗詞

begin / end

first / last

locked / unlocked

min / max

next / previous

old / new

up / down

為狀態變數命名

像這種 statusFlag = 0x80這樣的語句是反映不出這段代碼是做什麼的， 除非你親自寫了這段代碼， 或者有文檔能告訴你 statusFlag和0x80的含義。 為了清楚起見， 標記應該用枚舉類型、具名常量， 我們可以這樣優化

const CONTROL_CHARACTER = '0x80';characterType = CONTROL_CHARACTER;

為布林變數命名

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

done

error

found

success 或 ok

為枚舉類型命名

在使用枚舉類型的時候， 可以通過使用組首碼， 如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語句， 大家可以慢慢實踐。