组件 ：

     方便复用，特别是一些复用率高的功能。

    思路 ： 通过传入大的父级，就可以调用选项卡

步骤：

    1.先确定可配置项：

        宽 ：width

        高 ：height

        取消触发函数 ： cancelFn

        是否拖拽 ：isDrag

        内容：content

    2.新建一个类

         （1）constructor里建变量,opt是配置项

         （2）使用Object.assign(),用配置项覆盖默认opt

         （3）调用init（初始化代码，也就是基础逻辑在这个方法里面）    

        （4）将功能模块拆分，仔细分析实现这个需求需要的功能，一个功能写一个方法，降低耦合。

        （5）在init中调用各方法

---

class Tab{

//1

    constructor(obj){

this.opt= {

obj: null,

            btns: ['新闻','体育','娱乐','社会'],

            contents: ['十八大召开','科比退役','郑爽','房价下跌'],

            width: 200,

            height: 150,

            isDrag: false

        }

//2.右值赋给左值:如果有配置，就会覆盖opt,如果没有配置，就运行opt中的参数

        Object.assign(this.opt,obj)

this.box= document.querySelector(this.opt.obj)

this.init()

}

//2

    init(){//初始化

        this.creatBtns()

this.creatDiv()

this.events()

this.boxStyle()

//是否调用拖拽

        /*if(this.isDrag){

new Drag()

}*/

    }

//3

    creatBtns(){

let html= ''

        this.opt.btns.forEach((el,i)=>{

html+=`${el}`

        })

this.box.innerHTML= html

}

creatDiv(){

let html= ''

        this.opt.contents.forEach((c,i)=>{

html+=`

${c}

`

        })

this.box.innerHTML+= html

}

events(){

this.btns= Array.from(document.querySelectorAll('button'))

this.divs= this.box.querySelectorAll('div')

let that= this

        this.btns.forEach((e,i)=>{

e.onclick = function(){

that.change(i)

}

})

}

change(index){

this.btns.forEach((e,i)=>{

e.className= ''

            this.divs[i].className=''

        })

this.btns[index].className= 'active'

        this.divs[index].className= 'show'

    }

boxStyle(){

this.box.style.cssText=`width:${this.opt.width}px;height:${this.opt.height}px`

    }

}

let t = new Tab({

obj: '#box',

    width: '500'

})