本文實(shí)例講述了javascript 設(shè)計(jì)模式之組合模式原理與應(yīng)用。分享給大家供大家參考，具體如下：

組合模式用于簡(jiǎn)單化，一致化對(duì)單組件和復(fù)合組件的使用；其實(shí)它就是一棵樹(shù)；

這棵樹(shù)有且只有一個(gè)根，訪問(wèn)入口，如果它不是一棵空樹(shù)，那么由一個(gè)或幾個(gè)樹(shù)枝節(jié)點(diǎn)以及子葉節(jié)點(diǎn)組成，每個(gè)樹(shù)枝節(jié)點(diǎn)還包含自己的子樹(shù)枝以及子葉節(jié)點(diǎn)；

在面向?qū)ο缶幊讨校~子以及復(fù)雜對(duì)象(樹(shù)枝節(jié)點(diǎn))都繼承一個(gè)接口或抽象類分別實(shí)現(xiàn)；

這個(gè)抽象定義一般三個(gè)部分組成，組件的基本信息，Add方法，Remove方法；

葉子節(jié)點(diǎn)只包含本身的數(shù)據(jù)，Add, Remove 基本為空操作；

樹(shù)枝節(jié)點(diǎn)實(shí)現(xiàn)組件時(shí)，一般包含一個(gè)數(shù)組定義，用于存儲(chǔ)子葉或樹(shù)枝節(jié)點(diǎn)，還包括一個(gè)獲取所有子節(jié)點(diǎn)的方法: 如GetList；

實(shí)例場(chǎng)景：

1>. 自然界中的各種樹(shù)，樹(shù)長(zhǎng)在大地人，樹(shù)頭(樹(shù)根)，即是入口點(diǎn)，這棵樹(shù)頭向上生長(zhǎng)，即有自己的葉子，又有自己的子樹(shù)枝，某樹(shù)枝還有自己的葉子，跟子樹(shù)枝；

2>. 操作系統(tǒng)目錄結(jié)構(gòu)、公司部門組織架構(gòu)、國(guó)家省市縣、宇宙萬(wàn)物都有單獨(dú)元物質(zhì)以及物物包含的現(xiàn)象，像這么看起來(lái)復(fù)雜的現(xiàn)象，都可以使用組合模式，即部分－整體模式來(lái)操作；

一棵樹(shù):

組合模式結(jié)構(gòu)圖:

1. Component 組件;

function Component() { this.name = ’’;}Component.prototype = { Add: function(comp) { //rewrite }, Remove: function(name) { //rewrite }, set: function(name) { this.name = name; }, operate: function() { //... }}var comp = new Component();

2. Leaf 葉子節(jié)點(diǎn);

function Leaf() { }Leaf.prototype = Object.create(comp, {});Leaf.prototype.get = function() { return this.name;}

3. 樹(shù)枝節(jié)點(diǎn):

function Composite() { this.list = [];}Composite.prototype = Object.create(comp, {});Composite.prototype = { Add: function(comp) { this.list.push(comp); }, Remove: function(name) { for (i in this.list) { var cmp = this.list[i]; if (cmp.name == name) {delete this.list[i];break; } } }, operate: function() { //do... }, getList: function(name) { var cmp; for (i in this.list) { cmp = this.list[i]; if (cmp.name == name) {break; } } return cmp; }}

葉子節(jié)點(diǎn)基本可以直接使用 Component 的結(jié)構(gòu)，或是直接以 Component 來(lái)創(chuàng)建，Composite 樹(shù)枝節(jié)點(diǎn)，就必須重寫 Add , Remove, operate 等方法；

使用方法:

var root = new Composite();root.set('root');//葉子var leaf = new Leaf();leaf.set(’頂級(jí)葉子’);root.Add(leaf);//樹(shù)枝節(jié)點(diǎn);var child = new Composite();child.set(’child’);var childschild = new Composite();childschild.set(’cchild’);child.Add(childschild);root.Add(child);root.operate();其他說(shuō)明

組合模式，是一種結(jié)構(gòu)型的設(shè)計(jì)模式，主要用于一致化處理簡(jiǎn)單元素和復(fù)雜元素操作，使得客戶端使用可以與復(fù)合結(jié)構(gòu)復(fù)雜的情況相解藕；客戶端使用時(shí)，搜索遞歸到需要的節(jié)點(diǎn)或位置，都可以使用統(tǒng)一方法，不管是葉子節(jié)點(diǎn)或是樹(shù)枝節(jié)點(diǎn)進(jìn)行一致操作；在面向?qū)ο髣?dòng)態(tài)語(yǔ)言里，其實(shí)Javascript 也差不多，就可以無(wú)需知道元素結(jié)構(gòu)，進(jìn)行查詢，添加，刪除的操作；

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。