JS设计模式-其他2-组合模式 & 享元模式

组合模式

概念

• 生成树形结构，表示 “整体-部分”

• 让整体和部分都具有一致的操作方式
  例如文件夹目录

  
  
  image.png
  
  

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

演示

 

        
123
        
456
 

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

其他

我们常用的菜单一般也是组合模式的

设计原则验证

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

享元模式

概念

• 共享内存（主要考虑内存，而非效率）
• 相同的数据，共享使用
  前端的事件代理可以看成一个简单的例子

    
    
    
    


    
    
    

        a1
        a2
        a3
        a4
        
    

设计原则验证

• 将相同的部分抽象出来（因为他们共享的数据一样，只用改一个地方）
• 符合开放封闭原则

本文资料来自慕课网-双越老师-Javascript 设计模式系统讲解与应用视频课程