效果
这是用 es6 + jq 写的一个简单的 tab 组件，也可以直接 点这里 看效果。
解析
这里采用了 es6 的新特性 class 来生成一个组件，当然，用 es5 的 prototype 也可以模拟。
class Tab {
constructor(opts) {
this.index = opts.index || 0;
this.$tabHeader = opts.header;
this.$tabBody = opts.body;
this.render();
this.bind();
}
render() {
this.$tabHeader.find("li").eq(this.index).addClass("active").siblings().removeClass("active");
this.$tabBody.find("li").eq(this.index).show().siblings().hide();
}
bind() {
this.$tabHeader.on("click", "li", e => {
this.index = $(e.target).index();
this.render();
});
}
}
let tab = new Tab({
header: $(".tab-header"),
body: $(".tab-body")
})constructor：
组件的入口是 constructor 构造函数，es5 的话可以写个 init 函数来代替。
用来初始化一些成员变量，其中 index 是值当前显示的第几页，如果没有传值，则默认显示第一页。
render：
根据当前 index 渲染头部和身体。
第一句话是给头部当前 index 加上 “active” 的样式，并且去除掉其它 li 已有的 “active”样式。
第二句话是将身体当前 index 显示出来，并且隐藏兄弟 li 元素。
bind
老样子，绑定事件。
给头部进行事件委托，点击任意一个 li 则改变当前 tab 组件的 index 值，然后重新调用 render 方法渲染一下。
用了箭头函数，可以让作用域始终指向 Tab 这个组件，就可以免去额外声明一个 self 来解决作用域问题啦。
用了箭头函数就没有 this 了，那么可以 用 e.target 来获取当前点击的 dom 对象。
总结
两个知识点：
class
arrow function
如果有什么想跟我讨论的话，请私信。
