设计模式-组合模式

概念

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

演示

  • 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']
        }
    ]
}

总结

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

设计原则验证

  • 将整体和单个节点的操作抽象出来
  • 符合开放封闭原则
相关推荐
IT小白架构师之路21 分钟前
常用设计模式系列(十五)—解释器模式
设计模式·解释器模式
蝸牛ちゃん27 分钟前
设计模式(二十三)行为型:模板方法模式详解
设计模式·系统架构·软考高级·模板方法模式
蝸牛ちゃん30 分钟前
设计模式(十七)行为型:迭代器模式详解
设计模式·系统架构·迭代器模式·软考高级
蝸牛ちゃん1 小时前
设计模式(十五)行为型:命令模式详解
设计模式·系统架构·软考高级·命令模式
蝸牛ちゃん19 小时前
设计模式(七)结构型:适配器模式详解
设计模式·系统架构·软考高级·适配器模式
蝸牛ちゃん20 小时前
设计模式(十二)结构型:享元模式详解
设计模式·系统架构·软考高级·享元模式
蝸牛ちゃん1 天前
设计模式(十三)结构型:代理模式详解
设计模式·系统架构·代理模式·软考高级
贱贱的剑1 天前
8. 状态模式
设计模式·状态模式
永卿0012 天前
设计模式-迭代器模式
java·设计模式·迭代器模式
使二颗心免于哀伤2 天前
《设计模式之禅》笔记摘录 - 10.装饰模式
笔记·设计模式