js設計模式 裝飾者模式

2022-08-02 07:30:10 字數 2164 閱讀 9726

裝飾者模式可以動態地給乙個物件新增一些額外的職責。就增加功能來說,裝飾者模式比通過繼承生成子類更為靈活。

下面通過乙個例子來詳細的介紹一下。

我們銷售一台電腦,每個電腦都是乙個新的computer物件,它都有乙個price屬性來表示**,並且可以通過它的getprice方法來得到它的**:

var computer = function

(price);

computer.prototype.getprice = function

();

現在有個客戶想要再加個記憶體條,如果通過繼承的方式,我們要新增乙個computerwithmemory物件。

var computerwithmemory = function

(price);

computerwithmemory.prototype = new

computer();

computerwithmemory.prototype.getprice = function

();

我們來驗證一下:

var computer = new

computer();

var computer1 = new

computerwithmemory();

computer.getprice();  

//100

computer1.getprice();  //

120

如果客戶要加個固態硬碟,我們就有要再新增乙個computerwithssd物件,如果客戶既要記憶體條,又要固態硬碟,那我們就要再新增乙個computerwithmemoryandssd物件。

下面我們來用裝飾者模式實現:

我們在computer中加乙個_decoratelist屬性來儲存新增到物件上的裝飾者列表:

var computer = function

(price);

接下來,我們在computer物件上預先定義好需要的裝飾者:

computer.decorators ={};

computer.decorators.memory =

};

computer.decorators用來儲存我們的裝飾者。上面我們定義了乙個加記憶體條的裝飾者memory,注意它的getprice方法是帶引數price的。

到這裡裝飾者我們已經有了,但是裝飾者是需要註冊到具體物件上去的,我們就需要在加乙個註冊的方法:

computer.prototype.decorate = function

(decorate);

註冊方法很簡單,就是把要註冊的裝飾者加入到物件的裝飾者列表中。引數decorate表示裝飾者的名字,例如如果是上面的memory裝飾者,引數decorate就是字串「memory」。

最後我們再重寫一下getprice方法:

computer.prototype.getprice = function

()

return

price;

};

這樣我們的裝飾者模式就完成了,我們再來測試一下:

var computer = new

computer();

computer.getprice();

//100

//加個記憶體條

computer.decorate('memory');

computer.getprice();

//120

現在如果我們要想加乙個固態硬碟,我們只要在computer物件上再加個ssd裝飾者:

computer.decorators.ssd =

};

再來測試一下:

var computer = new

computer();

//加個固態硬碟

computer.decorate('ssd');

computer.getprice();

//130

//再加個記憶體條

computer.decorate('memory');

computer.getprice();

//150

JS設計模式 裝飾者模式

昨天又學了白賀翔老師的js設計模式 裝飾者模式,下面來分享一下它的實現哈。裝飾者模式 就是在保證不改變原始物件的基礎上,新增新的方法或請求.裝飾者模式兩個要求 1.實現同一批介面 2.需要含有子類 介面類的實現 var carinte ce new bh.inte ce carinte ce get...

JS設計模式 裝飾者模式

裝飾者模式 在不必改變原類檔案和使用繼承的情況下,動態地擴充套件乙個物件的功能。它是通過建立乙個包裝物件,也就是裝飾來包裹真實的物件 1 裝飾物件和真實物件有同樣的介面。這樣client物件就能以和真實物件同樣的方式和裝飾物件互動。2 裝飾物件包括乙個真實物件的引用 reference 3 裝飾物件...

JS設計模式之裝飾者模式

裝飾者模式就是透明把物件包裝在具有同樣介面的另一物件中。相對於建立子類來說,裝飾者是一種友好的選擇。裝飾者用於給物件增加功能,可以創造大量的子類。例如 function extend subclass,superclass f.prototype superclass.prototype subcl...