[設計模式][組合模式][Javascript]

hersion 發布于2019-08-21 10:18 / 2920人閱讀

摘要：簡化了父和子之間的關系。對于子節點來說也是一樣的，過多的接口暴露有時候也是一種濫用，同時也減少了對外部的依賴。

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

定義

組合模式的目標是解耦客戶程序與復雜元素內部架構，使得客戶程序對待所有子元素都一視同仁

每個子節點都可以使復雜的存在，對于父節點來說，不需要知道子節點的復雜性或者實現子節點的復雜性，只需要關注子節點的特定方法，便可以使用子節點。簡化了父和子之間的關系。

對于子節點來說也是一樣的，過多的接口暴露有時候也是一種濫用，同時也減少了對外部的依賴。

需求

按鈕組需求：

有這樣一組按鈕，他們橫向的進行排列，根據當前用戶權限設置有哪些按鈕被顯示

按鈕可以分成subgroup，按特定的功能進行劃分subgroup

類圖

角色

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

Button (Leaf) 表示葉子節點的對象，葉子節點沒有自己的子節點

ButtonGroup (Composite) 定義有枝節點行為，用來存儲子部件，在Component接口中實現與子部件有關操作

實現

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來做的，使用了Prototype.Node，關于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

GPU云服務器云服務器組合模式 javascript設計模式 javascript命令模式 javascript嚴格模式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/85274.html

聽飛狐聊JavaScript設計模式系列12

摘要：，對組合對象執行的操作可以向下傳遞到葉子節點進行操作。組合模式之圖片庫圖片庫可以有選擇地隱藏或顯示圖片庫的全部或某一部分單獨的或是部分的。本回內容介紹上一回，聊了橋接模式，做了一道計算題；介一回，聊組合模式（Composite），官方描述組合模式將對象組合成樹形結構以表示部分-整體的層次結構，組合模式使得用戶對單個對象和組合對象的使用具有一致性。組合模式特性這里我理了一下，就組...

HitenDev 2019-08-19 17:13 評論0 收藏0
JavaScript設計模式-第一部分：單例模式、組合模式和外觀模式

摘要：但是，這并不是采用單例的唯一原因。使用命名空間單例模式也被稱為模塊設計模式。函數內部聲明了一些局部函數和或變量。緊隨函數聲明放置即可立即執行外部函數，并將所得的對象文字費賠給變量。 JavaScript設計模式-第一部分：單例模式、組合模式和外觀模式設計模式是一些可靠的編程方式，有助于保證代碼更加易于維護、擴展及分離，所有設計模式在創建大型JavaScript應用程序時均不可或缺單...

betacat 2019-08-20 13:38 評論0 收藏0
js設計模式--組合模式

摘要：文章系列設計模式單例模式設計模式策略模式設計模式代理模式設計模式迭代器模式設計模式發布訂閱模式設計模式命令模式概念組合模式就是用小的子對象來構建更大的對象，而這些小的子對象本身也許是由更小的孫對象構成的。前言本系列文章主要根據《JavaScript設計模式與開發實踐》整理而來，其中會加入了一些自己的思考。希望對大家有所幫助。文章系列 js設計模式--單例模式 js設計模式--策略...

blankyao 2019-08-23 14:31 評論0 收藏0
JavaScript設計模式（八）：組合模式

摘要：不同于其它靜態編程語言，實現組合模式的難點是保持樹對象與葉對象之間接口保持統一，可借助定制接口規范，實現類型約束。誤區規避組合不是繼承，樹葉對象并不是父子對象組合模式的樹型結構是一種聚合的關系，而不是。 showImg(https://segmentfault.com/img/bVbu79V?w=800&h=600); 組合模式：又叫部分整體模式，將對象組合成樹形結構，以表示部分...

leon 2019-08-26 18:36 評論0 收藏0
javascript 組合模式

摘要：開始掃描文件夾文件下不能添加其他文件夾或文件開始掃描文件根文件加技術棧權威小王子組合模式 **// 組合模式在對象間形成樹形結構// 組合模式中基本對象和組合對象被一致對待// 無須關心對象有多少層調用時只需要在根部進行調用**結合了命令模式和組合模式的具體實現: const MacroCommand = function () { return { ...

Carson 2019-08-26 10:42 評論0 收藏0
JavaScript設計模式之結構型設計模式

摘要：享元模式通過分析應用程序的對象，將其解析為內在數據和外在數據，減少對象數量，從而提高程序的性能。通過這種方式進行事件綁定，可以減少事件處理程序的數量，這種方式叫做事件委托，也是運用了享元模式的原理。事件處理程序是公用的內在部分，每個菜單項各 github 全文地址： YOU-SHOULD-KNOW-JS JavaScript設計模式之外觀模式概念外觀模式：為一組復雜子系統接口提...

xiaoqibTn 2019-08-21 18:24 評論0 收藏0