目錄

• 目錄
  • 多個參數的缺點
  • 改善方式
    • 通通裝成一個物件
    • 必填欄位是獨立參數
  • 以Chats.js為例
  • 參考資料

“Any fool can write code that a computer can understand. Good programmers write code that humans can understand.” — Martin Fowler

笨蛋寫電腦能理解的code，優秀的程式開發者則寫人類能理解的code

多個參數的缺點

const sendFeedback = (name, phone, serviceScore, feedback) => {
    // 略
}

以上的code有幾個缺點

1. 呼叫時看不出參數各自代表什麼，需要移到function的位置看才知道
2. 某個參數是選填時，如果遇到選填參數不需要時，還是必須給個undefine或null
3. 若改變函式參數順序，用到這個函式的地方全都要改

改善方式

Clean Code中提到如果函式有參數的話，最好只有1~2個，從3個開始就要盡量避免

通通裝成一個物件

簡單將資料分類，同類包成一個物件

const sendFeedback = ({name, phone}, {serviceScore, feedback}) => {
    // 略
}

必填欄位是獨立參數

這邊的必填指如果沒有填的話，整個程式會出現error，導致完全無法運作

// 假設沒有填名字會無法運作的話
const sendFeedback = (name, {phone, serviceScore, feedback}) => {
    // 略
}

以Chats.js為例

畫圖表需要準備的東西相當地多(ex: 資料、顏色、標籤、尺度、標題)，如果每個設定、資料都開一個參數那肯定會相當雜亂

所以Chart.js使用了前段提到的兩種改善方式－必填欄位是獨立參數、裝成一個物件，讓code變得更加簡潔

ctx代表要放置圖表的DOM元素，因為是必須的，所以獨立一個參數

圖表的類型、資料、其他設定，廣義來說都算圖表的設定，所以包成一個物件

DOM元素和資料對圖表來說雖然都是必須的，但沒有資料的圖表頂多是一片空白，而沒有DOM元素會導致無法運作，所以將DOM元素獨立出來開參數

new Chart(ctx, {
    type: 'bar',
    data: data,
    options: options
});

Chart.js demo - Bar
Bar chart example contributed by John

參考資料

Clean Code (3) — 函式 (Functions)
Day 6 - Function 時空旅行 (1) - 參數優化
Clean Code: Avoid Too Many Arguments In Functions