脚本宝典收集整理的这篇文章主要介绍了简单的tab开发解析,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
使用下面的几种方法都可以实现我们想要的效果。下面我一一进行描述讲解下。
首先我们需要弄清楚一个问题,下面的代码(方法0:)为什么不可以实现我们想要的效果,而且逻辑上好像也没有什么问题。
方法0:
for (VAR i = 0;i < tabList.length; i++){
tabList[i].onclick = function () {
console.dir(this);
changeTabHandle(i);
}
}
如果想弄懂这个问题我们需要知道函数在浏览器中的操作原理。函数操作分为2个阶段:函数创建和函数执行。
【函数创建】会经历下面几个过程。
- 函数属于引用类型的,首先会开辟一个堆内存,把函数体中的代码当作字符串存储在这个对内存中,为了找到这个内置,浏览器会为其分配一个16进制的地址。在我们上面的代码中会把“console.dir(this);changeTabHandle(i);”存储在对内存中。
- 把开辟的堆内存的16进制的地址赋值给函数名。
【函数执行】会经历下面几个过程。
- 函数执行首先会形成一个私有的作用域(栈内存)
- 把之前存储在堆内存中的代码字符串复制一份过来,变成js代码,从上到下依次执行。
方法0不可行的原因是,进入循环体后,把字符串拷贝到堆内存中,i依然在加1,当点击按钮出发函数执行的时候,1已经变成了tabList.length.既然知道了原因,那怎么解决这个问题呢?我们依次来看下面几个方法。
方法1-3中使用的changeTabHandle函数
//n 当前点击按钮的索引
function changeTabHandle(n) {
for(var i=0; i<tabList.length; i++){
tabList[i].classname = '';
divList[i].className = '';
}
tabList[n].className = 'active';
divList[n].className = 'active';
}
-
自定义属性名
//方法一:自定义属性方法,把当前的i存在我们获取的对象上面。让对象的一个属性(_f_index)把当前按钮的索引保存下来。
console.LOG(tabList);
for (var i = 0;i < tabList.length; i++){
tabList[i]._f_index = i;
tabList[i].onclick = function () {
console.dir(this);
changeTabHandle(this._f_index);
}
}
-
//方法二:var --> let,利用了es6中let块级作用域的概念。
for(let i=0; i<tabList.length; i++){
tabList[i].onclick = function() {
changeTabHandle(i);
}
}
- 闭包
//下面2个方法都是利用了闭包的保存作用。闭包有2个作用一个是保护其私有作用域的私有变量不受外界干扰,另一个作用就是可以保存以下内容。
下面几种方法都可以让函数自制行
(function(){})()
~function()()
!function()()
+function()()
方法一:
for(var i=0; i<tabList.length; i++){
~function (i) {
tabList[i].onclick = function () {
changeTabHandle(i);
}
}(i)
}
方法二:
for(var i=0; i<tabList.length; i++){
tabList[i].onclick = function (i) {
return function() {
changeTabHandle(i);
}
}(i)
}
-
记忆上次是那个被选中而不是全部清空+自定义属性
beforeindex = 0;
for(var i=0; i<tabList.length; i++){
tabList[i]._f_index = i;
tabList[i].onclick = function() {
tabList[beforeIndex].className = '';
divList[beforeIndex].className = '';
tabList[this._f_index].className = 'active';
divList[this._f_index].className = 'active';
beforeIndex = this._f_index;
}
}
5.记忆上次是那个被选中而不是全部清空+let
for(let i=0; i<tabList.length; i++){
tabList[i].onclick = function (params) {
tabList[beforeIndex].className = '';
divList[beforeIndex].className = '';
tabList[i].className = 'active';
divList[i].className = 'active';
beforeIndex = i;
}
}
gIThub 实例代码 https://github.com/fung-yu/js... 中的tab篇
以上是脚本宝典为你收集整理的简单的tab开发解析全部内容,希望文章能够帮你解决简单的tab开发解析所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。