快捷導(dǎo)航

JavaScript設(shè)計(jì)模式之裝飾者模式介紹

更新時(shí)間：2014年12月28日 09:35:17 投稿：junjie

這篇文章主要介紹了JavaScript設(shè)計(jì)模式之裝飾者模式介紹,通一個(gè)類來動(dòng)態(tài)的對(duì)另一個(gè)類的功能對(duì)象進(jìn)行前或后的修飾，給它輔加一些額外的功能; 這是對(duì)一個(gè)類對(duì)象功能的裝飾，裝飾的類跟被裝飾的類，要求擁有相同的訪問接口方法（功能）,需要的朋友可以參考下

裝飾者模式說明

說明：通一個(gè)類來動(dòng)態(tài)的對(duì)另一個(gè)類的功能對(duì)象進(jìn)行前或后的修飾，給它輔加一些額外的功能; 這是對(duì)一個(gè)類對(duì)象功能的裝飾，裝飾的類跟被裝飾的類，要求擁有相同的訪問接口方法（功能），這在動(dòng)態(tài)面向?qū)ο箢惱?，一般以?shí)現(xiàn)同一個(gè)接口(interface)來約束實(shí)現(xiàn)；裝飾類的要有對(duì)被裝飾類的引用，用于在裝飾類的相應(yīng)方法，調(diào)用相應(yīng)被裝飾類的方法，然后對(duì)其進(jìn)行修飾；

場(chǎng)景舉例:

1>. 比如我們生活中的穿衣服，一件襯衣，一件西裝外套，一條褲子，一條領(lǐng)帶，一雙漂亮的皮鞋; 每多穿一件，都是對(duì)前面一件或全身的裝飾；

2>. 比如我們有個(gè)類下的功能方法，可能用于寫日志，可能用于用戶登陸這樣的功能，也許寫入日志前需要獲取當(dāng)前操作者信息，或是登錄成功后，寫入一條日志；寫入日志之前的額外操作，它的總體來說也還是一個(gè)寫日志的目的；登孫成功后寫日志，它總體上也是一個(gè)登錄過程的操作信息；

因此裝飾者模式用于實(shí)現(xiàn)，兩者相似操作的一種場(chǎng)景；就是裝飾者對(duì)被裝飾者功能對(duì)象的擴(kuò)展，本質(zhì)還是原方法相同的功能范圍；

實(shí)例源碼

1. 被裝飾者類

復(fù)制代碼代碼如下:

function Wear() {

}

Wear.prototype.Shirt = function() {
//穿了件襯衫
　　console.log('穿上襯衫');
}

2. 裝飾者類

復(fù)制代碼代碼如下:

function Decorator(wear) {
this.wear = wear;
}

Decorator.prototype.Shirt = function() {
this.wear.Shirt();
//穿了件襯衫后，我又加上了領(lǐng)帶
}

3. 使用方法

復(fù)制代碼代碼如下:

var wear = new Wear();

var decorator = new Decorator(wear);

decorator.Shirt();

這樣就實(shí)現(xiàn)了對(duì) Wear 穿襯衫這個(gè)功能對(duì)象的動(dòng)態(tài)擴(kuò)展裝飾，你也不必知道原被裝飾方法是如何執(zhí)行，只要知道它的功能是什么就可以，然后知道我們要對(duì)其輔加的額外功能是什么就可以；

其他說明

裝飾者模式，真正提現(xiàn)了面向?qū)ο蠓椒ǖ模簩?duì)擴(kuò)展開放，對(duì)修改關(guān)閉的原則；所有想要的功能方法，都是在沒有修改[被裝飾類Wear]在擴(kuò)展[裝飾者這個(gè)類Decorator]的情況下進(jìn)行的;

裝飾者模式的一個(gè)主要特點(diǎn)，就是裝飾者對(duì)被裝飾者的引用，以實(shí)現(xiàn)對(duì)被裝飾者的無修改裝飾；

模擬下：先穿襯衫，再穿領(lǐng)帶，再穿西裝的場(chǎng)景: 上面的被裝飾者不變了:

2. 裝飾者類:

復(fù)制代碼代碼如下:

function Decorator(wear) {

    this.wear = wear;

}

Decorator.prototype.Shirt = function() {

    this.wear.Shirt(); //這里只穿襯衫;

}

3. 創(chuàng)建類似繼承 Decorator 子類的穿領(lǐng)帶類與穿西裝類

復(fù)制代碼代碼如下:

function Decorator_Tie(decorator) {
    this.decorator = decorator;
}
Decorator_Tie.prototype.Shirt = function() {
    this.decorator.Shirt(); //穿上襯衫
    console.log('再戴上領(lǐng)帶');
}

function Decorator_Western (decorator) {
    this.decorator = decorator;
}
Decorator_Western.prototype.Shirt = function() {
    this.decorator.Shirt();
    console.log('再穿上西裝');
}

使用方法:

復(fù)制代碼代碼如下:

//先穿上襯衫

var wear = new Wear();

var decorator = new Decorator(wear);

//decorator.Shirt();

//再戴上領(lǐng)帶

var tie = new Decorator_Tie(decorator);

//tie.Shirt();

//再穿上西裝

var western = new Decorator_Western(tie);

western.Shirt();

這就是一個(gè)穿衣服裝飾的模擬例子；

您可能感興趣的文章: