原生JS实现选项卡通过自定义属性、闭包、es6

本文章为了记录一下在学习的原生js。

选项卡在原生JS中属于比较基础的案例，再项目中也比较常见，如图： 1534314098(1).jpg

主要功能就是点击上面响应的span元素，下面的div跟着联动,学习到的实现思路有如下三种：
1、自定义属性
2、闭包机制
3、es6

解决思路：将三个span和div正常显示，然后在选中之后增加相应的class=‘select’来达到目的效果

1、css：结构如图 1534314585(1).jpg 然后分别写一些简单的样式， 1534314956(1).jpg

2、js思路：分别获取每个span元素，绑定点击事件，改变要显示的元素的class='select';达到目的效果

正常解法： 1534315403(1).jpg

但是我们运行项目会发现实现不了，这是为什么呢？因为我们再changeTab()打印i的值都为2，这是因为我们知道当页面打开的时候会有一个全局的作用域window，这里的代码都放在window里执行，当执行下面的for循环时，只是绑定了onclick方法，但是还没有执行，当for循环结束时i变为2了，而当我们点击span时我们需要的参数 i 在当前函数的私有作用域里是不存在的，所以需要向上查找，就是当前window下的 为2的 i ，所以每次执行传入changeTab里的参数都是2，所以达到不了效果。

真正的解决办法：
一、自定义属性 为每个元素增加一个自定义属性吧i存进去，想用的时候直接调用当前元素.属性名即可；如图：

1534316103(1).jpg
二、闭包 ------由上面问题我们知道，当触发函数时存储索引的作用域已经没有了，索引会向上级查找，因此我们可以保留该作用域，来实现预期效果：如图
1534837148(1).jpg

解释：这里可以用自执行函数，当for循环执行时，第一次执行i=0，代码从上到下执行自执行函数执行会返回一个函数也就是一个地址，这时onclick绑定的就是这个地址，所以这个私有作用域就不会删除，当元素真的触发onclick事件时会再这个私有作用域里找到之前存储的变量i，从而达到了预期效果。

还有一种类似利用闭包的机制： 1534838293(1).jpg

解释：当函数第一次执行，自执行函数执行会创建一个私有作用域，把onclick绑定了一个函数，属于有外面的东西指向该作用域里的东西，所以这个自执行函数的作用域也不会销毁，所以当元素触发onclick事件时再到这个作用域里找到存储的变量，从而达到了预期的效果，

三、ES6 --es6中新增的块级作用域，原理是和闭包一样的，当用let定义时每次循环都会形成一个单独的块级作用域，从而实现预期效果。

1534838650(1).jpg

通过上面三种形式都可以解决选项卡循环绑定的问题，在此记录一下。感谢生活、感谢科技、感谢分享！