![c0872cd573eac639554d402b09fe6523.png](https://i-blog.csdnimg.cn/blog_migrate/131d5f69ec480cc3c2621694c92a2dc8.jpeg)
1 什么是组合模式
组合模式允许创建具有属性的对象,这些对象是原始项目或对象集合。集合中的每个项目本身可以容纳其他集合,创建深度嵌套结构。
树型控件是复合模式的一个完美例子。树的节点要么包含一个单独的对象(叶子节点),要么包含一组对象(节点的子树)。组合模式用于简单化,一致化对单组件和复合组件的使用;其实它就是一棵树。
组合模式能对于工作能起到简化作用,组合对象实现某一操作时,通过递归,向下传递到所有的组成对象,在存在大批对象时,假如页面的包含许多拥有同样功能的对象,只需要操作组合对象即可达到目标。在存在着某种的层次结构,并且其中的一部分要实现某些操作,即可使用组合模式。
组合模式中的所有节点都共享一组通用的属性和方法,它既支持单个对象,也支持对象集合。这种共同的接口极大地促进了递归算法的设计和构建,这种算法可以对复合集合中的每个对象进行迭代。
实例场景:
1 自然界中的各种树,树长在大地人,树头(树根),即是入口点,这棵树头向上生长,即有自己的叶子,又有自己的子树枝,某树枝还有自己的叶子,跟子树枝。
2 操作系统目录结构、公司部门组织架构、国家省市县等,像这么看起来复杂的现象,都可以使用组合模式,即部分-整体模式来操作。
![d048dcf3c6001676c51f7625ed08c0bd.png](https://i-blog.csdnimg.cn/blog_migrate/386443691fb94ad4c077687ee8e34931.jpeg)
2 主要参与者
![d3afacc0b1d36dbd62668e8becc88a18.png](https://i-blog.csdnimg.cn/blog_migrate/c6465d1a24500aeb1d92fb793ff68227.png)
参与该模式的对象有:
Component :声明组成中对象的接口。
Leaf :代表构图中的叶子对象,一个叶子没有子对象。
Composite :表示组成中的分支(或子树),维护一个子组件的集合。
3 代码实现
在下边的代码中,Node(节点)对象创建了一个树状结构。每个节点都有一个名字和4个方法:add、remove、getChild和hasChildren。这些方法被添加到Node的原型中。这减少了对内存的要求,因为这些方法现在被所有节点共享。Node是完全递归的,不需要单独的Component或Leaf对象。
通过向父节点添加节点来构建一个小型的复合树。一旦完成,我们调用traverse,它将遍历树中的每个节点,并显示其名称和深度(通过缩进显示)。日志函数用来记录和显示结果。
![c71225ec3a32501274a95581b67ffc17.png](https://i-blog.csdnimg.cn/blog_migrate/44485ac54bd9240296fc8d217c46e713.jpeg)
4 应用实例
4.1 表单验证
演示地址:https://www.albertyy.com/2020/8/Component1.html
表单验证中,需要做的工作是表单的保存、恢复和验证表单中的值,然而表单的数量是未知数,类型是未知数,只有功能能确定,在这种情况下,使用组合模式无疑最好,通过给每个表单添加功能,然后一个表单对象组合起来,通过操作表单对象即可达到操作表单。
![ed2ee5a1a118c7a5afe23e72123c82fc.png](https://i-blog.csdnimg.cn/blog_migrate/3ed986d7d7bafbeb8cd412f5e76dc924.jpeg)
4.1 图片阅读器
演示地址:https://www.albertyy.com/2020/8/Component2.html
图片阅读器与表单验证基本一样,通过汇合操作图片。
![228e3a4c91a94de33f4ada765e2719f7.png](https://i-blog.csdnimg.cn/blog_migrate/b29cf77475022bcc134bb94c0d2e225d.jpeg)
5 总结
组合模式通过简单的操作就能达到复杂的效果,一个操作通过遍历递归传递这个操作。不过组合模式的弱点也在于此,如果层次过多,则性能将受到影响。
组合模式应用需要符合两个条件,一是产生递归,二是具有相同的动作。
今天的学习就到这里,你可以使用今天学习的技巧来改善一下你曾经的代码,如果想继续提高,欢迎关注我,每天学习进步一点点,就是领先的开始。如果觉得本文对你有帮助的话,欢迎点赞,评论,转发!!!
————————————————
版权声明:本文为CSDN博主「Albert Yang」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:
设计模式(10)[JS版]-JavaScript如何实现组合模式???_AlbertYang的博客-CSDN博客blog.csdn.net![946273dc514e9231df433e603c1f786f.png](https://i-blog.csdnimg.cn/blog_migrate/4cfa47cf9e706e181d47dbd75aa4251d.jpeg)