简单的tab开发解析

caoym 发布于2019-08-23 12:22 / 1993人阅读

摘要：把开辟的堆内存的进制的地址赋值给函数名。闭包有个作用一个是保护其私有作用域的私有变量不受外界干扰，另一个作用就是可以保存以下内容。

使用下面的几种方法都可以实现我们想要的效果。下面我一一进行描述讲解下。
首先我们需要弄清楚一个问题，下面的代码（方法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


自定义属性名
//方法一：自定义属性方法，把当前的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);
   }  
}


es6 let
//方法二：var --> let，利用了es6中let块级作用域的概念。
   for(let i=0; i
   tabList[i].onclick = function() {
       changeTabHandle(i);
   }
}

闭包
//下面2个方法都是利用了闭包的保存作用。闭包有2个作用一个是保护其私有作用域的私有变量不受外界干扰，另一个作用就是可以保存以下内容。

下面几种方法都可以让函数自制行
(function(){})()
~function()()
!function()()
+function()()
方法一：
for(var i=0; i
方法二：
 for(var i=0; i

记忆上次是那个被选中而不是全部清空+自定义属性
beforeIndex = 0;
for(var i=0; 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
github 实例代码  https://github.com/fung-yu/js... 中的tab篇

云服务器 GPU云服务器简单的小程序开发简单的web开发问题简单的服务器开发开发简单的小程序

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

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

前端面试复盘

摘要：从上面那段代码可以看到，下的上外边距只占了两个距离的一半，所以两个的间距是。下面分别对第和第个条件进行了测试。关于这一点，两个元素的间距是这样计算的上的下外边距包裹上的下内边距下的上外边距可以看下面这个例子印证第三点。昨天面了html5前端。下面是其中3个问题：双外边距叠加。用原生js怎么实现div选项卡。如何去实现一个插件。一、双外边距折叠问题描述一上一下两个di...

Jason 2019-08-29 12:21 评论0 收藏0
前端面试复盘

摘要：从上面那段代码可以看到，下的上外边距只占了两个距离的一半，所以两个的间距是。下面分别对第和第个条件进行了测试。关于这一点，两个元素的间距是这样计算的上的下外边距包裹上的下内边距下的上外边距可以看下面这个例子印证第三点。昨天面了html5前端。下面是其中3个问题：双外边距叠加。用原生js怎么实现div选项卡。如何去实现一个插件。一、双外边距折叠问题描述一上一下两个di...

tomener 2019-08-20 15:31 评论0 收藏0
前端面试复盘

摘要：从上面那段代码可以看到，下的上外边距只占了两个距离的一半，所以两个的间距是。下面分别对第和第个条件进行了测试。关于这一点，两个元素的间距是这样计算的上的下外边距包裹上的下内边距下的上外边距可以看下面这个例子印证第三点。昨天面了html5前端。下面是其中3个问题：双外边距叠加。用原生js怎么实现div选项卡。如何去实现一个插件。一、双外边距折叠问题描述一上一下两个di...

hufeng 2019-08-01 16:37 评论0 收藏0
Angular 1 深度解析：脏数据检查与 angular 性能优化

摘要：通常写代码时我们无需主动调用或是因为在外部对我们的回调函数做了包装。类似的不只是这些事件回调函数，还有等。常量依旧会重复检查。会检查中有没有一个名为的成员。 TL;DR 脏检查是一种模型到视图的数据映射机制，由 $apply 或 $digest 触发。脏检查的范围是整个页面，不受区域或组件划分影响使用尽量简单的绑定表达式提升脏检查执行速度尽量减少页面上绑定表达式的个数（单次绑定...

fasss 2019-08-01 17:17 评论0 收藏0
Angular 1 深度解析：脏数据检查与 angular 性能优化

摘要：通常写代码时我们无需主动调用或是因为在外部对我们的回调函数做了包装。类似的不只是这些事件回调函数，还有等。常量依旧会重复检查。会检查中有没有一个名为的成员。 TL;DR 脏检查是一种模型到视图的数据映射机制，由 $apply 或 $digest 触发。脏检查的范围是整个页面，不受区域或组件划分影响使用尽量简单的绑定表达式提升脏检查执行速度尽量减少页面上绑定表达式的个数（单次绑定...

VioletJack 2019-08-20 18:26 评论0 收藏0