Web 程式重構
  改善 Web 程式的設計



            JACE JU
          哇寶資訊技術總監
重構是什麼?
打掉重做!?
重構就像握著方向盤在直路上開車

一點一點修正你的程式碼
重構保護你的程式碼
重構前…程式碼是黑白的
重構後…程式碼是彩色的
重構不該改變原有功能

所以重構是工程師自爽的工作
那麼為什麼要重構?

1.重構讓程式碼更具彈性
2.重構讓程式碼更容易被看懂
3.重構幫你找到 Bug
重構困難嗎?

完全不會!
都是常見的程式技法!
那麼什麼時候需要重構?
隨時都可以重構
無法判斷何時該重構的話,
以下有幾個建議的好時機:
 •加新功能
 •修 Bug
 •Review 程式碼
 •當舊有設計趕不上變化
或是你聞到程式碼
有以下壞味道時~
•看不懂的程式碼
•一堆複製貼上的程式碼
•部份函式越來越大,功能越來越複雜
•一個小功能,要更動好幾個地方
•PHP, HTML, Style, JavaScript 夾雜在一起
那麼重構可以解決各種疑難雜症嗎?
 錯!重構不是萬靈丹!
 發現以下症狀時,重構是沒用的…

 •舊程式已經一團亂的時候
 •迫近死亡之線的時候
如何保證重構後功能不變?
測試才能確保重構的正確性
但 Web 開發所牽涉到的測試範圍非常廣:

•Server 端應用程式
•JavaScript
•HTML 畫面
•資料庫
•其他
那麼 Web 程式重構
到底要做些什麼?
架構重整                    易維護的程式碼
•分離業務處理邏輯與資料呈現邏輯                   •定義常數
•單一檔案單一功能                          •對調常數判斷式
•單一程式...
大部拆解
分離業務處理邏輯與資料呈現邏輯



                  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
可讀的函式參數
可讀的函式參數
樣版
善用主樣版
善用主樣版
還有更多重構技巧
謝謝大家
Upcoming SlideShare
Loading in …5
×

Web Refactoring

7,951 views

Published on

2009-05-27 課程簡報

Published in: Technology
  • Be the first to comment

Web Refactoring

  1. 1. Web 程式重構 改善 Web 程式的設計 JACE JU 哇寶資訊技術總監
  2. 2. 重構是什麼?
  3. 3. 打掉重做!?
  4. 4. 重構就像握著方向盤在直路上開車 一點一點修正你的程式碼
  5. 5. 重構保護你的程式碼
  6. 6. 重構前…程式碼是黑白的
  7. 7. 重構後…程式碼是彩色的
  8. 8. 重構不該改變原有功能 所以重構是工程師自爽的工作
  9. 9. 那麼為什麼要重構? 1.重構讓程式碼更具彈性 2.重構讓程式碼更容易被看懂 3.重構幫你找到 Bug
  10. 10. 重構困難嗎? 完全不會! 都是常見的程式技法!
  11. 11. 那麼什麼時候需要重構? 隨時都可以重構 無法判斷何時該重構的話, 以下有幾個建議的好時機: •加新功能 •修 Bug •Review 程式碼 •當舊有設計趕不上變化
  12. 12. 或是你聞到程式碼 有以下壞味道時~ •看不懂的程式碼 •一堆複製貼上的程式碼 •部份函式越來越大,功能越來越複雜 •一個小功能,要更動好幾個地方 •PHP, HTML, Style, JavaScript 夾雜在一起
  13. 13. 那麼重構可以解決各種疑難雜症嗎? 錯!重構不是萬靈丹! 發現以下症狀時,重構是沒用的… •舊程式已經一團亂的時候 •迫近死亡之線的時候
  14. 14. 如何保證重構後功能不變? 測試才能確保重構的正確性 但 Web 開發所牽涉到的測試範圍非常廣: •Server 端應用程式 •JavaScript •HTML 畫面 •資料庫 •其他
  15. 15. 那麼 Web 程式重構 到底要做些什麼?
  16. 16. 架構重整 易維護的程式碼 •分離業務處理邏輯與資料呈現邏輯 •定義常數 •單一檔案單一功能 •對調常數判斷式 •單一程式或類別只做它該做的事 •善用 JavaScript Library •錯誤控制 •可讀的函式參數 •加上為什麼的註解 (而不 是怎麼做) 復用 封裝常變化的部份 •包裝成函式或 Plugin •將常變動的設定移出程 •減少 SQL 串接 式外 •善用主樣版 •將常改的 Switch 改為 類別
  17. 17. 大部拆解
  18. 18. 分離業務處理邏輯與資料呈現邏輯 PHP HTML
  19. 19. 單一功能單一檔案 HTML JS CSS
  20. 20. PHP
  21. 21. 單一程式或類別只做它該做的事 DB 抽象層 Model Controller 這邊最花時間,也不容易除錯
  22. 22. 錯誤控制 die Exception
  23. 23. 定義常數
  24. 24. 對調常數判斷式
  25. 25. 加上註解
  26. 26. 把可以 Reuse 的部份包裝起來
  27. 27. 包裝成函式或 Plugin
  28. 28. 包裝成函式或 Plugin
  29. 29. 減少 SQL 串接
  30. 30. 減少 SQL 串接
  31. 31. 把常變動的部份封裝起來
  32. 32. 可設定的程式
  33. 33. 可設定的程式
  34. 34. 將常改的 Switch 改為類別
  35. 35. 將常改的 Switch 改為類別
  36. 36. 將常改的 Switch 改為類別
  37. 37. 將常改的 Switch 改為類別
  38. 38. JavaScript
  39. 39. 善用 JavaScript Library
  40. 40. 善用 JavaScript Library
  41. 41. 可讀的函式參數
  42. 42. 可讀的函式參數
  43. 43. 樣版
  44. 44. 善用主樣版
  45. 45. 善用主樣版
  46. 46. 還有更多重構技巧
  47. 47. 謝謝大家

×