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

chnmagnus 发布于2019-08-21 14:46 / 2490人阅读

摘要：效果这是用写的一个简单的组件，也可以直接点这里看效果。用来初始化一些成员变量，其中是值当前显示的第几页，如果没有传值，则默认显示第一页。老样子，绑定事件。用了箭头函数，可以让作用域始终指向这个组件，就可以免去额外声明一个来解决作用域问题啦。

效果

这是用 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

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

GPU云服务器云服务器用c实现简单的shell 用java实现一个线程池 php 实现io复用 js实现的简单特效

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88021.html

前端规范(ES6BEMOOCSSSMACSS)

摘要：前端规范在实际开发中，由于团队成员编码习惯不一，技术层次不同，开发前定制并遵循一种代码规范能提高代码质量，增加开发效率。是定义了一种的命名规范，每个名称及其组成部分都是存在一定的含义。前端规范在实际开发中，由于团队成员编码习惯不一，技术层次不同，开发前定制并遵循一种代码规范能提高代码质量，增加开发效率。 Javascript Javascript规范直接参考airbnb: ES6 ...

Object 2019-08-02 15:54 评论0 收藏0
前端规范(ES6BEMOOCSSSMACSS)

摘要：前端规范在实际开发中，由于团队成员编码习惯不一，技术层次不同，开发前定制并遵循一种代码规范能提高代码质量，增加开发效率。是定义了一种的命名规范，每个名称及其组成部分都是存在一定的含义。前端规范在实际开发中，由于团队成员编码习惯不一，技术层次不同，开发前定制并遵循一种代码规范能提高代码质量，增加开发效率。 Javascript Javascript规范直接参考airbnb: ES6 ...

willin 2019-08-30 13:02 评论0 收藏0
前端规范(ES6BEMOOCSSSMACSS)

摘要：前端规范在实际开发中，由于团队成员编码习惯不一，技术层次不同，开发前定制并遵循一种代码规范能提高代码质量，增加开发效率。是定义了一种的命名规范，每个名称及其组成部分都是存在一定的含义。前端规范在实际开发中，由于团队成员编码习惯不一，技术层次不同，开发前定制并遵循一种代码规范能提高代码质量，增加开发效率。 Javascript Javascript规范直接参考airbnb: ES6 ...

levy9527 2019-08-19 18:18 评论0 收藏0
前端规范(ES6BEMOOCSSSMACSS)

摘要：前端规范在实际开发中，由于团队成员编码习惯不一，技术层次不同，开发前定制并遵循一种代码规范能提高代码质量，增加开发效率。是定义了一种的命名规范，每个名称及其组成部分都是存在一定的含义。前端规范在实际开发中，由于团队成员编码习惯不一，技术层次不同，开发前定制并遵循一种代码规范能提高代码质量，增加开发效率。 Javascript Javascript规范直接参考airbnb: ES6 ...

xushaojieaaa 2019-06-24 17:51 评论0 收藏0
Regularjs是什么

摘要：目前已经在大大小小多个线上产品中使用了，也收集了一些有效的建议好了，该看下一个最简单的组件长什么样吧免费领取验证码内容安全短信发送直播点播体验包及云服务器等套餐更多网易技术产品运营经验分享请访问网易云社区。文章来源网易云社区本文由作者郑海波授权网易云社区发布。此文摘自regularjs的指南，目前指南正在全面更新，把老文档的【接口/语法部分】统一放到了独立的 Reference...

seal_de 2019-06-28 11:09 评论0 收藏0