## 讓不良的程式碼突顯出來 > 利用==反重構==將不良的程式碼突顯出來 ### 13.1 透過不良的程式碼發出流程問題的訊號 + 因為程式碼複雜度、時間不足等各種原因,無法進行完整的重構。因此你可能先進行簡單的重構,讓程式碼看起來沒這麼糟糕。 + 作者認為這是錯誤的,交付一個糟糕的程式碼比隱藏問題更好,因為更容易下次被看到,並進行重構。 + 然而做這件事需要足夠的心理安全感。(~~加個 TODO 註解會更好~~) + 下面 2 個程式哪一個需要進行重構? ![image](https://hackmd.io/_uploads/HJtqT2xEA.png) ```javascript= function animate() { handleChosen(); handleDisplaying(); handleCompleted(); handleMoving(); } function handleChosen() { if (value >= threshold && banner.state === "chosen") { // ... } } function handleDisplaying() { if (value >= target && banner.state === "displaying") { // ... } } function handleCompleted() { if (banner.state === "completed") { // ... } } function handleMoving() { if (banner.state === "moving" && banner.target === banner.current) { // ... } } ``` ```javascript= function animate() { // FIXME: All concern banner.state if (value >= threshold && banner.state === State.Chosen) { // ... } if (value >= target && banner.state === State.Displaying) { // ... } if (banner.state === State.Completed) { // ... } if (banner.state === State.Moving && banner.target === banner.current) { // ... } } enum State { Chosen, Displaying, Completed, Moving } ``` + 答案是 2 個都要,只是左邊那一個容易隱藏需要抽 enum 的狀況,也就是隱藏問題。 ### 13.2 分離純淨優質和遺留程式碼 + 程式碼越糟未來被完整重構的機會就越大 + 如果程式碼品質被區分成三個等級:**相當好、還好、不好**。如果時間不夠變得**相當好**,那寧願變成**不好** #### 破窗理論 + 如果專案程式碼品質不佳,則接下來開發的程式碼高機率不佳 ### 13.3 定義不良程式碼的作法 + 一般來說最簡單的就是可讀性,但可讀性比較偏主觀。 + 書中提供一些客觀的原則:例如五行程式碼、僅在開頭使用 if 等 + 如果團隊有共享的規則可以遵守也是不錯的作法 + 下面這程式碼違反什麼規則或是有什麼程式碼異味? ```javascript= function minimum(arr: number[][]) { let result = 99999; for (let x = 0; x < arr.length; x++) { for (let y = 0; y < arr[x].length; y++) { if (arr[x][y] < result) result = arr[x][y]; } } return result; } ``` > 討論:團隊有共同遵守的規則嗎?歡迎舉例分享 #### 程式碼異味:完整和抽象 + 找出程式碼異味 ```javascript= function minimum(arr: number[][]) { let result = 99999; for (let x = 0; x < arr.length; x++) { for (let y = 0; y < arr[x].length; y++) { if (arr[x][y] < result) result = arr[x][y]; } } return result; } ``` #### 循環複雜度:演算法(客觀) + 循環複雜度:計算程式碼的路徑數量 (大約等於測試案例數) ```javascript= function minimum(arr: number[][]) { let result = 99999; for (let x = 0; x < arr.length; x++) { for (let y = 0; y < arr[x].length; y++) { if (arr[x][y] < result) result = arr[x][y]; } } return result; } ``` #### 認知複雜度:演算法(主觀) + 認知複雜度:在看這段程式碼時,人需要在腦海記住多少資訊量(認知負擔) ```javascript= function minimum(arr: number[][]) { let result = 99999; for (let x = 0; x < arr.length; x++) { for (let y = 0; y < arr[x].length; y++) { if (arr[x][y] < result) result = arr[x][y]; } } return result; } ```