SlideShare a Scribd company logo
1 of 61
Download to read offline
套件設計裡的模式

  大澤木小鐵
故事背景
故事背景
客戶不滿意市面上的圖表套件…
故事背景
客戶不滿意市面上的圖表套件…
所以出資希望我們做一套…
故事背景
客戶不滿意市面上的圖表套件…
所以出資希望我們做一套…




  本故事純屬虛構,台灣很少有這麼好的客戶。
ChartX!
ChartX!




本套件也是虛構,台灣很少人會花精力寫這種東西。
需求
需求
• 支援各類圖表,例如圓餅圖、長條圖。
需求
• 支援各類圖表,例如圓餅圖、長條圖。
• 要易於使用,不必瞭解底層繪圖機制。
需求
• 支援各類圖表,例如圓餅圖、長條圖。
• 要易於使用,不必瞭解底層繪圖機制。




    這客戶非常有良心,沒有進一步的要求。
     再次提醒,台灣很少有這麼好的客戶。
設計前的討論
設計前的討論
• 應該要簡化客戶的工作。
設計前的討論
• 應該要簡化客戶的工作。
• 做好該做的事,也就是產生圖表。
設計前的討論
• 應該要簡化客戶的工作。
• 做好該做的事,也就是產生圖表。
• 儘可能利用別人已經做好的底層繪圖機制。
設計前的討論
•   應該要簡化客戶的工作。
•   做好該做的事,也就是產生圖表。
•   儘可能利用別人已經做好的底層繪圖機制。
•   儘量讓使用者知道的越少越好。
設計前的討論
•   應該要簡化客戶的工作。
•   做好該做的事,也就是產生圖表。
•   儘可能利用別人已經做好的底層繪圖機制。
•   儘量讓使用者知道的越少越好。
•   讓使用者容易抽換圖表。
設計前的討論
•   應該要簡化客戶的工作。
•   做好該做的事,也就是產生圖表。
•   儘可能利用別人已經做好的底層繪圖機制。
•   儘量讓使用者知道的越少越好。
•   讓使用者容易抽換圖表。
•   讓使用者容易擴充功能。
設計前的討論
•   應該要簡化客戶的工作。
•   做好該做的事,也就是產生圖表。
•   儘可能利用別人已經做好的底層繪圖機制。
•   儘量讓使用者知道的越少越好。
•   讓使用者容易抽換圖表。
•   讓使用者容易擴充功能。
•   類別要可以分開開發。
設計前的討論
•   應該要簡化客戶的工作。
•   做好該做的事,也就是產生圖表。
•   儘可能利用別人已經做好的底層繪圖機制。
•   儘量讓使用者知道的越少越好。
•   讓使用者容易抽換圖表。
•   讓使用者容易擴充功能。
•   類別要可以分開開發。
•   類別要易於測試。
設計模式
設計模式
• 一開始不用也沒關係,原則掌握住就好。
設計模式
• 一開始不用也沒關係,原則掌握住就好。
• 不要去看模式的形,而是要懂模式的意。
設計模式
• 一開始不用也沒關係,原則掌握住就好。
• 不要去看模式的形,而是要懂模式的意。
• 通常不會只出現一種模式。
設計模式
• 一開始不用也沒關係,原則掌握住就好。
• 不要去看模式的形,而是要懂模式的意。
• 通常不會只出現一種模式。




              進入設計階段!
該如何設計套件架構?
該如何設計套件架構?
• 直接從功能與實作分離開始。
該如何設計套件架構?
• 直接從功能與實作分離開始。
• 功能:如何將使用者輸入的資料轉換成圖
  表的概念。
該如何設計套件架構?
• 直接從功能與實作分離開始。
• 功能:如何將使用者輸入的資料轉換成圖
  表的概念。
• 實作:真正繪製出圖表的底層繪圖引擎。
該如何設計套件架構?
• 直接從功能與實作分離開始。
• 功能:如何將使用者輸入的資料轉換成圖
  表的概念。
• 實作:真正繪製出圖表的底層繪圖引擎。




       抽象功能與底層實作分處於兩端…
