介绍

※ 生成树形结构，表示‘’整体 - 部分‘’关系

※ 让整体和部分都具有一致的操作方式

实现代码

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

演示

◆ JS经典应用中，未找到这么复杂的数据类型

◆ 虚拟DOM中的 vnode 是这种形式，但数据类型简单

◆(用 JS 实现一个菜单，不算经典应用，与业务相关)

设计原则验证

● 将整体和单个节点的操作抽象出来

● 符合开放封闭原则