tab切换代码优化

Posted 2020-08-20 叶文翔

上次的tab切换的代码里面有很多重复的代码，需要做做优化，把重复的代码用函数封装起来调用。

优化前：

 1 <script>    
 2     //获取id封装成一个函数$()方便调用
 3 function $(id){
 4         //如果传入的参数类型为字符串则获取当前ID元素，否则返回id
 5             return typeof id==="string"?document.getElementById(id):id;
 6         }
 7         function tab(){
 8         //声明 索引index，两个变量来装定时器，一个轮播定时器，一个延时定时器
 9         var index=0,timer=null,timer2=null;
10         var titles=$(‘notice-tit‘).getElementsByTagName(‘li‘);
11         var divs=$(‘notice-con‘).getElementsByTagName(‘div‘);
12         for(var j=0;j<titles.length;j++){
13             //给每个li设置ID
14             titles[j].id=j;
15             //给每个li绑定悬浮事件
16             titles[j].onmouseover=function(){
17             //悬浮时首先清除延时定时器
18                 clearInterval(timer);
19             //清除轮播定时器
20                 clearTimeout(timer2);
21             //初始化两个定时器
22                 timer2=null;
23                 timer=null;
24             //this的一个引用，因为在setTimeout中this指向window对象
25                 var that=this;
26             //创建一个延时定时器
27                 timer2=setTimeout(function(){
28                     for(var i=0;i<titles.length;i++){
29                 titles[i].className="";
30                 divs[i].style.display="none";
31             }
32             titles[that.id].className="select";
33             divs[that.id].style.display="block";
34             //鼠标悬浮时改变index的值为当前的id
35             index=that.id;
36                 },500);
37             }
38             //给每个Li绑定鼠标离开时的事件
39             titles[j].onmouseout=function(){
40             //创建一个轮播定时器,离开时轮播能继续进行,因为上面设置了index=that
41             //所以鼠标离开后会自动播放下一个tab
42             timer=setInterval(function(){
43                 index++;
44             if(index>=titles.length){
45                 index=0;
46             }
47             for(var i=0;i<titles.length;i++){
48                 titles[i].className="";
49                 divs[i].style.display="none";
50             }
51             titles[index].className="select";
52             divs[index].style.display="block";
53             },2000);
54             }
55         }
56         //创建之前看是否存在轮播定时器，有就清除掉
57         if(timer){
58             clearInterval(timer);
59             timer=null;
60         }
61         //创建一个轮播定时器
62         timer=setInterval(function(){
63             index++;
64             if(index>=titles.length){
65                 index=0;
66             }
67             for(var i=0;i<titles.length;i++){
68                 titles[i].className="";
69                 divs[i].style.display="none";
70             }
71             titles[index].className="select";
72             divs[index].style.display="block";
73         },2000);
74 }
75 tab();
76 </script>

优化后：

 1     <script>    
 2     //获取id封装成一个函数$()方便调用
 3         function $(id){
 4         //如果传入的参数类型为字符串则获取当前ID元素，否则返回id
 5             return typeof id==="string"?document.getElementById(id):id;
 6         }
 7         function tab(){
 8         //声明 索引index，两个变量来装定时器，一个轮播定时器，一个延时定时器
 9         var index=0,timer=null,timer2=null;
10         var titles=$(‘notice-tit‘).getElementsByTagName(‘li‘);
11         var divs=$(‘notice-con‘).getElementsByTagName(‘div‘);
12         for(var j=0;j<titles.length;j++){
13             //给每个li设置ID
14             titles[j].id=j;
15             //给每个li绑定悬浮事件
16             titles[j].onmouseover=function(){
17             //悬浮时首先清除延时定时器
18                 clearInterval(timer);
19             //清除轮播定时器
20                 clearTimeout(timer2);
21             //初始化两个定时器
22                 timer2=null;
23                 timer=null;
24             //this的一个引用，因为在setTimeout中this指向window对象
25                 var that=this;
26             //创建一个延时定时器
27                 timer2=setTimeout(function(){
28                 changeOption(that.id);
29             //鼠标悬浮时改变index的值为当前的id
30             index=that.id;
31                 },500);
32             }
33             //给每个Li绑定鼠标离开时的事件
34             titles[j].onmouseout=function(){
35             //创建一个轮播定时器,离开时轮播能继续进行,因为上面设置了index=that
36             //所以鼠标离开后会自动播放下一个tab
37             timer=setInterval(autoPlay,2000);
38             }
39         }
40         //创建之前看是否存在轮播定时器，有就清除掉
41         if(timer){
42             clearInterval(timer);
43             timer=null;
44         }
45         //创建一个轮播定时器
46         timer=setInterval(autoPlay,2000);
47 function autoPlay(){
48             index++;
49             if(index>=titles.length){
50                 index=0;
51             }
52             changeOption(index);
53 }
54 function changeOption(curindex){
55     for(var i=0;i<titles.length;i++){
56                 titles[i].className="";
57                 divs[i].style.display="none";
58             }
59             titles[curindex].className="select";
60             divs[curindex].style.display="block";
61 }
62 }
63 
64 tab();

代码中三处重复的for循环清除 className display的属性，和下面给当前索引添加属性，所以需要把他们封装成函数，但是三处也不是全部一样，索引的值不同，可以给封装的函数changeOption()传入参数来解决.

然后发现自动轮播有两处是一样的，封装成函数autoPlay(),来调用它。

要记得，只要出现了重复都可以用函数来封装调用。