介紹套件中常見的設計模式

1. 套件設計裡的模式
大澤木小鐵

2. 故事背景

3. 故事背景
客戶不滿意市面上的圖表套件…

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

5. 故事背景
客戶不滿意市面上的圖表套件…
所以出資希望我們做一套…
本故事純屬虛構，台灣很少有這麼好的客戶。

6. ChartX!

7. ChartX!
本套件也是虛構，台灣很少人會花精力寫這種東西。

8. 需求

9. 需求
• 支援各類圖表，例如圓餅圖、長條圖。

10. 需求
• 支援各類圖表，例如圓餅圖、長條圖。
• 要易於使用，不必瞭解底層繪圖機制。

11. 需求
• 支援各類圖表，例如圓餅圖、長條圖。
• 要易於使用，不必瞭解底層繪圖機制。
這客戶非常有良心，沒有進一步的要求。
再次提醒，台灣很少有這麼好的客戶。

12. 設計前的討論

13. 設計前的討論
• 應該要簡化客戶的工作。

14. 設計前的討論
• 應該要簡化客戶的工作。
• 做好該做的事，也就是產生圖表。

15. 設計前的討論
• 應該要簡化客戶的工作。
• 做好該做的事，也就是產生圖表。
• 儘可能利用別人已經做好的底層繪圖機制。

16. 設計前的討論
• 應該要簡化客戶的工作。
• 做好該做的事，也就是產生圖表。
• 儘可能利用別人已經做好的底層繪圖機制。
• 儘量讓使用者知道的越少越好。

17. 設計前的討論
• 應該要簡化客戶的工作。
• 做好該做的事，也就是產生圖表。
• 儘可能利用別人已經做好的底層繪圖機制。
• 儘量讓使用者知道的越少越好。
• 讓使用者容易抽換圖表。

18. 設計前的討論
• 應該要簡化客戶的工作。
• 做好該做的事，也就是產生圖表。
• 儘可能利用別人已經做好的底層繪圖機制。
• 儘量讓使用者知道的越少越好。
• 讓使用者容易抽換圖表。
• 讓使用者容易擴充功能。

19. 設計前的討論
• 應該要簡化客戶的工作。
• 做好該做的事，也就是產生圖表。
• 儘可能利用別人已經做好的底層繪圖機制。
• 儘量讓使用者知道的越少越好。
• 讓使用者容易抽換圖表。
• 讓使用者容易擴充功能。
• 類別要可以分開開發。

20. 設計前的討論
• 應該要簡化客戶的工作。
• 做好該做的事，也就是產生圖表。
• 儘可能利用別人已經做好的底層繪圖機制。
• 儘量讓使用者知道的越少越好。
• 讓使用者容易抽換圖表。
• 讓使用者容易擴充功能。
• 類別要可以分開開發。
• 類別要易於測試。

21. 設計模式

22. 設計模式
• 一開始不用也沒關係，原則掌握住就好。

23. 設計模式
• 一開始不用也沒關係，原則掌握住就好。
• 不要去看模式的形，而是要懂模式的意。

24. 設計模式
• 一開始不用也沒關係，原則掌握住就好。
• 不要去看模式的形，而是要懂模式的意。
• 通常不會只出現一種模式。

25. 設計模式
• 一開始不用也沒關係，原則掌握住就好。
• 不要去看模式的形，而是要懂模式的意。
• 通常不會只出現一種模式。
進入設計階段！

26. 該如何設計套件架構？

27. 該如何設計套件架構？
• 直接從功能與實作分離開始。

28. 該如何設計套件架構？
• 直接從功能與實作分離開始。
• 功能：如何將使用者輸入的資料轉換成圖
表的概念。

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

30. 該如何設計套件架構？
• 直接從功能與實作分離開始。
• 功能：如何將使用者輸入的資料轉換成圖
表的概念。
• 實作：真正繪製出圖表的底層繪圖引擎。
抽象功能與底層實作分處於兩端…

31. Bridge Pattern

34. 繪圖引擎怎麼做？

35. 繪圖引擎怎麼做？
• 繪圖引擎已經定義好 API ，讓 Chart 使用。

36. 繪圖引擎怎麼做？
• 繪圖引擎已經定義好 API ，讓 Chart 使用。
• 直接轉介別人已經寫好的繪圖 API (例如
GD 、 Image-Magick) 。

37. 繪圖引擎怎麼做？
• 繪圖引擎已經定義好 API ，讓 Chart 使用。
• 直接轉介別人已經寫好的繪圖 API (例如
GD 、 Image-Magick) 。
借用第三方套件，轉換成我們的 API …

38. Adapter Pattern

42. 如何建立圖表？

43. 如何建立圖表？
• 用戶知道的越少越好。

44. 如何建立圖表？
• 用戶知道的越少越好。
• 讓抽象類別生出子類別。

45. 如何建立圖表？
• 用戶知道的越少越好。
• 讓抽象類別生出子類別。
封裝物件生成的過程…

46. Simple Factory Pattern

48. 圖表格式

49. 圖表格式
• 呈現資料比例：圓餅圖、長條圖。

50. 圖表格式
• 呈現資料比例：圓餅圖、長條圖。
• 同樣的 API ，不同的呈現方式。

51. 圖表格式
• 呈現資料比例：圓餅圖、長條圖。
• 同樣的 API ，不同的呈現方式。
可以抽換圖表格式…

52. Strategy Pattern

56. 還要注意什麼？

57. 還要注意什麼？
• 這個例子並沒有涵蓋所有模式。

58. 還要注意什麼？
• 這個例子並沒有涵蓋所有模式。
• 每種套件的設計不盡相同。

59. 還要注意什麼？
• 這個例子並沒有涵蓋所有模式。
• 每種套件的設計不盡相同。
• 不要將模式強套上去。

60. 還要注意什麼？
• 這個例子並沒有涵蓋所有模式。
• 每種套件的設計不盡相同。
• 不要將模式強套上去。
實作的事就交給你的同事吧~

61. 謝謝收看