面向对象深度解析 ---- 使用类改造 tab 标签选择页

src\classes\tab.js

class Tab {
  constructor(mode) {
    this.mode = mode === 'fade' || mode === 'slide' ? mode : 'fade'

    this.oPage = $('.J_page')
    this.oTab = $('.J_tab')
    // children() https://www.w3school.com.cn/jquery/traversing_children.asp
    // 返回被选元素的所有直接子元素

    // find()  https://www.w3school.com.cn/jquery/traversing_find.asp
    // 获得当前元素集合中每个元素的后代
    this.oPageWrap = this.oPage.children('.page-wrap')
    this.oPageItems = this.oPage.find('.item')

    this.init()
  }

  init() {
    this.setMode()
    this.bindEvent()
  }
  setMode() {
    this.oPageWrap.addClass(this.mode)
  }
  bindEvent() {
    // .item 规定只能添加到指定的子元素上的事件处理程序
    this.oTab.on('click', '.item', $.proxy(this.tabClick, this))
  }
  tabClick(e) {
    var e = e || window.event,
      tar = e.target || e.srcElement,
      curIdx = $(tar).index()

    if (tar.className === 'item') {
      // 为当前点击的 tab 追加样式
      $(tar).addClass('current').siblings('.item').removeClass('current')
      this._pageChange(curIdx)
    }
  }
  _pageChange(index) {
    switch (this.mode) {
      case 'fade':
        this._fadePage(index)
        break
      case 'slide':
        this._slidePage(index)
        break
      default:
        this._fadePage(index)
        break
    }
  }
  _fadePage(index) {
    this.oPageItems.eq(index).fadeIn(100).siblings('.item').fadeOut(100)
  }
  _slidePage(index) {
    this.oPageWrap.animate({ left: -index * 500 } + 'px')
  }
}
export { Tab }

src\index.html

 <script src="classes/tab.js"></script>
    <script type="text/javascript">
      new Tab('fade')
    </script>