談到 UX 時,通常都是在討論介面直不直覺、漂亮與否、操作好不好上手等等。然而在開發專案時,還有一個很重要 UX,那就是程式碼的閱讀體驗。如果專案中重複的 code 一大堆

,又或者 function 命名模稜兩可,又看不到任何的註解,想必會讓日後接著維護的人(99% 都是幾個禮拜後的自己)難以下手,為了修改一個小小的功能卻花的很多不必要的時間。

發生閱讀問題的情境

以下是可能發生在開發中的一些現象或是操作行為,逐項列出了造成閱讀體驗不好的原因:

一直滾動滑鼠滾輪

  • 原因:function 過長

一直全域搜尋

  • 原因:function 過長

一直查看同一個 function 內的 code

  • 原因: function 命名不當,無法表達其含義

不斷的向上追朔原始碼

  • 原因:呼叫的層數太多
  • 例子:Laravel 原始碼

反覆查看全域常數的值

  • 原因:常數命名不當,無法表達其含義

幫程式碼畫流程圖

  • 原因:巢狀太深
  • 例子:Laravel File Manager 原始碼(v1.0 以前的版本)

在開發的時候可以稍微留意自己的操作(甚至可以錄影起來),觀察看看有沒有與以上事項相符

閱讀問題的五大分類

  1. 命名類的問題
    • 沒有考慮呼叫時的情況
1
2
3
4
5
6
// 例子:從班級(Grade)中取得學生的數量
grade.getStudentsCount() // get 有點多餘
grade.countStudents() // 名稱聽起來像個動作,不知道到底會回傳什麼
grade.students.size() // 書寫容易,但 students 須為 public
grade.size() // 到底是什麼的大小?教室大小嗎?
grade.studentsCount() // 最精簡且語意清晰
  • 使用英文以外的語言命名
    • 例子:與其用 shuliang(數量)來為變數命名,不如直接用英文的 count
  • 命名與行為不一致(做的事情多餘或少於預期)
    • 例子:function 名為 update(),卻呼叫了 showData() & writeToFile()
  • 無意義的命名
    • 例子:變數或是 function 名稱取名叫 a, b, c, temp, result, retVal 等等,不知所云。但用於迴圈中的 index 值 i, j 等等可以除外
      1. 註解類的問題
      2. 結構類的問題
      3. 架構類的問題
      4. 風格類的問題

本篇節錄自《我的程式碼會說話》