js设计模式-组合模式 js设计模式-组合模式

【js设计模式-组合模式】组合模式
组合模式（Composite Pattern），又叫部分整体模式，是用于把一组相似的对象当作一个单一的对象。组合模式依据树形结构来组合对象，用来表示部分以及整体层次。这种类型的设计模式属于结构型模式，它创建了对象组的树形结构。

文章图片
特征

层层嵌套的树状结构，整体由复合物-叶子两类元素组成。
复合物和叶子有相同的接口，不同的实现

//composite class Container { constructor(id) { this.children = [] this.element = document.createElement('div') this.element.id = id this.element.style.border = '1px solid black' this.element.style.margin = '10px' this.element.classList.add('container') }add(child) { this.children.push(child) this.element.appendChild(child.getElement()) }hide() { this.children.forEach(node => node.hide()) this.element.style.display = 'none' }show() { this.children.forEach(node => node.show()) this.element.style.display = '' }getElement() { return this.element }} // leaf class Text { constructor(text) { this.element = document.createElement('p') this.element.innerText = text }add() {}hide() { this.element.style.display = 'none' }show() { this.element.style.display = '' }getElement() { return this.element } }// 建立 header 节点 let header = new Container('header')// 建立两个叶节点 header.add(new Text('标题')) header.add(new Text('logo'))let main = new Container('main') main.add(new Text('这是内容1')) main.add(new Text('这是内容2'))let page = new Container('page') page.add(header) page.add(main) page.show()document.body.appendChild(page.getElement())