oop 對介面作設計
TRANSCRIPT
![Page 1: Oop 對介面作設計](https://reader035.vdocuments.net/reader035/viewer/2022082204/55b1461bbb61eb0a568b4762/html5/thumbnails/1.jpg)
OOP- 對介面作設計programming to an interface, not an implementation
ETREX2011.04.18http://etrex.blogspot.com/
![Page 2: Oop 對介面作設計](https://reader035.vdocuments.net/reader035/viewer/2022082204/55b1461bbb61eb0a568b4762/html5/thumbnails/2.jpg)
什麼是介面 ?what
![Page 3: Oop 對介面作設計](https://reader035.vdocuments.net/reader035/viewer/2022082204/55b1461bbb61eb0a568b4762/html5/thumbnails/3.jpg)
程式設計師認為的介面
![Page 4: Oop 對介面作設計](https://reader035.vdocuments.net/reader035/viewer/2022082204/55b1461bbb61eb0a568b4762/html5/thumbnails/4.jpg)
程式設計師認為的介面
![Page 5: Oop 對介面作設計](https://reader035.vdocuments.net/reader035/viewer/2022082204/55b1461bbb61eb0a568b4762/html5/thumbnails/5.jpg)
Google 圖片認為的介面
![Page 6: Oop 對介面作設計](https://reader035.vdocuments.net/reader035/viewer/2022082204/55b1461bbb61eb0a568b4762/html5/thumbnails/6.jpg)
Google 圖片認為的介面
![Page 7: Oop 對介面作設計](https://reader035.vdocuments.net/reader035/viewer/2022082204/55b1461bbb61eb0a568b4762/html5/thumbnails/7.jpg)
var USB 插槽 1 : USB 設備 = new USB 滑鼠 ();
我認為的介面是一種工業標準
![Page 8: Oop 對介面作設計](https://reader035.vdocuments.net/reader035/viewer/2022082204/55b1461bbb61eb0a568b4762/html5/thumbnails/8.jpg)
var USB 插槽 1 : USB 設備 = new USB 滑鼠 ();
公的是介面實作者
![Page 9: Oop 對介面作設計](https://reader035.vdocuments.net/reader035/viewer/2022082204/55b1461bbb61eb0a568b4762/html5/thumbnails/9.jpg)
var USB 插槽 1 : USB 設備 = new USB 滑鼠 ();
母的是介面使用者
![Page 10: Oop 對介面作設計](https://reader035.vdocuments.net/reader035/viewer/2022082204/55b1461bbb61eb0a568b4762/html5/thumbnails/10.jpg)
雌雄同體 !!!
public class PS2 轉 USB 接頭 implements PS2 設備{
public var usb 插槽 :USB 設備 ;}
![Page 11: Oop 對介面作設計](https://reader035.vdocuments.net/reader035/viewer/2022082204/55b1461bbb61eb0a568b4762/html5/thumbnails/11.jpg)
雌雌雌雌雄同體 !!!
public class 延長線 implements 電器{
public var 插槽 1: 電器 ;public var 插槽 2: 電器 ;public var 插槽 3: 電器 ;public var 插槽 4: 電器 ;
}
![Page 12: Oop 對介面作設計](https://reader035.vdocuments.net/reader035/viewer/2022082204/55b1461bbb61eb0a568b4762/html5/thumbnails/12.jpg)
何時使用介面 ?when
![Page 13: Oop 對介面作設計](https://reader035.vdocuments.net/reader035/viewer/2022082204/55b1461bbb61eb0a568b4762/html5/thumbnails/13.jpg)
程式碼重用的關鍵在於介面設計 reuse
一體成型 : 電視螢幕壞了零組件化 : 電腦螢幕壞了 公
??
![Page 14: Oop 對介面作設計](https://reader035.vdocuments.net/reader035/viewer/2022082204/55b1461bbb61eb0a568b4762/html5/thumbnails/14.jpg)
可以滿足未來需求嗎 ? 可抽換嗎 ?new requirement
電腦外接 USB 設備Firefox 外掛
母母
![Page 15: Oop 對介面作設計](https://reader035.vdocuments.net/reader035/viewer/2022082204/55b1461bbb61eb0a568b4762/html5/thumbnails/15.jpg)
如何設計一個好介面 ?how
![Page 16: Oop 對介面作設計](https://reader035.vdocuments.net/reader035/viewer/2022082204/55b1461bbb61eb0a568b4762/html5/thumbnails/16.jpg)
介面的修改通常會造成大問題
向下相容 : USB2.0 → USB3.0非向下相容 : AS2.0 → AS3.0 Office2003 → Office2007
改了就得重寫 ( 學 )
XO
![Page 17: Oop 對介面作設計](https://reader035.vdocuments.net/reader035/viewer/2022082204/55b1461bbb61eb0a568b4762/html5/thumbnails/17.jpg)
良好的介面通常有多個實作
OS: 能不能多工Interface : 能不能多公 XD
JOKE
![Page 18: Oop 對介面作設計](https://reader035.vdocuments.net/reader035/viewer/2022082204/55b1461bbb61eb0a568b4762/html5/thumbnails/18.jpg)
包裝未來需求
新需求交給新的 Class 解決 不用修改舊程式碼
舊程式碼可重用
公母母
![Page 19: Oop 對介面作設計](https://reader035.vdocuments.net/reader035/viewer/2022082204/55b1461bbb61eb0a568b4762/html5/thumbnails/19.jpg)
一體成型的程式碼
母
公 未來需求
重構 refactoring
→
![Page 20: Oop 對介面作設計](https://reader035.vdocuments.net/reader035/viewer/2022082204/55b1461bbb61eb0a568b4762/html5/thumbnails/20.jpg)
母
公 未來需求
用介面包裝未來需求
介面
![Page 21: Oop 對介面作設計](https://reader035.vdocuments.net/reader035/viewer/2022082204/55b1461bbb61eb0a568b4762/html5/thumbnails/21.jpg)
母
公 未來需求
超強 super strong
以不變
應萬變
![Page 22: Oop 對介面作設計](https://reader035.vdocuments.net/reader035/viewer/2022082204/55b1461bbb61eb0a568b4762/html5/thumbnails/22.jpg)
可是我不會包裝需求 怎麼辦 ?I can’t find the cut point
![Page 23: Oop 對介面作設計](https://reader035.vdocuments.net/reader035/viewer/2022082204/55b1461bbb61eb0a568b4762/html5/thumbnails/23.jpg)
我覺得的步驟step
步驟 1 :先寫出一體成型的程式步驟 2 :找出相同之處和不同之處步驟 3 :把函數 ( 程式碼 ) 當變數
![Page 24: Oop 對介面作設計](https://reader035.vdocuments.net/reader035/viewer/2022082204/55b1461bbb61eb0a568b4762/html5/thumbnails/24.jpg)
相同之處和不同之處
資料:相同的資料 不同的資料來源UI :相同的資料 不同的顯示方式應用程式:根據不同的狀態
滑鼠按下時有不同的行為
![Page 25: Oop 對介面作設計](https://reader035.vdocuments.net/reader035/viewer/2022082204/55b1461bbb61eb0a568b4762/html5/thumbnails/25.jpg)
把函數 ( 程式碼 ) 當變數
var state : String = “init”;var state : 滑鼠行為 = new Init 滑鼠行為();
![Page 26: Oop 對介面作設計](https://reader035.vdocuments.net/reader035/viewer/2022082204/55b1461bbb61eb0a568b4762/html5/thumbnails/26.jpg)
差異在爽度
Function onMouseDown(){ If(state ==“init”) { //do init } else if(state == ….) { }}
Function onMouseDown(){ // 超爽 state.onMouseDown();}
![Page 27: Oop 對介面作設計](https://reader035.vdocuments.net/reader035/viewer/2022082204/55b1461bbb61eb0a568b4762/html5/thumbnails/27.jpg)
程式分層概念
分越多層 程式越慢類別越多 程式碼越多
![Page 28: Oop 對介面作設計](https://reader035.vdocuments.net/reader035/viewer/2022082204/55b1461bbb61eb0a568b4762/html5/thumbnails/28.jpg)
相同的資料 不同的資料來源
主程式
MySQL
MSSQL
新需求
傳資料
![Page 29: Oop 對介面作設計](https://reader035.vdocuments.net/reader035/viewer/2022082204/55b1461bbb61eb0a568b4762/html5/thumbnails/29.jpg)
相同的資料 不同的資料來源
主程式
MySQL
MSSQL
新需求
統一存取資料的方法
![Page 30: Oop 對介面作設計](https://reader035.vdocuments.net/reader035/viewer/2022082204/55b1461bbb61eb0a568b4762/html5/thumbnails/30.jpg)
相同的資料 不同的顯示方式
主程式
表
圖
新需求
傳資料
![Page 31: Oop 對介面作設計](https://reader035.vdocuments.net/reader035/viewer/2022082204/55b1461bbb61eb0a568b4762/html5/thumbnails/31.jpg)
相同的資料 不同的顯示方式
主程式
表
圖
新需求
統一顯示資料的方法
![Page 32: Oop 對介面作設計](https://reader035.vdocuments.net/reader035/viewer/2022082204/55b1461bbb61eb0a568b4762/html5/thumbnails/32.jpg)
設計模式design pattern
![Page 33: Oop 對介面作設計](https://reader035.vdocuments.net/reader035/viewer/2022082204/55b1461bbb61eb0a568b4762/html5/thumbnails/33.jpg)
你已經學會的一些設計模式
![Page 34: Oop 對介面作設計](https://reader035.vdocuments.net/reader035/viewer/2022082204/55b1461bbb61eb0a568b4762/html5/thumbnails/34.jpg)
Adaptor Pattern
public class PS2 轉 USB 接頭 implements PS2 設備{
public var usb 插槽 :USB 設備 ;}
![Page 35: Oop 對介面作設計](https://reader035.vdocuments.net/reader035/viewer/2022082204/55b1461bbb61eb0a568b4762/html5/thumbnails/35.jpg)
Composite Pattern
public class 延長線 implements 電器{
public var 插槽 1: 電器 ;public var 插槽 2: 電器 ;public var 插槽 3: 電器 ;public var 插槽 4: 電器 ;
}
![Page 36: Oop 對介面作設計](https://reader035.vdocuments.net/reader035/viewer/2022082204/55b1461bbb61eb0a568b4762/html5/thumbnails/36.jpg)
Data Access Object(DAO) Pattern
主程式
MySQL
MSSQL
新需求
統一存取資料的方法
![Page 37: Oop 對介面作設計](https://reader035.vdocuments.net/reader035/viewer/2022082204/55b1461bbb61eb0a568b4762/html5/thumbnails/37.jpg)
把函數 ( 程式碼 ) 當變數
var state : String = “init”;var state : 滑鼠行為 = new Init 滑鼠行為();
Strategy Pattern
![Page 38: Oop 對介面作設計](https://reader035.vdocuments.net/reader035/viewer/2022082204/55b1461bbb61eb0a568b4762/html5/thumbnails/38.jpg)
最近在寫的程式
![Page 39: Oop 對介面作設計](https://reader035.vdocuments.net/reader035/viewer/2022082204/55b1461bbb61eb0a568b4762/html5/thumbnails/39.jpg)
ETREX 大大講的我聽不懂 怎麼辦 ?
Design Pattern 是包裝需求的典範
![Page 40: Oop 對介面作設計](https://reader035.vdocuments.net/reader035/viewer/2022082204/55b1461bbb61eb0a568b4762/html5/thumbnails/40.jpg)
謝謝大家Q & A