JavaScript設計模式之裝飾者模式介紹，javascript設計模式

JavaScript設計模式之裝飾者模式介紹，javascript設計模式

裝飾者模式說明

說明：通一個類來動態對另一個類的功能對象進行前或後的修飾，給它輔加一些額外的功能; 這是對一個類對象功能的裝飾，裝飾的類跟被裝飾的類，要求擁有相同的提供者方法（功能），這在動態物件導向類裡，一般以實現同一個介面(interface)來約束實現；裝飾類的要有對被裝飾類的引用，用於在裝飾類的相應方法，調用相應被裝飾類的方法，然後對其進行修飾；

情境舉例:

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

2>. 比如我們有個類下的功能方法，可能用於寫日誌，可能用於使用者登陸這樣的功能，也許寫入日誌前需要擷取當前操作者資訊，或是登入成功後，寫入一條日誌；寫入日誌之前的額外操作，它的總體來說也還是一個寫日誌的目的；登孫成功後寫日誌，它總體上也是一個登入過程的操作資訊；

因此裝飾者模式用於實現，兩者相似操作的一種情境；就是裝飾者對被裝飾者功能對象的擴充，本質還是原方法相同的功能範圍；

執行個體源碼

1. 被裝飾者類

複製代碼 代碼如下:
function Wear() {
   
}

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

2. 裝飾者類

複製代碼 代碼如下:
function Decorator(wear) {
    this.wear = wear;
}

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

3. 使用方法

複製代碼 代碼如下:
var wear = new Wear();
var decorator = new Decorator(wear);
decorator.Shirt();

這樣就實現了對 Wear 穿襯衫這個功能對象的動態擴充裝飾，你也不必知道原被裝飾方法是如何執行，只要知道它的功能是什麼就可以，然後知道我們要對其輔加的額外功能是什麼就可以；

其他說明

裝飾者模式，真正提現了物件導向方法的：對擴充開放，對修改關閉的原則；所有想要的功能方法，都是在沒有修改[被裝飾類Wear]在擴充[裝飾者這個類Decorator]的情況下進行的;

裝飾者模式的一個主要特點，就是裝飾者對被裝飾者的引用，以實現對被裝飾者的無修改裝飾；

類比下：先穿襯衫，再穿領帶，再穿西裝的情境: 上面的被裝飾者不變了:

2. 裝飾者類:

複製代碼 代碼如下:
function Decorator(wear) {
    this.wear = wear;
}
Decorator.prototype.Shirt = function() {
    this.wear.Shirt(); //這裡只穿襯衫;
}

3. 建立類似繼承 Decorator 子類的 穿領帶類與穿西裝類

複製代碼 代碼如下:
function Decorator_Tie(decorator) {
    this.decorator = decorator;
}   
Decorator_Tie.prototype.Shirt = function() {
    this.decorator.Shirt(); //穿上襯衫
    console.log('再戴上領帶');
}

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

使用方法:

複製代碼 代碼如下:
//先穿上襯衫
var wear = new Wear();
var decorator = new Decorator(wear);
//decorator.Shirt();
//再戴上領帶
var tie = new Decorator_Tie(decorator);
//tie.Shirt();
//再穿上西裝
var western = new Decorator_Western(tie);
western.Shirt();

這就是一個穿衣服裝飾的類比例子；