web refactoring

Web 程式重構

改善 Web 程式的設計

JACE JU

哇寶資訊技術總監

重構是什麼？

打掉重做!?

重構就像握著方向盤在直路上開車

一點一點修正你的程式碼

重構保護你的程式碼

重構前…程式碼是黑白的

重構後…程式碼是彩色的

重構不該改變原有功能

所以重構是工程師自爽的工作

那麼為什麼要重構？

1.重構讓程式碼更具彈性

2.重構讓程式碼更容易被看懂

3.重構幫你找到 Bug

完全不會！都是常見的程式技法！

重構困難嗎？

隨時都可以重構

無法判斷何時該重構的話，

以下有幾個建議的好時機：

•加新功能

•修 Bug

•Review 程式碼

•當舊有設計趕不上變化

那麼什麼時候需要重構？

或是你聞到程式碼有以下壞味道時~

•看不懂的程式碼

•一堆複製貼上的程式碼

•部份函式越來越大，功能越來越複雜

•一個小功能，要更動好幾個地方

•PHP, HTML, Style, JavaScript 夾雜在一起

那麼重構可以解決各種疑難雜症嗎？

錯！重構不是萬靈丹！

發現以下症狀時，重構是沒用的…

•舊程式已經一團亂的時候

•迫近死亡之線的時候

測試才能確保重構的正確性

但 Web 開發所牽涉到的測試範圍非常廣：

•Server 端應用程式

•JavaScript

•HTML 畫面

•資料庫

•其他

如何保證重構後功能不變？

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

封裝常變化的部份

•將常變動的設定移出程

式外

•將常改的 Switch 改為

類別

復用

•包裝成函式或 Plugin

•減少 SQL 串接

•善用主樣版

易維護的程式碼

•定義常數

•對調常數判斷式

•善用 JavaScript Library

•可讀的函式參數

•加上為什麼的註解 (而不

是怎麼做)

架構重整

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

•單一檔案單一功能

•單一程式或類別只做它該做的事

•錯誤控制

大部拆解

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

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

可讀的函式參數

可讀的函式參數

樣版

善用主樣版

善用主樣版

還有更多重構技巧

謝謝大家