定义

将对象组合成树形结构以表示“部分-整体”的层次结构，组合模式使得用户对单个对象

组合模式主要有三个角色：

  • 抽象组件（Component）：抽象类，主要定义了参与组合的对象的公共接口组件的基本信息
    • Add方法
    • Remove方法
  • 叶子节点（Leaf）：组成组合对象的最基本对象
    • 只包含本身的数据，Add, Remove 基本为空操作；
  • 树枝节点（Composite）：由子对象组合起来的复杂对象
    • 一般包含一个数组定义，用于存储子叶或树枝节点，还包括一个获取所有子节点的方法: 如GetList

      树

      image.png

      demo

      最简单的组合模式

      HTML文档的DOM结构就是天生的树形结构，最基本的元素醉成DOM树，最终形成DOM文档，非常适用适用组合模式。
      **

      基本实现

      抽象组件（Component
  1. class Component{
  2.    constructor(element){
  3.        this.children = [];  // 子组件容器
  4.        this.element = null // 当前组件的元素
  5.    }
  6.    init : function(){
  7.        throw new Error('该方法需要重写')
  8.    }
  9.    add: function(){
  10.        throw new Error('该方法需要重写')
  11.    }
  12.    set(ele){
  13.        throw new Error('该方法需要重写')
  14.    }
  15. }

叶子节点（Leaf）

树枝节点（Composite

总结

组合模式，是一种结构型的设计模式，主要用于一致化处理简单元素和复杂元素操作，使得客户端使用可以与复合结构复杂的情况相解藕；客户端使用时，搜索递归到需要的节点或位置，都可以使用统一方法，不管是叶子节点或是树枝节点进行一致操作；在面向对象动态语言里，其实Javascript 也差不多，就可以无需知道元素结构，进行查询，添加，删除的操作；