javascript 設(shè)計(jì)模式之組合模式原理與應(yīng)用詳解

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

組合模式說(shuō)明

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

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

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

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

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

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

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

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

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

一棵樹:

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

實(shí)例源碼

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. 樹枝節(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 樹枝節(jié)點(diǎn)，就必須重寫 Add , Remove, operate 等方法；

使用方法:

var root = new Composite();
root.set("root");

//葉子
var leaf = new Leaf();
leaf.set('頂級(jí)葉子');

root.Add(leaf);

//樹枝節(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)或是樹枝節(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ì)有所幫助。