[設(shè)計(jì)模式][組合模式][Javascript]

hersion 發(fā)布于2019-08-21 10:18 / 2912人閱讀

摘要：簡(jiǎn)化了父和子之間的關(guān)系。對(duì)于子節(jié)點(diǎn)來(lái)說(shuō)也是一樣的，過(guò)多的接口暴露有時(shí)候也是一種濫用，同時(shí)也減少了對(duì)外部的依賴(lài)。

The Composite Pattern is a partitioning design pattern. The composite pattern describes that a group of objects is to be treated in the same way as a single instance of object. The intent of a composite is to "compose" objects into tree structures to represent part-whole hierarchies. Implementing the composite pattern lets client treat individual objects and compositions uniformly.
From http://en.wikipedia.org/wiki/Composite_pattern

定義

組合模式的目標(biāo)是解耦客戶程序與復(fù)雜元素內(nèi)部架構(gòu)，使得客戶程序?qū)Υ凶釉囟家灰曂?/p>

每個(gè)子節(jié)點(diǎn)都可以使復(fù)雜的存在，對(duì)于父節(jié)點(diǎn)來(lái)說(shuō)，不需要知道子節(jié)點(diǎn)的復(fù)雜性或者實(shí)現(xiàn)子節(jié)點(diǎn)的復(fù)雜性，只需要關(guān)注子節(jié)點(diǎn)的特定方法，便可以使用子節(jié)點(diǎn)。簡(jiǎn)化了父和子之間的關(guān)系。

對(duì)于子節(jié)點(diǎn)來(lái)說(shuō)也是一樣的，過(guò)多的接口暴露有時(shí)候也是一種濫用，同時(shí)也減少了對(duì)外部的依賴(lài)。

需求

按鈕組需求：

有這樣一組按鈕，他們橫向的進(jìn)行排列，根據(jù)當(dāng)前用戶權(quán)限設(shè)置有哪些按鈕被顯示

按鈕可以分成subgroup，按特定的功能進(jìn)行劃分subgroup

類(lèi)圖

角色

AbstractButton (Component) 定義一組公共的接口

Button (Leaf) 表示葉子節(jié)點(diǎn)的對(duì)象，葉子節(jié)點(diǎn)沒(méi)有自己的子節(jié)點(diǎn)

ButtonGroup (Composite) 定義有枝節(jié)點(diǎn)行為，用來(lái)存儲(chǔ)子部件，在Component接口中實(shí)現(xiàn)與子部件有關(guān)操作

實(shí)現(xiàn)

var prototype = require("prototype");

var AbstractButton = prototype.Class.create({
  render: function() {
    throw new Error("method must be override!");
  }
});

var Button = prototype.Class.create(AbstractButton, {
  initialize: function(id, group) {
    this.id = id;
    this.group = group;
  },

  render: function () {
    console.log("render: Button的ID是:"+this.id+", group是:"+this.group);
  }
});

var ButtonGroup = prototype.Class.create(AbstractButton, {
  initialize: function () {
    this.buttons = [];
  },

  add: function (btn) {
    if (btn instanceof Button) {
      this.buttons.push(btn);
    }
  },

  remove: function (id) {
    for (var i = this.buttons.length - 1; i >= 0; i--) {
      if(this.buttons[i].id === id){
        this.buttons.splice(i, 1);
      }
    }
  },

  getChild: function (id) {
    var search = [];
    for (var i = this.buttons.length - 1; i >= 0; i--) {
      if(this.buttons[i].id === id){
        search.push(this.buttons[i]);
      }
    }

    return search;
  },

  render: function () {
    for (var i = this.buttons.length - 1; i >= 0; i--) {
      this.buttons[i].render();
    }
  }
});

var Main = function () {

  var editBtn = new Button("editbtn", "edit");
  var deleteBtn = new Button("deletebtn", "edit");
  var manageBtn = new Button("managebtn", "edit");

  var btngroup = new ButtonGroup();
  btngroup.add(editBtn);
  btngroup.add(deleteBtn);
  btngroup.add(manageBtn);


  btngroup.render();
}

Main();

注：繼承采用了PrototypeJS提供的Class來(lái)做的，使用了Prototype.Node，關(guān)于prototype如何使用參考Prototype Doc

參考

http://en.wikipedia.org/wiki/Composite_pattern

http://www.cnblogs.com/peida/archive/2008/09/09/1284686.html

http://sourcemaking.com/design_patterns/composite

http://baike.baidu.com/view/3591789.htm?fr=aladdin