你不知道的javascript设计模式(十) ---- 组合模式

柔情只为你懂 2022-11-15 05:56 145阅读 0赞

### 文章目录 ###

*  前言
 *  正文
 *   *  由宏命令看组合模式
     *  组合模式的用途
     *  组合模式的实现
     *  适用组合模式的场景
 *  小结

# 前言 #

同学们，上一章我们介绍了有关命令模式的知识，我们知道了命令模式拆分了命令和命令的执行，让发布者和执行者之间互不干涉，减少他们之间的耦合性，这一章我们将继续给大家一种新的设计模式，组合模式

# 正文 #

宇宙中的很多东西都不仅仅是一个个体，人由很多器官构成，很多器官又由细胞构成，细胞中又包含各种各样的原子，原子又由原子核组成，这就是一种组合模式的体现，下面我们正式开始组合模式的学习

## 由宏命令看组合模式 ##

在上一章命令模式我们就介绍了宏命令，宏命令是一个包含了一组命令的对象，现在我们来稍微回顾一下昨天做咖啡的那个例子：

// 装入咖啡豆的命令
    loadCoffeeBean = function() {
    	console.log('装入咖啡豆’);
    }
    // 磨碎咖啡豆的命令
    smashCoffeeBean = function() {
    	console.log('磨碎咖啡豆');
    }
    // 加入热水
    loadHotWater = function() {
    	console.log('加入热水');
    }
    // 加入牛奶
    loadMilk = function() {
    	console.log('加入牛奶');
    }
    var macroCommand = function() {
    	return {
    		commandList: [],
    		add: function(command) {
    			this.commandList.push(command);
    		},
    		execute: function() {
    			for(var i = 0; i < this.commandList.length; i++) {
    				this.commandList[i]();
    			}
    		}
    	}
    }

我们不难发现，这段宏命令呈现的是一个树状结构，这是一颗结构非常简单的树，其中macroCommand称为组合对象，装入咖啡豆这些命令是这段宏命令的叶子节点，其实这就是一个简单的组合模式的体现。

## 组合模式的用途 ##

组合模式将对象组合成树状结构，来表示“部分-整体”的一个结构。对于组合模式而言，我们利用它不仅可以达到构建一个树状结构的作用，还可以用它来表现对象的多态性，使得宏命令与单一命令一致，用户并不用在意这是宏命令还是单一的一个命令，就像用户只在意喝到咖啡，而并不在意做出咖啡中间包含了多少步，是一步做出来的还是很多步做出来的，这些都无关紧要  
        这个例子相对还是比较简单，我们还不能通过它来领悟组合对象的优势，树状结构的叶子结构也许并不只有一层，也可能是一颗有很多层的复杂的树，这时候组合模式的作用就可以得到展现

## 组合模式的实现 ##

下面我们将就一具体的例子具体说明组合模式的实现，我们的电脑硬盘存取了数以万计的文件夹，每个文件夹中可能又有其他的文件和文件夹，不难理解，这其实是一个复杂且巨大的树状结构，用组合模式去实现这个场景有两大好处：

*  当我们复制文件或者删除文件的时候不需要考虑文件类型，以及其中是否包括了文件，对它进行操作，自己就会按照树状结构的规则去往下遍历删除
 *  当我们遍历这个树状结构的时候，不需要考虑里面有多少文件，只需要从根节点文件开始遍历就行

这样一个简易的硬盘文件系统就利用组合模式设计好了

## 适用组合模式的场景 ##

组合模式如果运用妥当，可以大大简化代码，组合模式主要是适用于以下场景：

*  业务逻辑可以表现为明显的树状结构，并且树叶节点有相同的特点不会有明显的特殊化差异
 *  希望统一处理业务中的对象，一视同仁的处理，在面对这棵树的时候，不需要考虑节点是否是叶子节点，可以一视同仁地处理

滥用组合模式也会有明显的缺陷，将会导致系统中的对象看起来都差不多，不仅如此，组合模式还会创建过多的对象，导致系统的负担加重，所以在应用的时候需要仔细分析是否满足上面条件适合使用组合模式

# 小结 #

这一章节我们介绍了组合模式，组合模式是一种基于树状结构的设计模式，弱化了每种对象之间的不同，将他们可以一视同仁的处理，使得用户不再需要去考虑操作对象的特殊性  
       小伙伴们今天的学习就到这里了，如果觉得本文对你有帮助的话，欢迎转发，评论，收藏，点赞！！！  
       每天学习进步一点点，就是领先的开始。如果想继续提高，欢迎关注我，或者关注公众号”祯民讲前端“。大量前端技术文章，面试资料，技巧等助你更进一步！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/93779855404a4edea1b52cdf79f5a819.png