javaScript設計模式之裝飾者模式

裝飾者模式能夠在不改變物件自身的基礎上，在程式執行期間對物件動態的新增職責。與繼承相比，裝飾者是一種更加輕便靈活的做法，這是一種「即用即付」的方式。

var plane = function(){};
plane.prototype.fire = function()
var missiledecorator = function( plane )
missiledecorator.prototype.fire = function()
var atomdecorator = function( plane )
atomdecorator.prototype.fire = function()
var plane = new plane();
plane = new missiledecorator( plane );
plane = new atomdecorator( plane );
plane.fire();

這種給物件以一條鏈的方式進行引用，形成了乙個聚合物件，這些物件都擁有相同的介面（fire)方法，當請求達到鏈中的某個物件時，這個物件會執行自身的操作，隨後把請求**給鏈中的下乙個物件。

改寫物件或者物件的某個方法，並不需要使用「類」來裝飾實現裝飾者模式：

var plane = 
}	var missiledecorator = function()
var atomdecorator = function()
var fire1 = plane.fire;
plane.fire = function()
var fire2 = plane.fire;
plane.fire = function()
plane.fire();
// 分別輸出： 發射普通子彈、發射飛彈、發射原子彈

下面引入乙個aop裝飾函式，其中把職責分為更細的函式，隨後通過裝飾者把他們合併到一起。

使用者名稱：密碼：

這段**驗證和輸入完全分離開來，他們不再有任何偶和關係。其中formsubmit 函式除了提交ajax請求以外，還要驗證使用者輸入的合法性；分離校驗輸入和提交ajax請求的**，把輸入的邏輯放到validata函式中，並且約定validate函式返回false的時候表示驗證未通過。

裝飾者模式和**模式的結構看起來非常像，這兩種模式都描述了怎樣為物件提供一定程度上的間接引用，他們實際上都保留了對另外乙個物件的引用，並且對那個物件傳送請求。**模式強調proxy與它的實體之間的關係，這種關係一開始就被確定，可以靜態的表達。而裝飾者模式用於一開始不能確定物件的全部功能時，**模式通常只有一層**-本體的引用，而裝飾者模式通常會形成一條長長的裝飾鏈。比如在**預載入的例子中，本體負責設定img節點的src，**則提供預載入的功能，這看起來也是「加入行動」的一種方式；而裝飾者模式是實實在在的為物件增加新的職責和行為，而**做的事情還是和本體一樣，最終都是設定src。

javaScript設計模式之裝飾者模式

JavaScript設計模式之工廠模式

JavaScript 設計模式之工廠模式

JavaScript 設計模式之工廠模式

javaScript設計模式之裝飾者模式

JavaScript設計模式之工廠模式

JavaScript 設計模式之工廠模式

JavaScript 設計模式之工廠模式

相關推薦