1、缺省状态，空字符串
2、列表状态，middle-size
3、迷你列表状态，mini-size
css代码里根据这个csss class，用不同的方式显示其子元素，从而实现正常显示，或者弹出显示两种风格。
ref相当于给这个DIV定了一个唯一ID，我们可以在代码里通过这个ID，获取相应的dom元素，从而判断当前控件大小，根据这个大小，调整控件显示样式。
ul元素显示的是tabs控件的导航标签部分，根据每个tab页的显示或者隐藏来确定标签是否激活，它还有一个功能就是接受鼠标点击事件，传给控制脚本，模板基本没什么逻辑，主要就是显示和接收事件。
是否显示图标，根据showIcon计算属性确定。
是否显示标题，根据showTitle计算属性确定。
整个选项卡body是否显示，根据showTabBody计算属性确定。因为选项卡body有时停靠在控件左侧，有时停靠在控件右侧，这个停靠方式根据属性dockLeft确定，如果停靠在左边dockLeft为true，反之为false。
tabTitle是停靠时，显示的标题区域：
根据计算属性showTabTitle确定是否显示。关闭按钮负责接收点击事件，传递给控制器脚本。不管用什么样的方式实现，控制脚本只要能满足模板的这个要求就可以了。相当于接口定了，根据接口设计实现方式。
前面已经确定要用状态模式实现，根据状态设计三个状态类：
NormalState（普通tabs控件），MiddleState（列表状态，带标题带图标），MiniState（迷你列表状态，只显示图标）。后两个类有一些共同的操作，比如弹出隐藏选项卡等，可以继承共同的基类：ListState，三个状态类功能上也有一些交集，他们可以有共同的基类State。类关系图如下（好多年没有用UML工具了，用Excel凑合一下）：
不仔细看，不知道这个图其实是Excel画的，还以为是哪个高端UML工具做的呢。
状态类对应的代码：
class State{constructor(context){ this.context = context
}
widthChange(width){ if(width <=90){ this.toState(this.context.miniState)
} else if(width <=160){ this.toState(this.context.middleState)
} else{ this.toState(this.context.normalState)
}
}
showTabBody(){ return true }
showTabTitle(){ return false }
showIcon(){ return false }
showTitle(){ return true }
close(){}
toState(state){ if(this.context.state !== state){ if(this.context.state === this.context.normalState){ this.context.selectedTab.isShow = false console.log('dddd')
} if(state === this.context.normalState){ this.context.selectedTab.isShow = true } this.context.state = state
}
}
stateClass(){ return '' }
}
class NormalState extends State{
constructor(context){
