关于前端:精读设计模式-Composite-组合模式

9次阅读

共计 2064 个字符,预计需要花费 6 分钟才能阅读完成。

Composite(组合模式)

Composite(组合模式)属于结构型模式,是一种对立治理树形构造的形象形式。

用意:将对象组合成树形构造以示意“局部 – 整体”的层次结构。Composite 使得用户对单个对象和组合对象的应用具备一致性。

举例子

如果看不懂下面的用意介绍,没有关系,设计模式须要在日常工作里用起来,联合例子能够加深你的了解,上面我筹备了三个例子,让你领会什么场景下会用到这种设计模式。

公司组织关系树

公司组织关系可能分为部门与人,其中人属于部门,有的人有上司,有的人没有上司。如果咱们对立将部门、人形象为组织节点,就能够不便的统计某个部门下有多少人、财务数据等等,而不必关怀以后节点是部门还是人。

操作系统的文件夹与文件

操作系统的文件夹与文件也是典型的树状构造,为了不便递归出文件夹内文件数量或者文件总大小,咱们最好设计的时候就将文件夹与文件形象为文件,这样每个节点都领有雷同的办法增加、删除、查找子元素,而不须要关怀以后节点是文件夹或是文件。

搭建平台的组件与容器

容器与组件的关系很小,用户经常认为容器也是一种组件,但搭建平台实现时,容器与组件稍有不同,不同之处在于容器能够嵌套子元素,而组件不能够。如果因而搭建平台就将组件分为容器与组件,会导致 API 割裂为两套,不利于组件开发者保护与用户了解,比拟好的设计思路是将组件与容器对立看成组件,组件只是一种没有子元素的非凡容器,这样组件与容器就能够领有雷同的 API,对立了解与操作了。

用意解释

用意:将对象组合成树形构造以示意“局部 – 整体”的层次结构。Composite 使得用户对单个对象和组合对象的应用具备一致性。

比拟好了解,组合是指多个对象尽管有肯定差别,但独特组合成了一个树形构造,那么对象之间就肯定存在“局部 – 整体”的关系,组合模式要求咱们形象一个对象 Component 作为对立操作模型,叶子结点与非叶子结点都实现了所有性能,即使是没有子元素的叶子结点,为了强调透明性,还是具备比方 getChildren 办法,只不过永远都返回 null

结构图

其中 Component 是组合中对象申明接口,个别会实现所有公共类的所有接口,还要提供一个接口治理其子组件。

Leaf 示意叶子结点,没有子结点,相应的 Composite 就是有子结点的节点。

能够看到,组合模式就是将树状构造中所有节点对立形象了, 咱们不须要关怀叶子结点与非叶子结点的差别,而能够通过组合模式的形象屏蔽掉这些差别,对立解决。

代码例子

上面例子应用 typescript 编写。

`// 对立的形象
class Component {
  // 增加子元素
  public add() {}
  // 获取名称
  public getName() {}
  // 获取子元素
  public getChildren() {}
}
// 非叶子结点
class Composite extends Component {
  public add(component: Component) {
    this.children.push(component)
  }
  public getName() {
    return this.name
  }
  public getChildren() {
    return this.children
  }
}
// 叶子结点
class Leaf extends Component {
  public add(component: Component) {
    throw Error(‘ 叶子结点无奈增加元素 ’)
  }
  public getName() {
    return this.name
  }
  public getChildren() {
    return null
  }
}
`

最初咱们把对所有节点的操作都转为 Component 对象,而不必关怀这个对象具体是 CompositeLeaf

弊病

组合模式进行了一层形象,其实减少了简单零碎中业务复杂度。如果 CompositeLeaf 差别过大,那么对立形象带来的了解老本是很高的。

同时,Leaf 不得不实现一些仅 Composite 存在的空函数,比方 add delete,即使这些办法对他们是无意义的,此时可能要进行对立的有效或错误处理,能力使业务层真正不必感知他们的区别,否则 add 可能会失败,其本质上还是将节点的区别裸露给了业务层。

总结

组合模式是针对树状构造这个特定场景的对立形象计划,对升高零碎复杂度有很重要的意义,同时也不要忘了适度形象是无害的,咱们要拿捏其中的度。

下图做了一个简略的解释:

程序中始终关注 Component 就行了,树状构造的差别曾经被抹平。

探讨地址是:精读《设计模式 – Composite 组合模式》· Issue #284 · dt-fe/weekly

如果你想参加探讨,请 点击这里,每周都有新的主题,周末或周一公布。前端精读 – 帮你筛选靠谱的内容。

关注 前端精读微信公众号

版权申明:自在转载 - 非商用 - 非衍生 - 放弃署名(创意共享 3.0 许可证)

正文完
 0