Bridge Pattern
繪圖引擎怎麼做?
繪圖引擎怎麼做?
• 繪圖引擎已經定義好 API ,讓 Chart 使用。
繪圖引擎怎麼做?
• 繪圖引擎已經定義好 API ,讓 Chart 使用。
• 直接轉介別人已經寫好的繪圖 API (例如
  GD 、 Image-Magick) 。
繪圖引擎怎麼做?
• 繪圖引擎已經定義好 API ,讓 Chart 使用。
• 直接轉介別人已經寫好的繪圖 API (例如
  GD 、 Image-Magick) 。




       借用第三方套件,轉換成我們的 API …
Adapter Pattern
如何建立圖表?
如何建立圖表?
• 用戶知道的越少越好。
如何建立圖表?
• 用戶知道的越少越好。
• 讓抽象類別生出子類別。
如何建立圖表?
• 用戶知道的越少越好。
• 讓抽象類別生出子類別。




            封裝物件生成的過程…
Simple Factory Pattern
圖表格式
圖表格式
• 呈現資料比例:圓餅圖、長條圖。
圖表格式
• 呈現資料比例:圓餅圖、長條圖。
• 同樣的 API ,不同的呈現方式。
圖表格式
• 呈現資料比例:圓餅圖、長條圖。
• 同樣的 API ,不同的呈現方式。




              可以抽換圖表格式…
Strategy Pattern
還要注意什麼?
還要注意什麼?
• 這個例子並沒有涵蓋所有模式。
還要注意什麼?
• 這個例子並沒有涵蓋所有模式。
• 每種套件的設計不盡相同。
還要注意什麼?
• 這個例子並沒有涵蓋所有模式。
• 每種套件的設計不盡相同。
• 不要將模式強套上去。
還要注意什麼?
• 這個例子並沒有涵蓋所有模式。
• 每種套件的設計不盡相同。
• 不要將模式強套上去。




      實作的事就交給你的同事吧~
謝謝收看

More Related Content

Viewers also liked

Composer 從入門到實戰
Composer 從入門到實戰Composer 從入門到實戰
Composer 從入門到實戰
Shengyou Fan
 

Viewers also liked (14)

View 與 Blade 樣板引擎
View 與 Blade 樣板引擎View 與 Blade 樣板引擎
View 與 Blade 樣板引擎
 
整合 Open ID
整合 Open ID整合 Open ID
整合 Open ID
 
Package 安裝與使用
Package 安裝與使用Package 安裝與使用
Package 安裝與使用
 
使用 Controller
使用 Controller使用 Controller
使用 Controller
 
Eloquent ORM
Eloquent ORMEloquent ORM
Eloquent ORM
 
Route 路由控制
Route 路由控制Route 路由控制
Route 路由控制
 
啟動 Laravel 與環境設定
啟動 Laravel 與環境設定啟動 Laravel 與環境設定
啟動 Laravel 與環境設定
 
工作坊簡介
工作坊簡介工作坊簡介
工作坊簡介
 
使用者認證
使用者認證使用者認證
使用者認證
 
Composer 套件管理
Composer 套件管理Composer 套件管理
Composer 套件管理
 
PHP 語法基礎與物件導向
PHP 語法基礎與物件導向PHP 語法基礎與物件導向
PHP 語法基礎與物件導向
 
開發環境建置
開發環境建置開發環境建置
開發環境建置
 
Model 設定與 Seeding
Model 設定與 SeedingModel 設定與 Seeding
Model 設定與 Seeding
 
Composer 從入門到實戰
Composer 從入門到實戰Composer 從入門到實戰
Composer 從入門到實戰
 

Similar to Patterns in Library Design (套件設計裡的模式)

设计师转型培训-工具篇
设计师转型培训-工具篇设计师转型培训-工具篇
设计师转型培训-工具篇
Robert Luo
 
Joomla! 網站規劃 簡報 - I love joomla! 5月小聚
Joomla! 網站規劃 簡報 - I love joomla! 5月小聚Joomla! 網站規劃 簡報 - I love joomla! 5月小聚
Joomla! 網站規劃 簡報 - I love joomla! 5月小聚
ilovejoomla
 
