建站
咨詢
售后
建站咨詢
新聞中心
本篇內(nèi)容主要講解“Decorator裝飾器模式怎么應(yīng)用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“Decorator裝飾器模式怎么應(yīng)用”吧!
成都創(chuàng)新互聯(lián)公司是一家專注于成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計與策劃設(shè)計,烏恰網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)10年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:烏恰等地區(qū)。烏恰做網(wǎng)站價格咨詢:18980820575
Decorator（裝飾器模式）
Decorator（裝飾器模式）屬于結(jié)構(gòu)型模式，是一種拓展對象額外功能的設(shè)計模式，別名 wrapper。
意圖：動態(tài)地給一個對象添加一些額外的職責(zé)。就增加功能來說，Decorator 模式相比生成子類更為靈活。
舉例子
如果看不懂上面的意圖介紹，沒有關(guān)系，設(shè)計模式需要在日常工作里用起來，結(jié)合例子可以加深你的理解，下面我準(zhǔn)備了三個例子，讓你體會什么場景下會用到這種設(shè)計模式。
相框
照片 + 相框 = 帶相框的照片，這背后就是一種裝飾器模式：照片具有看的功能，相框具有裝飾功能，在你看照片的基礎(chǔ)上，還能看到精心設(shè)計的相框，增加了美感，同時相框還可以增加照片的保存時間與安全性。
相框與照片是一種組合關(guān)系，任何照片都可以放到相框中，而不是每個照片生成一個特定的相框，顯然，組合的方式更加靈活。
帶有緩存的文件讀寫
假設(shè)我們有一個類 FileIO 用來讀寫文件，但是沒有緩存能力，此時是新建一個 CachedFileIO 子類好，還是創(chuàng)建一個 CachedIO?
一眼看上去好像 CachedFileIO 用起來更方便，而 CachedIO 的用法是 new CachedIO(new FileIO()) 稍微麻煩一些，但如果我們增加一個網(wǎng)絡(luò)讀寫類 NetworkIO，一個數(shù)據(jù)庫讀寫類 DBIO 呢？
顯然，繼承的方式會使子類數(shù)量極速膨脹，而組合的方式則非常靈活，生成一個支持緩存的網(wǎng)絡(luò)讀寫器，只需要 new CachedIO(new NetworkIO()) 即可，這就是組合靈活的地方。
當(dāng)然，為了實現(xiàn)這個能力，CachedIO 需要與 FileIO、CachedFileIO、CachedIO 繼承自同一個類，具備相同的接口。
搭建平臺的組件 wrapper
裝飾器模式別名也叫 wrapper，wrapper 也經(jīng)常在前端搭建場景中遇到，當(dāng)搭建平臺加載一個組件時，希望拓展其基礎(chǔ)能力，一般會使用 wrapper 層對組件進行嵌套，wrapper 層就是在不改變 API 的基礎(chǔ)上，對第三方組件進行增強。
意圖解釋
意圖：動態(tài)地給一個對象添加一些額外的職責(zé)。就增加功能來說，Decorator 模式相比生成子類更為靈活。
不同于繼承，組合可以在運行時進行，所以稱之為 “動態(tài)添加”，這里的 “額外職責(zé)” 泛指一切功能，比如在按鈕點擊時進行一些 log 日志的打印，在繪制 text 文本框時，額外繪制一個滾動條和邊框等等。
“就增加功能來說，Decorator 模式相比生成子類更為靈活” 這句話的含義是，組合比繼承更靈活，當(dāng)可拓展的功能很多時，繼承方案會產(chǎn)生大量的子類，而組合可以提前寫好處理函數(shù)，在需要時動態(tài)構(gòu)造，顯然是更靈活的。
結(jié)構(gòu)圖
ConcreteComponent 指的是需要被裝飾的組件，可以看到，裝飾器 Decorator 與他都繼承同一個類，這樣能保證 API 的一致，才保證無論裝飾多少層，始終符合 Component 類型。
裝飾器如果有多種，就要將 Decorator 申明為抽象類，ConcreteDecoratorA、ConcreteDecoratorB 分別實現(xiàn)它們，如果只有一種裝飾器，可以退化到 Decorator 自身就是一種實現(xiàn)。
代碼例子
下面例子使用 typescript 編寫。
class Component {
// 具有點擊事件
public onClick = () => {}
}
class Decorator extends Component {
private _component
constructor(component) {
this._component = component
}
public onClick = () => {
log('打點')
this._component.onClick()
}
}
const component = new Component()
// 一個普通的點擊
component.onClick()
const wrapperComponent = new Decorator(component)
// 一個具有打點功能的點擊
wrapperComponent.onClick()
其實方法很簡單，通過組合，我們得到了一個能力更強的組件，而實現(xiàn)的方式就是利用構(gòu)造函數(shù)保存組件實例，并在復(fù)寫函數(shù)時，增加一些增強實現(xiàn)。
弊端
裝飾器的問題也是組合的問題，過多的組合會導(dǎo)致：
組合過程的復(fù)雜，要生成過多的對象。
包裝器層次增多，會增加調(diào)試成本，我們比較難追溯到一個 bug 是在哪一層包裝導(dǎo)致的。
到此，相信大家對“Decorator裝飾器模式怎么應(yīng)用”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
網(wǎng)站欄目：Decorator裝飾器模式怎么應(yīng)用
轉(zhuǎn)載源于：http://www.dlmjj.cn/article/gjdhph.html
