原型模式

Prototype

概述

复用业务逻辑

结构相同

应用

多标签页

参考代码

class Tabs {
  constructor(selector) {
    this.tab = document.querySelector(selector)
    this.items = this.tab.querySelectorAll('li')
    this.change()
  }
  change() {
    this.tab.addEventListener('click', (e) => {
      if (e.target.tagName == 'LI') {
        let _this = e.target
        this.items.forEach(item => {
          item.classList.remove('active')
        })
        _this.classList.add('active')
      }
    })
  }
}

new Tabs('#open')
new Tabs('#close')

改进

使用事件代理改写示例代码