设计模式(10)[JS版]-JavaScript如何实现组合模式？？？

目录

1 什么是组合模式

2 主要参与者

3 代码实现

4 应用实例

4.1 表单验证

4.1 图片阅读器

5 总结

---

1 什么是组合模式

组合模式允许创建具有属性的对象，这些对象是原始项目或对象集合。集合中的每个项目本身可以容纳其他集合，创建深度嵌套结构。

树型控件是复合模式的一个完美例子。树的节点要么包含一个单独的对象（叶子节点），要么包含一组对象（节点的子树）。组合模式用于简单化，一致化对单组件和复合组件的使用；其实它就是一棵树。

      组合模式能对于工作能起到简化作用，组合对象实现某一操作时，通过递归，向下传递到所有的组成对象，在存在大批对象时，假如页面的包含许多拥有同样功能的对象，只需要操作组合对象即可达到目标。在存在着某种的层次结构，并且其中的一部分要实现某些操作，即可使用组合模式。

组合模式中的所有节点都共享一组通用的属性和方法，它既支持单个对象，也支持对象集合。这种共同的接口极大地促进了递归算法的设计和构建，这种算法可以对复合集合中的每个对象进行迭代。

实例场景：

1 自然界中的各种树，树长在大地人，树头(树根)，即是入口点，这棵树头向上生长，即有自己的叶子，又有自己的子树枝，某树枝还有自己的叶子，跟子树枝。

2  操作系统目录结构、公司部门组织架构、国家省市县等，像这么看起来复杂的现象，都可以使用组合模式，即部分－整体模式来操作。

2 主要参与者

 

参与该模式的对象有：

Component ：声明组成中对象的接口。

Leaf ：代表构图中的叶子对象，一个叶子没有子对象。

Composite ：表示组成中的分支（或子树），维护一个子组件的集合。

3 代码实现

在下边的代码中，Node（节点）对象创建了一个树状结构。每个节点都有一个名字和4个方法：add、remove、getChild和hasChildren。这些方法被添加到Node的原型中。这减少了对内存的要求，因为这些方法现在被所有节点共享。Node是完全递归的，不需要单独的Component或Leaf对象。

通过向父节点添加节点来构建一个小型的复合树。一旦完成，我们调用traverse，它将遍历树中的每个节点，并显示其名称和深度（通过缩进显示）。日志函数用来记录和显示结果。

4 应用实例

4.1 表单验证

    演示地址：https://www.albertyy.com/2020/8/Component1.html

    表单验证中，需要做的工作是表单的保存、恢复和验证表单中的值，然而表单的数量是未知数，类型是未知数，只有功能能确定，在这种情况下，使用组合模式无疑最好，通过给每个表单添加功能，然后一个表单对象组合起来，通过操作表单对象即可达到操作表单。

4.1 图片阅读器

  演示地址：https://www.albertyy.com/2020/8/Component2.html

  图片阅读器与表单验证基本一样，通过汇合操作图片。

5 总结

组合模式通过简单的操作就能达到复杂的效果，一个操作通过遍历递归传递这个操作。不过组合模式的弱点也在于此，如果层次过多，则性能将受到影响。

组合模式应用需要符合两个条件，一是产生递归，二是具有相同的动作。

今天的学习就到这里，你可以使用今天学习的技巧来改善一下你曾经的代码，如果想继续提高，欢迎关注我，每天学习进步一点点，就是领先的开始。如果觉得本文对你有帮助的话，欢迎点赞，评论，转发！！！