SlideShare a Scribd company logo
1 of 47
Download to read offline
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
可讀的函式參數
可讀的函式參數
樣版
善用主樣版
善用主樣版
還有更多重構技巧
謝謝大家

More Related Content

What's hot

Drupal - 教育網路中心課程
Drupal - 教育網路中心課程Drupal - 教育網路中心課程
Drupal - 教育網路中心課程
Charles Chuang
 
361 Ch
361 Ch361 Ch
361 Ch
anjaan
 
碳酸会 图片列表讨论
碳酸会 图片列表讨论碳酸会 图片列表讨论
碳酸会 图片列表讨论
碳酸饮料会
 
Kiepvesau loi nguyenngocthien
Kiepvesau loi nguyenngocthienKiepvesau loi nguyenngocthien
Kiepvesau loi nguyenngocthien
Cherry Yêu Quái
 
期貨籌碼表0512
期貨籌碼表0512期貨籌碼表0512
期貨籌碼表0512
guesta0da80
 
Bai Giang 5
Bai Giang 5Bai Giang 5
Bai Giang 5
nbb3i
 
376 Ch
376 Ch376 Ch
376 Ch
anjaan
 
第2回PHP懇親会発表資料
第2回PHP懇親会発表資料第2回PHP懇親会発表資料
第2回PHP懇親会発表資料
Masahiko Sakamoto
 

What's hot (20)

ªãºAãäëèéí ñàíã çîõèîí áàéãóóëàõ
ªãºAãäëèéí ñàíã çîõèîí áàéãóóëàõªãºAãäëèéí ñàíã çîõèîí áàéãóóëàõ
ªãºAãäëèéí ñàíã çîõèîí áàéãóóëàõ
 
Webpeckerv7 Datasheet
Webpeckerv7 DatasheetWebpeckerv7 Datasheet
Webpeckerv7 Datasheet
 
Drupal - 教育網路中心課程
Drupal - 教育網路中心課程Drupal - 教育網路中心課程
Drupal - 教育網路中心課程
 
Web技術勉強会10回目(Slideshare用)
Web技術勉強会10回目(Slideshare用)Web技術勉強会10回目(Slideshare用)
Web技術勉強会10回目(Slideshare用)
 
Life In Whatever 2.0
Life In Whatever 2.0Life In Whatever 2.0
Life In Whatever 2.0
 
資料庫可以為你做那些事(二)
資料庫可以為你做那些事(二)資料庫可以為你做那些事(二)
資料庫可以為你做那些事(二)
 
just a test
just a testjust a test
just a test
 
MSICC
MSICCMSICC
MSICC
 
361 Ch
361 Ch361 Ch
361 Ch
 
用Pootle翻譯OLPC專案
用Pootle翻譯OLPC專案用Pootle翻譯OLPC專案
用Pootle翻譯OLPC專案
 
Ag Portal Gioi Thieu Quy Trinh
Ag Portal   Gioi Thieu Quy TrinhAg Portal   Gioi Thieu Quy Trinh
Ag Portal Gioi Thieu Quy Trinh
 
碳酸会 图片列表讨论
碳酸会 图片列表讨论碳酸会 图片列表讨论
碳酸会 图片列表讨论
 
lectureinfo site for xmu
lectureinfo site for xmulectureinfo site for xmu
lectureinfo site for xmu
 
Kiepvesau loi nguyenngocthien
Kiepvesau loi nguyenngocthienKiepvesau loi nguyenngocthien
Kiepvesau loi nguyenngocthien
 
Pseudo Perl
Pseudo PerlPseudo Perl
Pseudo Perl
 
期貨籌碼表0512
期貨籌碼表0512期貨籌碼表0512
期貨籌碼表0512
 
Bai Giang 5
Bai Giang 5Bai Giang 5
Bai Giang 5
 
376 Ch
376 Ch376 Ch
376 Ch
 
Mac玩家特區X目錄
Mac玩家特區X目錄Mac玩家特區X目錄
Mac玩家特區X目錄
 
第2回PHP懇親会発表資料
第2回PHP懇親会発表資料第2回PHP懇親会発表資料
第2回PHP懇親会発表資料
 

More from Jace Ju (13)

What happens in laravel 4 bootstraping
What happens in laravel 4 bootstrapingWhat happens in laravel 4 bootstraping
What happens in laravel 4 bootstraping
 
Advanced php testing in action
Advanced php testing in actionAdvanced php testing in action
Advanced php testing in action
 
Beginning PHPUnit
Beginning PHPUnitBeginning PHPUnit
Beginning PHPUnit
 
深入淺出 MVC
深入淺出 MVC深入淺出 MVC
深入淺出 MVC
 
如何打造 WebMVC Framework - 基礎概念篇
如何打造 WebMVC Framework - 基礎概念篇如何打造 WebMVC Framework - 基礎概念篇
如何打造 WebMVC Framework - 基礎概念篇
 
Refactoring with Patterns in PHP
Refactoring with Patterns in PHPRefactoring with Patterns in PHP
Refactoring with Patterns in PHP
 
Patterns in Library Design (套件設計裡的模式)
Patterns in Library Design (套件設計裡的模式)Patterns in Library Design (套件設計裡的模式)
Patterns in Library Design (套件設計裡的模式)
 
購物車程式架構簡介
購物車程式架構簡介購物車程式架構簡介
購物車程式架構簡介
 
Patterns in Zend Framework
Patterns in Zend FrameworkPatterns in Zend Framework
Patterns in Zend Framework
 
Head First Zend Framework - Part 1 Project & Application
Head First Zend Framework - Part 1 Project & ApplicationHead First Zend Framework - Part 1 Project & Application
Head First Zend Framework - Part 1 Project & Application
 
常見設計模式介紹
常見設計模式介紹常見設計模式介紹
常見設計模式介紹
 
PHPUnit 入門介紹
PHPUnit 入門介紹PHPUnit 入門介紹
PHPUnit 入門介紹
 
jQuery 實戰經驗講座
jQuery 實戰經驗講座jQuery 實戰經驗講座
jQuery 實戰經驗講座
 

Web Refactoring