Web 程式重構
改善 Web 程式的設計
JACE JU
哇寶資訊技術總監

重構是什麼？

打掉重做!?

重構就像握著方向盤在直路上開車
一點一點修正你的程式碼

重構保護你的程式碼

重構前…程式碼是黑白的

重構後…程式碼是彩色的

重構不該改變原有功能
所以重構是工程師自爽的工作

那麼為什麼要重構？
1.重構讓程式碼更具彈性
2.重構讓程式碼更容易被看懂
3.重構幫你找到 Bug

重構困難嗎？
完全不會！
都是常見的程式技法！

那麼什麼時候需要重構？
隨時都可以重構
無法判斷何時該重構的話，
以下有幾個建議的好時機：
•加新功能
•修 Bug
•Review 程式碼
•當舊有設計趕不上變化

或是你聞到程式碼
有以下壞味道時~
•看不懂的程式碼
•一堆複製貼上的程式碼
•部份函式越來越大，功能越來越複雜
•一個小功能，要更動好幾個地方
•PHP, HTML, Style, JavaScript 夾雜在一起

那麼重構可以解決各種疑難雜症嗎？
錯！重構不是萬靈丹！
發現以下症狀時，重構是沒用的…
•舊程式已經一團亂的時候
•迫近死亡之線的時候

如何保證重構後功能不變？
測試才能確保重構的正確性
但 Web 開發所牽涉到的測試範圍非常廣：
•Server 端應用程式
•JavaScript
•HTML 畫面
•資料庫
•其他

那麼 Web 程式重構
到底要做些什麼？

架構重整 易維護的程式碼
•分離業務處理邏輯與資料呈現邏輯 •定義常數
•單一檔案單一功能 •對調常數判斷式
•單一程式或類別只做它該做的事 •善用 JavaScript Library
•錯誤控制 •可讀的函式參數
•加上為什麼的註解 (而不
是怎麼做)
復用 封裝常變化的部份
•包裝成函式或 Plugin •將常變動的設定移出程
•減少 SQL 串接 式外
•善用主樣版 •將常改的 Switch 改為
類別

大部拆解

分離業務處理邏輯與資料呈現邏輯
PHP
HTML

單一功能單一檔案
HTML
JS
CSS

PHP

單一程式或類別只做它該做的事
DB 抽象層
Model
Controller
這邊最花時間，也不容易除錯

錯誤控制
die
Exception

定義常數

對調常數判斷式

加上註解

把可以 Reuse 的部份包裝起來

包裝成函式或 Plugin

包裝成函式或 Plugin

減少 SQL 串接

減少 SQL 串接

把常變動的部份封裝起來

可設定的程式

可設定的程式

將常改的 Switch 改為類別

將常改的 Switch 改為類別

將常改的 Switch 改為類別

將常改的 Switch 改為類別

JavaScript

善用 JavaScript Library

善用 JavaScript Library

可讀的函式參數

可讀的函式參數

樣版

善用主樣版

善用主樣版

還有更多重構技巧

謝謝大家