JavaScript 設(shè)計(jì)模式之組合模式解析
更新時(shí)間：2010年04月09日 11:07:37 作者：
“組合模式”顧名思意就是將多種實(shí)現(xiàn)組合在一起而達(dá)到牽一處而動(dòng)全身的效果。
怎么說呢？！就像是動(dòng)物（組合對象）一樣，當(dāng)它生下后代（葉對象）時(shí)，它的后代就有了某種功能（比如：挖洞，聽力好等等）；也像是一棵樹，它有一個(gè)根（組合對象）然后是從這個(gè)棵樹向外冒出的其他枝桿（組合對象）以及從這些枝桿又向外長的葉子（葉對象）。換句話說，就是當(dāng)祖先已經(jīng)有了，那么只要從這個(gè)祖先衍生出來的其他孩子（包括這個(gè)祖先下的其他組合對象）已經(jīng)就具備了某種功能，看上去貌似又有些像是繼承?！敖M合模式”在組合對象的層次體系中有兩種類型的對象：葉對象和組合對象。組合模式擅長于對大批對象進(jìn)行操作。
“組合模式”就是在做一個(gè)項(xiàng)目的時(shí)候，我們要把在這個(gè)項(xiàng)目中即將出現(xiàn)的方法都在組合對象中定義（包括葉對象中的方法），而它們的葉對象將會(huì)繼承組合對象。當(dāng)組合對象被實(shí)例化后其葉對象的方法也相應(yīng)地被實(shí)例化了。可能我說的有些亂，下面就用一個(gè)例子來說明吧。
“組合模式”是一種專為創(chuàng)建Web上的動(dòng)態(tài)用戶界面而量身定制的模式。使用這種模式，可以用一條命令在多個(gè)對象上激發(fā)復(fù)雜的或遞歸的行為。
使用“組合模式”可以為我們帶來兩大好處：
1、可以用同樣的方法處理對象的集合與其中的特定子對象。
2、可以用來把一批子對象組織成樹形結(jié)構(gòu)，并且使整棵樹都可以被遍歷。
只有同時(shí)具備以下兩個(gè)條件進(jìn)才適合使用組合模式：
1、存在一批組織成某處層次體系的對象（具體結(jié)構(gòu)可能在開發(fā)期間無法知道）。
2、希望對這批對象或其中的一部分對象實(shí)話一個(gè)操作。
下面看一下示例：
具體要求是做一個(gè)圖片庫且可以有選擇地隱藏或顯示圖片庫的特定部分。這可能是單獨(dú)圖片，也可能是圖片庫?，F(xiàn)在就需要兩個(gè)類來完成這個(gè)功能：用作圖片庫的組合對象類和用于圖片本身的葉對象類，代碼如下：
在上面的代碼中，首先定義的是組合對象類和葉對象類應(yīng)該實(shí)現(xiàn)的接口。除了常規(guī)的組合遠(yuǎn)景一分錢上，這些類要怕硬欺軟 操作只包括hide和show。接下來我們定義葉對象。葉對象實(shí)現(xiàn)hide和show，代碼如下：
var Composite = new Interface('Composite', ['add', 'remove', 'getChild']); // 檢查組合對象Composite應(yīng)該具備的方法
var GalleryItem = new Interface('GalleryItem', ['hide', 'show']); // 檢查組合對象GalleryItem應(yīng)該具備的方法
// DynamicGallery Class
var DynamicGallery = function(id){ // 實(shí)現(xiàn)Composite，GalleryItem組合對象類
this.children = [];
this.element = document.createElement('div');
this.element.id = id;
this.element.className = 'dynamic-gallery';
}
DynamicGallery.prototype = {
// 實(shí)現(xiàn)Composite組合對象接口
add : function(child){
Interface.ensureImplements(child, Composite, DynamicGallery);
this.children.push(child);
this.element.appendChild(child.getElement());
},
remove : function(child){
for(var node, i = 0; node = this.getChild(i); i++){
if(node == child){
this.children.splice(i, 1);
break;
}
}
this.element.removeChild(child.getElement());
},
getChild : function(i){
return this.children[i];
},
// 實(shí)現(xiàn)DynamicGallery組合對象接口
hide : function(){
for(var node, i = 0; node = this.getChild(i); i++){
node.hide();
}
this.element.style.display = 'none';
},
show : functioln(){
this.element.style.display = 'block';
for(var node, i = 0; node = getChild(i); i++){
node.show();
}
},
// 幫助方法
getElement : function(){
return this.element;
}
}
以下是設(shè)置葉對象的相應(yīng)方法：
// GalleryImage class
var GalleryImage = function(src){ // 實(shí)現(xiàn)Composite和GalleryItem組合對象中所定義的方法
this.element = document.createElement('img');
this.element.className = 'gallery-image';
this.element.src = src;
}
GalleryImage.prototype = {
// 實(shí)現(xiàn)Composite接口
// 這些是葉結(jié)點(diǎn)，所以我們不用實(shí)現(xiàn)這些方法，我們只需要定義即可
add : function(){},
remove : function(){},
getChild : function(){},
// 實(shí)現(xiàn)GalleryItem接口
hide : function(){
this.element.style.display = 'none';
},
show : function(){
this.element.style.display = '';
},
// 幫助方法
getElement : function(){
return this.element;
}
}
這是一個(gè)演示組合模式的工作方式的例子。每個(gè)類都很簡單，但由于有了這樣一種層次體系，我們就可以執(zhí)行一些復(fù)雜操作。GalleryImage類的構(gòu)造函數(shù)會(huì)創(chuàng)建一個(gè)image元素。這個(gè)類定義中的其余部分由空的組合對象方法（因?yàn)檫@是葉結(jié)點(diǎn)）和GalleryItem要求的操作組成?，F(xiàn)在我們可以使用這兩個(gè)類來管理圖片：
var topGallery = new DynamicGallery('top-gallery');
topGallery.add(new GalleryImage('/img/image-1.jpg'));
topGallery.add(new GalleryImage('/img/image-2.jpg'));
topGallery.add(new GalleryImage('/img/image-3.jpg'));
var vacationPhotos = new DyamicGallery('vacation-photos');
for(var i = 0, i < 30; i++){
vacationPhotos.add(new GalleryImage('/img/vac/image-' + i + '.jpg'));
}
topGallery.add(vacationPhotos);
topGallery.show();
vacationPhotos.hide();
組合模式之利，使用組合模式，簡單的操作也能產(chǎn)生復(fù)雜的結(jié)果。不必編寫大師手工遍歷數(shù)組或其他數(shù)據(jù)結(jié)構(gòu)的粘合代碼，只需對最頂層的對象執(zhí)行操作，主每一個(gè)子對象自己傳遞這個(gè)操作即可。這對于那些再三執(zhí)行的操作尤其有用。在組合模式中，各個(gè)對象之間的耦合非常松散。每當(dāng)對頂層組合對象執(zhí)行一個(gè)操作時(shí)，實(shí)際上是在對整個(gè)結(jié)構(gòu)進(jìn)行嘗試優(yōu)先的搜索以查找節(jié)點(diǎn)。
組合模式之弊，由于對組合模式調(diào)用的任何操作都會(huì)被頗佳北至 它的所有子對象，如果這個(gè)層次體系很大的話，系統(tǒng)的性能將會(huì)受到影響。
“組合模式”就是在做一個(gè)項(xiàng)目的時(shí)候，我們要把在這個(gè)項(xiàng)目中即將出現(xiàn)的方法都在組合對象中定義（包括葉對象中的方法），而它們的葉對象將會(huì)繼承組合對象。當(dāng)組合對象被實(shí)例化后其葉對象的方法也相應(yīng)地被實(shí)例化了。可能我說的有些亂，下面就用一個(gè)例子來說明吧。
“組合模式”是一種專為創(chuàng)建Web上的動(dòng)態(tài)用戶界面而量身定制的模式。使用這種模式，可以用一條命令在多個(gè)對象上激發(fā)復(fù)雜的或遞歸的行為。
使用“組合模式”可以為我們帶來兩大好處：
1、可以用同樣的方法處理對象的集合與其中的特定子對象。
2、可以用來把一批子對象組織成樹形結(jié)構(gòu)，并且使整棵樹都可以被遍歷。
只有同時(shí)具備以下兩個(gè)條件進(jìn)才適合使用組合模式：
1、存在一批組織成某處層次體系的對象（具體結(jié)構(gòu)可能在開發(fā)期間無法知道）。
2、希望對這批對象或其中的一部分對象實(shí)話一個(gè)操作。
下面看一下示例：
具體要求是做一個(gè)圖片庫且可以有選擇地隱藏或顯示圖片庫的特定部分。這可能是單獨(dú)圖片，也可能是圖片庫?，F(xiàn)在就需要兩個(gè)類來完成這個(gè)功能：用作圖片庫的組合對象類和用于圖片本身的葉對象類，代碼如下：
在上面的代碼中，首先定義的是組合對象類和葉對象類應(yīng)該實(shí)現(xiàn)的接口。除了常規(guī)的組合遠(yuǎn)景一分錢上，這些類要怕硬欺軟 操作只包括hide和show。接下來我們定義葉對象。葉對象實(shí)現(xiàn)hide和show，代碼如下：
復(fù)制代碼 代碼如下:
var Composite = new Interface('Composite', ['add', 'remove', 'getChild']); // 檢查組合對象Composite應(yīng)該具備的方法
var GalleryItem = new Interface('GalleryItem', ['hide', 'show']); // 檢查組合對象GalleryItem應(yīng)該具備的方法
// DynamicGallery Class
var DynamicGallery = function(id){ // 實(shí)現(xiàn)Composite，GalleryItem組合對象類
this.children = [];
this.element = document.createElement('div');
this.element.id = id;
this.element.className = 'dynamic-gallery';
}
DynamicGallery.prototype = {
// 實(shí)現(xiàn)Composite組合對象接口
add : function(child){
Interface.ensureImplements(child, Composite, DynamicGallery);
this.children.push(child);
this.element.appendChild(child.getElement());
},
remove : function(child){
for(var node, i = 0; node = this.getChild(i); i++){
if(node == child){
this.children.splice(i, 1);
break;
}
}
this.element.removeChild(child.getElement());
},
getChild : function(i){
return this.children[i];
},
// 實(shí)現(xiàn)DynamicGallery組合對象接口
hide : function(){
for(var node, i = 0; node = this.getChild(i); i++){
node.hide();
}
this.element.style.display = 'none';
},
show : functioln(){
this.element.style.display = 'block';
for(var node, i = 0; node = getChild(i); i++){
node.show();
}
},
// 幫助方法
getElement : function(){
return this.element;
}
}
以下是設(shè)置葉對象的相應(yīng)方法：
復(fù)制代碼 代碼如下:
// GalleryImage class
var GalleryImage = function(src){ // 實(shí)現(xiàn)Composite和GalleryItem組合對象中所定義的方法
this.element = document.createElement('img');
this.element.className = 'gallery-image';
this.element.src = src;
}
GalleryImage.prototype = {
// 實(shí)現(xiàn)Composite接口
// 這些是葉結(jié)點(diǎn)，所以我們不用實(shí)現(xiàn)這些方法，我們只需要定義即可
add : function(){},
remove : function(){},
getChild : function(){},
// 實(shí)現(xiàn)GalleryItem接口
hide : function(){
this.element.style.display = 'none';
},
show : function(){
this.element.style.display = '';
},
// 幫助方法
getElement : function(){
return this.element;
}
}
這是一個(gè)演示組合模式的工作方式的例子。每個(gè)類都很簡單，但由于有了這樣一種層次體系，我們就可以執(zhí)行一些復(fù)雜操作。GalleryImage類的構(gòu)造函數(shù)會(huì)創(chuàng)建一個(gè)image元素。這個(gè)類定義中的其余部分由空的組合對象方法（因?yàn)檫@是葉結(jié)點(diǎn)）和GalleryItem要求的操作組成?，F(xiàn)在我們可以使用這兩個(gè)類來管理圖片：
復(fù)制代碼 代碼如下:
var topGallery = new DynamicGallery('top-gallery');
topGallery.add(new GalleryImage('/img/image-1.jpg'));
topGallery.add(new GalleryImage('/img/image-2.jpg'));
topGallery.add(new GalleryImage('/img/image-3.jpg'));
var vacationPhotos = new DyamicGallery('vacation-photos');
for(var i = 0, i < 30; i++){
vacationPhotos.add(new GalleryImage('/img/vac/image-' + i + '.jpg'));
}
topGallery.add(vacationPhotos);
topGallery.show();
vacationPhotos.hide();
組合模式之利，使用組合模式，簡單的操作也能產(chǎn)生復(fù)雜的結(jié)果。不必編寫大師手工遍歷數(shù)組或其他數(shù)據(jù)結(jié)構(gòu)的粘合代碼，只需對最頂層的對象執(zhí)行操作，主每一個(gè)子對象自己傳遞這個(gè)操作即可。這對于那些再三執(zhí)行的操作尤其有用。在組合模式中，各個(gè)對象之間的耦合非常松散。每當(dāng)對頂層組合對象執(zhí)行一個(gè)操作時(shí)，實(shí)際上是在對整個(gè)結(jié)構(gòu)進(jìn)行嘗試優(yōu)先的搜索以查找節(jié)點(diǎn)。
組合模式之弊，由于對組合模式調(diào)用的任何操作都會(huì)被頗佳北至 它的所有子對象，如果這個(gè)層次體系很大的話，系統(tǒng)的性能將會(huì)受到影響。
您可能感興趣的文章:
- JavaScript適配器模式詳解
- javascript設(shè)計(jì)模式之Adapter模式【適配器模式】實(shí)現(xiàn)方法示例
- JavaScript設(shè)計(jì)模式之適配器模式介紹
- 深入理解JavaScript系列（39）：設(shè)計(jì)模式之適配器模式詳解
- 詳解JavaScript實(shí)現(xiàn)設(shè)計(jì)模式中的適配器模式的方法
- javascript設(shè)計(jì)模式 – 適配器模式原理與應(yīng)用實(shí)例分析
- JavaScript設(shè)計(jì)模式學(xué)習(xí)之適配器模式
- JavaScript組合模式學(xué)習(xí)要點(diǎn)
- 設(shè)計(jì)模式中的組合模式在JavaScript程序構(gòu)建中的使用
- javascript設(shè)計(jì)模式 – 組合模式原理與應(yīng)用實(shí)例分析
- JavaScript設(shè)計(jì)模式開發(fā)中組合模式的使用教程
- javascript適配器模式和組合模式原理與實(shí)現(xiàn)方法詳解
相關(guān)文章
定義Circle類，擁有成員變量r，常量PI和計(jì)算面積的成員函數(shù)area()2009-07-07
學(xué)習(xí)js的高境界就是使用面向?qū)ο蟮姆椒?，?shí)現(xiàn)js的調(diào)用2008-04-04
數(shù)據(jù)類型,基本數(shù)據(jù)類型基本數(shù)據(jù)類型是JS語言最底層的實(shí)現(xiàn)。2008-04-04
javascript 面向?qū)ο蟮腏avaScript類
這一節(jié)來說下緊接著的一個(gè)概念——類。雖然JavaScript中沒有class關(guān)鍵字，但作為開發(fā)人員我們一定要有這個(gè)思想。在C#中類可以分為實(shí)例類和靜態(tài)類，JavaScript亦然。2010-05-05
幾乎每個(gè)開發(fā)人員都有面向?qū)ο笳Z言（比如C++、C#、Java）的開發(fā)經(jīng)驗(yàn)。 在傳統(tǒng)面向?qū)ο蟮恼Z言中，有兩個(gè)非常重要的概念 - 類和實(shí)例。2009-07-07
這里用的是Ext core3.0，Ext中用Ext.extend來定義一個(gè)類（當(dāng)然它更多用來擴(kuò)展一個(gè)類），Ext整個(gè)框架各種控件如Panel，MessageBox等都是用Ext.extend方法來擴(kuò)展。這里僅僅用它來定義一個(gè)最簡單的類。2009-07-07
在面向?qū)ο笳Z言里重載是很重要的一個(gè)特性，而JavaScript這個(gè)自稱面向?qū)ο蟮恼Z言竟然沒有直接提供重載的功能。2010-05-05
JS作為一種動(dòng)態(tài)語言，在語法上有相當(dāng)大的自由度，所以造成了一種功能，有N種寫法的局面。 在JS中實(shí)現(xiàn)OOP，一般來說有兩種方法：2008-03-03
JavaScript 類型的包裝對象(Typed Wrappers)
JavaScript 有一套類型的包裝對象,需要的朋友可以參考下。
2011-10-10