结构型设计模式之组合模式

花开花落花中妖
82 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第16天，点击查看活动详情

前言

兄弟们，今天我们继续来聊一下新的设计模式——组合模式，我已经迫不及待的将我学习到的内容跟大家进行分享了。老规矩，我们先来看一下组合模式的概念，初步的认识一下组合模式。

组合模式：又称部分——整体模式，将对象组合成树形结构以表示“部分整体”的层次结构，组合模式使得用户对单个对象和组合对象的使用具有一致性。

为了让大家更好的理解组合模式，这里我们先举一个不是很恰当的例子。

大多数小伙伴都使用美团等外卖软件进行过点餐，我们进入到一个商家的时候，我们会发现有单个的商品，也有商家提供的组合套餐。我们点餐的时候既可以直接点某个套餐快速下单，也可以一个一个的挑选我们想吃的进行组合或者凑单，这种行为就是就是组合。

实战演练

大家通过上面的描述，有没有发现其实我们日常开发过程中经常接触到的DOM树其实就是典型的组合呀。

image.png

为了创建一个登录页面，这个时候我们就会对NODE节点进行组合使用，最终组合到一起去，从而成为一个完整的登录页面。

首先我们需要创建一个根容器——Form容器。

    const RootNode = document.createElement('form');

    RootNode.addClass('container');

接下来我们肯定要创建用户名和密码表单了，其中两者都有相同的个体——label成员，这个时候我们可以基于同一个基类分别为用户名和密码创建其对应的label成员，这里我们就通过伪代码实现了。

    function LabelItem (value) {
        const label = document.createElement('label');

        label.innerText = value;
    }
    
    const usernameLabel = new LabelItem('用户名：');
    const passwordLabel = new LabelItem('密码：');

另外，每个表单项肯定都有一个对应的input框，以方便用户进行内容的输入，这里我们还是可以通过基于同一个基类分别创建两个不同的表单元素来实现。

    function InputItem (name) {
        const input = document.createElement('input');

        input.name = name;
    }
    
    const usernameInput = new InputItem('username');
    const passwordInput = new InputItem('password');

基本单元创建好了，这个时候我们就需要分别将用户名和密码对应的label成员和input成员进行组合，形成完整的用户名和密码的表单项。

    const usernameContainer = document.createElement('div');
    
    usernameContainer.appendChild(usernameLable);
    usernameContainer.appendChild(usernameInput);

    const passwordContainer = document.createElement('div');
    
    passwordContainer.appendChild(passwordLabel);
    passwordContainer.appendChild(passwordInput);

到这里我们就差最后的一步了，将用户名和密码表单项组合成一个完整的登录模块，最终形成我们所需要的登录页面。

    RootNode.appendChild(usernameContainer);
    RootNode.appendChild(passwordContainer);

一同操作之后，一个简陋的登录页面就出来了，这一系列的操作也就是我们今天要聊的内容——组合模式。

总结

想必通过上面的例子大家对组合模式已经有了一定的认识，接下来我们就来归纳一下。

组合模式能够给我们提供给一个清晰的结构，方便我们进行统一管理与使用。组合模式将单个成员按照我们的需求进行任意的组合，给我们带来了更多的选择方式，也形成了更多的使用结果。

好了，有关组合模式的内容我们就聊到这里了，希望对大家有所帮助。

欢迎大家在下方进行留言交流。

avatar
文章
阅读
粉丝