制作Ppt的7种武器
制作Ppt的7种武器制作Ppt的7种武器
制作Ppt的7种武器
ultraji
 
Doc 2011101404575913
Doc 2011101404575913Doc 2011101404575913
Doc 2011101404575913
Rhythm Sun
 

Similar to Patterns in Library Design (套件設計裡的模式) (18)

Generative AI 在手機遊戲發行上的應用介紹.pdf
Generative AI 在手機遊戲發行上的應用介紹.pdfGenerative AI 在手機遊戲發行上的應用介紹.pdf
Generative AI 在手機遊戲發行上的應用介紹.pdf
 
【1110ROS社群開講】如何打造與人一起學習的機器檯燈_鄭凱文
【1110ROS社群開講】如何打造與人一起學習的機器檯燈_鄭凱文【1110ROS社群開講】如何打造與人一起學習的機器檯燈_鄭凱文
【1110ROS社群開講】如何打造與人一起學習的機器檯燈_鄭凱文
 
While software engineer meets 3d printer
While software engineer meets 3d printerWhile software engineer meets 3d printer
While software engineer meets 3d printer
 
Design Method_20200409
Design Method_20200409Design Method_20200409
Design Method_20200409
 
Prototyping
PrototypingPrototyping
Prototyping
 
Digital product design process
Digital product design processDigital product design process
Digital product design process
 
设计师转型培训-工具篇
设计师转型培训-工具篇设计师转型培训-工具篇
设计师转型培训-工具篇
 
Joomla! 網站規劃 簡報-i love joomla! 5月小聚
Joomla! 網站規劃 簡報-i love joomla! 5月小聚Joomla! 網站規劃 簡報-i love joomla! 5月小聚
Joomla! 網站規劃 簡報-i love joomla! 5月小聚
 
Joomla! 網站規劃 簡報 - I love joomla! 5月小聚
Joomla! 網站規劃 簡報 - I love joomla! 5月小聚Joomla! 網站規劃 簡報 - I love joomla! 5月小聚
Joomla! 網站規劃 簡報 - I love joomla! 5月小聚
 
就業經驗分享
就業經驗分享就業經驗分享
就業經驗分享
 
成大心理系-Prototyping方法
成大心理系-Prototyping方法成大心理系-Prototyping方法
成大心理系-Prototyping方法
 
制作Ppt的7种武器
制作Ppt的7种武器制作Ppt的7种武器
制作Ppt的7种武器
 
爱途迹
爱途迹爱途迹
爱途迹
 
高雄和春資工系-Axure RP基礎課程
高雄和春資工系-Axure RP基礎課程高雄和春資工系-Axure RP基礎課程
高雄和春資工系-Axure RP基礎課程
 
Doc 2011101404575913
Doc 2011101404575913Doc 2011101404575913
Doc 2011101404575913
 
HPX台南讀書會-Axure RP基礎課程
HPX台南讀書會-Axure RP基礎課程HPX台南讀書會-Axure RP基礎課程
HPX台南讀書會-Axure RP基礎課程
 
5irehands工作室 2
5irehands工作室 25irehands工作室 2
5irehands工作室 2
 
请给我结果.S01 e01.小清新式的项目管理
请给我结果.S01 e01.小清新式的项目管理请给我结果.S01 e01.小清新式的项目管理
请给我结果.S01 e01.小清新式的项目管理
 

More from Jace Ju (12)

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 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 入門介紹
 
Web Refactoring
Web RefactoringWeb Refactoring
Web Refactoring
 
CSS 排版 - 基礎觀念篇
CSS 排版 - 基礎觀念篇CSS 排版 - 基礎觀念篇
CSS 排版 - 基礎觀念篇
 
PHP 防駭 - 基礎觀念篇
PHP 防駭 - 基礎觀念篇PHP 防駭 - 基礎觀念篇
PHP 防駭 - 基礎觀念篇
 

Patterns in Library Design (套件設計裡的模式)