设计模式-组合模式

概念

• 生成树形结构，表示"整体-部分"关系
• 让整体和部分都具有一致的操作方式

演示

• JS经典应用中，未找到这么复杂的数据类型
• 虚拟DOM中的vnode是这种形式，但数据类型简单
• （用JS实现一个菜单，不算经典应用，与业务相关）

代码演示：

<div id="div1" class="container">
    <p>123</p>
    <p>456</p>
</div>

{
    tag: 'div',
    attr: {
        id: 'div1',
        className: 'container'
    },
    children: [
        {
            tag: 'p',
            attr: {},
            children: ['123']
        },
        {
            tag: 'p',
            attr: {},
            children: ['456']
        }
    ]
}

总结

• 整体和单个节点的操作是一致的
• 整体和单个节点的数据结构也保持一致

设计原则验证

• 将整体和单个节点的操作抽象出来
• 符合开放封闭原则