设计模式-组合模式

最新推荐文章于 2025-07-28 16:24:39 发布

一个专注写代码的程序媛

最新推荐文章于 2025-07-28 16:24:39 发布

阅读量403

点赞数

CC 4.0 BY-SA版权

分类专栏：设计模式文章标签：设计模式组合模式

本文链接：https://blog.youkuaiyun.com/linanran1027/article/details/133744493

设计模式专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何在JavaScript中使用树形结构表示整体与部分的关系，如虚拟DOM中的VNode，展示了如何用简单的代码实现一个菜单示例。强调了整体和单个节点操作及数据结构的一致性，并遵循开放封闭设计原则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

概念

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

演示

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