patterns in library design (套件設計裡的模式)
DESCRIPTION
TRANSCRIPT
![Page 1: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/1.jpg)
套件設計裡的模式
大澤木小鐵
![Page 2: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/2.jpg)
故事背景
![Page 3: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/3.jpg)
故事背景
客戶不滿意市面上的圖表套件…
![Page 4: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/4.jpg)
故事背景
客戶不滿意市面上的圖表套件…
所以出資希望我們做一套…
![Page 5: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/5.jpg)
故事背景
客戶不滿意市面上的圖表套件…
所以出資希望我們做一套…
本故事純屬虛構,台灣很少有這麼好的客戶。
![Page 6: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/6.jpg)
ChartX!
![Page 7: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/7.jpg)
ChartX!
本套件也是虛構,台灣很少人會花精力寫這種東西。
![Page 8: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/8.jpg)
需求
![Page 9: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/9.jpg)
需求
• 支援各類圖表,例如圓餅圖、長條圖。
![Page 10: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/10.jpg)
需求
• 支援各類圖表,例如圓餅圖、長條圖。
• 要易於使用,不必瞭解底層繪圖機制。
![Page 11: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/11.jpg)
需求
• 支援各類圖表,例如圓餅圖、長條圖。
• 要易於使用,不必瞭解底層繪圖機制。
這客戶非常有良心,沒有進一步的要求。再次提醒,台灣很少有這麼好的客戶。
![Page 12: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/12.jpg)
設計前的討論
![Page 13: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/13.jpg)
設計前的討論
• 應該要簡化客戶的工作。
![Page 14: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/14.jpg)
設計前的討論
• 應該要簡化客戶的工作。
• 做好該做的事,也就是產生圖表。
![Page 15: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/15.jpg)
設計前的討論
• 應該要簡化客戶的工作。
• 做好該做的事,也就是產生圖表。
• 儘可能利用別人已經做好的底層繪圖機制。
![Page 16: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/16.jpg)
設計前的討論
• 應該要簡化客戶的工作。
• 做好該做的事,也就是產生圖表。
• 儘可能利用別人已經做好的底層繪圖機制。
• 儘量讓使用者知道的越少越好。
![Page 17: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/17.jpg)
設計前的討論
• 應該要簡化客戶的工作。
• 做好該做的事,也就是產生圖表。
• 儘可能利用別人已經做好的底層繪圖機制。
• 儘量讓使用者知道的越少越好。
• 讓使用者容易抽換圖表。
![Page 18: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/18.jpg)
設計前的討論
• 應該要簡化客戶的工作。
• 做好該做的事,也就是產生圖表。
• 儘可能利用別人已經做好的底層繪圖機制。
• 儘量讓使用者知道的越少越好。
• 讓使用者容易抽換圖表。
• 讓使用者容易擴充功能。
![Page 19: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/19.jpg)
設計前的討論
• 應該要簡化客戶的工作。
• 做好該做的事,也就是產生圖表。
• 儘可能利用別人已經做好的底層繪圖機制。
• 儘量讓使用者知道的越少越好。
• 讓使用者容易抽換圖表。
• 讓使用者容易擴充功能。
• 類別要可以分開開發。
![Page 20: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/20.jpg)
設計前的討論
• 應該要簡化客戶的工作。
• 做好該做的事,也就是產生圖表。
• 儘可能利用別人已經做好的底層繪圖機制。
• 儘量讓使用者知道的越少越好。
• 讓使用者容易抽換圖表。
• 讓使用者容易擴充功能。
• 類別要可以分開開發。
• 類別要易於測試。
![Page 21: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/21.jpg)
設計模式
![Page 22: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/22.jpg)
設計模式
• 一開始不用也沒關係,原則掌握住就好。
![Page 23: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/23.jpg)
設計模式
• 一開始不用也沒關係,原則掌握住就好。
• 不要去看模式的形,而是要懂模式的意。
![Page 24: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/24.jpg)
設計模式
• 一開始不用也沒關係,原則掌握住就好。
• 不要去看模式的形,而是要懂模式的意。
• 通常不會只出現一種模式。
![Page 25: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/25.jpg)
設計模式
• 一開始不用也沒關係,原則掌握住就好。
• 不要去看模式的形,而是要懂模式的意。
• 通常不會只出現一種模式。
進入設計階段!
![Page 26: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/26.jpg)
該如何設計套件架構?
![Page 27: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/27.jpg)
該如何設計套件架構?
• 直接從功能與實作分離開始。
![Page 28: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/28.jpg)
該如何設計套件架構?
• 直接從功能與實作分離開始。
• 功能:如何將使用者輸入的資料轉換成圖表的概念。
![Page 29: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/29.jpg)
該如何設計套件架構?
• 直接從功能與實作分離開始。
• 功能:如何將使用者輸入的資料轉換成圖表的概念。
• 實作:真正繪製出圖表的底層繪圖引擎。
![Page 30: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/30.jpg)
該如何設計套件架構?
• 直接從功能與實作分離開始。
• 功能:如何將使用者輸入的資料轉換成圖表的概念。
• 實作:真正繪製出圖表的底層繪圖引擎。
抽象功能與底層實作分處於兩端…
![Page 31: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/31.jpg)
Bridge Pattern
![Page 32: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/32.jpg)
![Page 33: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/33.jpg)
![Page 34: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/34.jpg)
繪圖引擎怎麼做?
![Page 35: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/35.jpg)
繪圖引擎怎麼做?
• 繪圖引擎已經定義好 API ,讓 Chart 使用。
![Page 36: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/36.jpg)
繪圖引擎怎麼做?
• 繪圖引擎已經定義好 API ,讓 Chart 使用。
• 直接轉介別人已經寫好的繪圖 API (例如GD 、 Image-Magick) 。
![Page 37: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/37.jpg)
繪圖引擎怎麼做?
• 繪圖引擎已經定義好 API ,讓 Chart 使用。
• 直接轉介別人已經寫好的繪圖 API (例如GD 、 Image-Magick) 。
借用第三方套件,轉換成我們的 API …
![Page 38: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/38.jpg)
Adapter Pattern
![Page 39: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/39.jpg)
![Page 40: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/40.jpg)
![Page 41: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/41.jpg)
![Page 42: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/42.jpg)
如何建立圖表?
![Page 43: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/43.jpg)
如何建立圖表?
• 用戶知道的越少越好。
![Page 44: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/44.jpg)
如何建立圖表?
• 用戶知道的越少越好。
• 讓抽象類別生出子類別。
![Page 45: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/45.jpg)
如何建立圖表?
• 用戶知道的越少越好。
• 讓抽象類別生出子類別。
封裝物件生成的過程…
![Page 46: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/46.jpg)
Simple Factory Pattern
![Page 47: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/47.jpg)
![Page 48: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/48.jpg)
圖表格式
![Page 49: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/49.jpg)
圖表格式
• 呈現資料比例:圓餅圖、長條圖。
![Page 50: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/50.jpg)
圖表格式
• 呈現資料比例:圓餅圖、長條圖。
• 同樣的 API ,不同的呈現方式。
![Page 51: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/51.jpg)
圖表格式
• 呈現資料比例:圓餅圖、長條圖。
• 同樣的 API ,不同的呈現方式。
可以抽換圖表格式…
![Page 52: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/52.jpg)
Strategy Pattern
![Page 53: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/53.jpg)
![Page 54: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/54.jpg)
![Page 55: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/55.jpg)
![Page 56: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/56.jpg)
還要注意什麼?
![Page 57: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/57.jpg)
還要注意什麼?
• 這個例子並沒有涵蓋所有模式。
![Page 58: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/58.jpg)
還要注意什麼?
• 這個例子並沒有涵蓋所有模式。
• 每種套件的設計不盡相同。
![Page 59: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/59.jpg)
還要注意什麼?
• 這個例子並沒有涵蓋所有模式。
• 每種套件的設計不盡相同。
• 不要將模式強套上去。
![Page 60: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/60.jpg)
還要注意什麼?
• 這個例子並沒有涵蓋所有模式。
• 每種套件的設計不盡相同。
• 不要將模式強套上去。
實作的事就交給你的同事吧~
![Page 61: Patterns in Library Design (套件設計裡的模式)](https://reader034.vdocuments.pub/reader034/viewer/2022042503/547d0453b379593a2b8b5116/html5/thumbnails/61.jpg)
謝謝收看