用 es6 实现一个简单可复用的 tab 组件

效果

这是用 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 对象。

总结

两个知识点：

1. class

2. arrow function

如果有什么想跟我讨论的话，请私信。