TypeScript設計模式之門面 介面卡

2021-07-28 10:00:59 字數 1656 閱讀 7934

看看用typescript怎樣實現常見的設計模式,順便複習一下。

學模式最重要的不是記uml,而是知道什麼模式可以解決什麼樣的問題,在做專案時碰到問題可以想到用哪個模式可以解決,uml忘了可以查,思想記住就好。

這裡盡量用原創的,實際中能碰到的例子來說明模式的特點和用處。

介面卡模式的目的主要在於解決介面相容性。

下面用typescript簡單實現一下介面卡模式:

假定現在專案已經在用乙個畫圖介面graph以及它的實現canvas2d:

inte***ce graph

class canvas2d implements graph

drawpie()

}

專案公升級需要提高ui美觀,引入3d畫相簿canvas3d,兩者介面不一樣:

class canvas3d

draw3dpie()

}

專案是依賴介面graph的,如果要直接加上3d功能就需要改介面,這個代價比較大,這時介面卡派上用場:

class canvas3dadapter implements graph

drawpie()

}let canvas2d: graph = new canvas2d();

canvas2d.drawline();

canvas2d.drawpie();

let canvas3d: graph = new canvas3dadapter();

canvas3d.drawline();

canvas3d.drawpie();

//輸出

draw 2d line

draw 2d pie

draw 3d line

draw 3d pie

這樣,使用時用canvas3dadapter就可以了,專案還是只依賴graph這個介面就可以畫出3d圖。

在canvas3dadapter裡引入了canvas3d物件,可以看出這是物件上的行為適配,所以叫物件介面卡。

另外還有一種叫類介面卡,使用多重繼承來使新的適配類繼承原來介面並且擁有兩個類的功能,在typescript裡雖然不能用多重繼承,但是可以用mixins方式強行加起來,這裡就不寫例子了。

外觀模式的目的主要在於簡化呼叫,只需要乙個簡單的介面就可以解除對其他類的依賴。

//第三方繪相簿

class axis

class line

class fanshape

專案沒必要和第三方的庫緊耦合,所以按需求抽象出乙個介面graph:

// 專案介面

inte***ce graph

再用第三方庫里的畫圖功能實現這個介面:

class chart implements graph

drawpiechart()

}

這樣專案只需要通過graph介面來畫圖表就好了,而不用知道具體的細節。

與介面卡相同的點是同樣是一種封裝處理,不同的是介面卡已有乙個介面,而用這個介面不能使用另外乙個系統,這時需要把那個系統做個適配來匹配現有介面,重點在於相容介面,解決衝突。

而外觀則是封裝現有系統來對外提供一種簡單的使用方式,重點在於簡化呼叫。

TypeScript命令模式

abstract class command protected receiver receiver null constructor receiver receiver yblog.log test 父類的建構函式 this.receiver receiver abstract excute vo...

TypeScript門面模式

門面模式 外觀模式 減少系統的相互依賴。提高靈活性。提高安全性。要求乙個子系統的外部與其內部的通訊必須通過乙個統一的物件進行。門面是提供乙個高層次的介面,使得系統易於使用。inte ce inobserver 觀察者 update void class aaaa doa yblog.log test...

TypeScript設計模式之門面 介面卡

看看用typescript怎樣實現常見的設計模式,順便複習一下。學模式最重要的不是記uml,而是知道什麼模式可以解決什麼樣的問題,在做專案時碰到問題可以想到用哪個模式可以解決,uml忘了可以查,思想記住就好。這裡盡量用原創的,實際中能碰到的例子來說明模式的特點和用處。介面卡模式的目的主要在於解決介面...