我可以怎麼優化我的程式碼

發表於 更新於 分類於
function越簡單(簡短）越好

  • function 越簡單(簡短)越好

回顧一下自己一年多前寫的程式碼，發現自己真是年輕不懂事，很貪心的想要在一隻 function 裡面寫完一大堆邏輯，當需要修改需求時再回來看這一段簡直是迷宮，必須從頭開始閱讀到最後才能找到要改的地方在哪裡，所以歸納出一個重點”函式應該只要做一件事就好，越單純越簡單越好，一來好維護二來也讓你的同事不會在你的程式碼裡面迷路”。

  • 變數的命名重要(function 也是)

剛碰程式的時候很常隨便命名，aaa、bbb、xyz 諸如此類的，自己寫扣完全不覺得變數命名有什麼重要的，直到開始工作的時候，看到x1、x2這種變數，對，完全不知道這些名字代表什麼意義，要邊看 code 順流程跑一遍，才知道這個變數是幹嘛用的，沒錯！我真的看過一些奇耙的單字(Ex.fxxk…)出現在裡面，想必是想到什麼就命名什麼，隨心所欲，但這樣第一時間根本沒辦法知道他的用意是什麼，因此，明確的命名可以讓同事或是日後失憶的你，快速抓到這些變數的重點是什麼。

1
2
3
4
5
6
7
8
9
10
11
12
13
//bad
var g = "";
var arr = [];
var group = {};

//good
var shoppingCartList = [];
var memberInformation = {};

//function 的命名方式 動詞+名詞
get 獲取…
set 設定…
is 判定是否為…
  • 重複的 code
    當下開發並不會意識到這一點，當你真的寫完之後，仔細一看，會發現有些重複的邏輯，一樣的東西一直重複讓程式碼變得很冗長，盡可能的將重複的代碼，寫成一隻 function，再各自 call 這支 function。
  • 參數越少越好
    理想的函式不需要任何一個參數，偶而出現一兩個還可以接受，三個以上就不太理想了，我這輩子看過最多的參數是 9 個，每個都是必填，number、string、boolean、string…，真的是會傳參數傳到懷疑人生，而且一恍神還會傳錯，所以盡可能的參數越少越理想。
  • 不要留下被註解的程式碼
    有時候對程式碼有種神秘的情感，像是有時候在嘗試 a 、b 哪種作法比較適合時，先把 a 作法註解掉，然後保留 b，心想某天可能 a 會用到，然後 a 就這樣被遺忘了，總而言之，用不到的 code 在 commit 的時候直接刪除吧。
  • 減少程式碼的耦合度(Coupling)
    耦合就是函式之間的相依性，理想的狀況當然是低耦合，如果今天修改了某個函式連帶會影響到其他函式，那就會很難維護，像是改了 a 函式，結果 b、c 函式也要一併修改，也會變得不好除錯。

另外 ，分享幾個優化程式碼的例子

1.當有數個條件的時候，使用 Array.includes

1
2
3
4
5
6
7
8
if (page == "A" || page == "B" || page == "C" || page == "D") {
}

//可以改成

let pageList = ["A", "B", "C", "D"];
if (pageList.includes(page)) {
}

2.使用 map 或 object 取代 switch

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
switch (type) {
  case "a":
    return "area";
  case "b":
    return "block";
  case "c":
    return "capsule";
  default:
    return "";
}
//可以改成

let vocabularyObject = {
  a: "area",
  b: "block",
  c: "capsule",
};

return vocabularyObject\[type\] || ""

//或是

let vocabularyObject = new Map()
.set("a","area")
.set("b","block")
.set("c","capsule")

return vocabularyObject.get(type) || ""

3.用解構取代 && 條件

1
2
3
4
5
6
7
8
9
function test(obj) {
  return (obj && obj.key) || null;
}

//可以改成

function test({ key } = {}) {
  return key || null;
}

4.較複雜的條件判斷

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
if (
  price <= 1000 &&
  sales > 10000 &&
  gameName.indexOf("super") > -1 &&
  language.hasOwnProperty("en")
) {
  //doNext()
}

//可以改成

let cheap = price <= 1000;
let bestSeller = sales > 10000;
let isSuper = gameName.indexOf("super") > -1;
let supportEnglish = language.hasOwnProperty("en");

let isSpecialPrice = cheap && bestSeller && isSuper && supportEnglish;
isSpecialPrice && doNext();

當然，程式碼可以優化的方式一定還有很多種，推薦大家閱讀 clean code 無瑕的程式碼這本書 ，裡面蠻多觀念都挺不錯的。