組合模式
組合模式（Composite Pattern），又叫部分整體模式，是用于把一組相似的對象當(dāng)作一個(gè)單一的對象。組合模式依據(jù)樹形結(jié)構(gòu)來組合對象，用來表示部分以及整體層次。這種類型的設(shè)計(jì)模式屬于結(jié)構(gòu)型模式，它創(chuàng)建了對象組的樹形結(jié)構(gòu)。

特征

• 層層嵌套的樹狀結(jié)構(gòu)，整體由復(fù)合物-葉子兩類元素組成。
• 復(fù)合物和葉子有相同的接口，不同的實(shí)現(xiàn)

//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 節(jié)點(diǎn)
let header = new Container('header')

// 建立兩個(gè)葉節(jié)點(diǎn)
header.add(new Text('標(biāo)題'))
header.add(new Text('logo'))

let main = new Container('main')
main.add(new Text('這是內(nèi)容1'))
main.add(new Text('這是內(nèi)容2'))

let page = new Container('page')
page.add(header)
page.add(main)
page.show()

document.body.appendChild(page.getElement())

image.png