你的位置:首页 > Java教程

[Java教程]什么?toggle(fn1, fn2)函数在1.9版本jq被移除? 来来来,自己撸一个


A:为什么一门语言有那么多内置函数?或者说为什么我们要去写函数?

B:原因很简单,我们要去处理一些逻辑,实现一些功能。

A:那,为什么要实现这些功能呢?

 

因为有需求啊,没有需求谁会去写?

----------------------------------------------------我是分割线------------------------------------------------------------

初试toggle 

相信用过jq的都知道toggle这个函数吧?不知道没事儿,下面是这个函数的介绍(来着w3c)

 

  试一试

 正如你看到的那样,它可以在hide() 和show()函数间转换。是不是很方面?

 A:说了当没说,谁不知道这个函数啊?又在装逼...

 

 来,我们接着看toggle函数的其他用法(w3c)

 试一试在这里,上面那个是图片 - -#

怎么样?是不是感觉这个函数很强大?可以接收多个函数作为参数,然后轮流响应每一个函数,例如:

我有函数a,b,c,d  作用在toggle函数上的话,他们的执行顺序为:a,b,c,d,a,b,c,d,a.....

A:对啊,是很强大。可是跟你有半毛钱关系嘛?

 

You can you up ,No can no bb;

来我们把示例代码copy下来,看看效果:

 1 <html> 2 <head> 3 <script type="text/javascript" src="http://www.cnblogs.com//jquery/jquery.js"></script> 4 <script type="text/javascript"> 5 $(document).ready(function(){ 6  $("button").toggle(function(){ 7   $("body").css("background-color","green");}, 8   function(){ 9   $("body").css("background-color","red");},10   function(){11   $("body").css("background-color","yellow");}12  );13 });14 </script>15 </head>16 <body>17 <button>请点击这里,来切换不同的背景颜色</button>18 </body>19 </html>

 

咦?报错?没事儿,问问度娘怎么回事儿。

 

 

 终于进入正题了....

 

 

--------------------------------------------------------我是分割线-------------------------------------------------------------

不管大家怎么觉得,反正我是认为这个函数真的很强大,你想想,比如我要挨个处理一些函数,轮流执行。正好可以用到这个。是不是很爽?

可是jq1.9就被移除了。可惜,那么就自己撸一个吧。

当然如果你非得说那我引用1.9一下的版本不就行了?我想表达的是,写代码和学习是一样的,是一个锻炼思维,让人成长的过程,啥都给你弄好了你还写啥?还要程序员干嘛?我们要的是一种思路,一种学习的精神。(装个B先,反正就是为了让你们能看完我的文章)

 

老套路,一步一步来,一点一点实现

1,来,我们先写个函数,函数的参数为函数

 

 1 function toggle(a){ 2     //判断是否为函数 3     if(typeof a == 'function'){ 4         a(); 5     }else{ 6       console.error("a not a function!") 7     return; 8     } 9   }10   toggle(function(){11     console.log("参数为函数")12   })13   var a;14   toggle(a)

 

 看看效果:

很不错,如果参数为函数,则执行。否则提示错误信息并return;存在问题,函数固定形参数量要和实际传参数量一致,也就是说限制了参数的个数。没事儿,接着来。

2,不限制函数参数个数。

那么如何才能做到不限制函数参数呢?这里我们用arguments。来看看它的介绍

 

 

So,代码就这样去实现:

 1 function toggle(){ 2     for(var i=0;i<arguments.length;i++){ 3  4       if(typeof arguments[i] == 'function'){ 5  6         arguments[i](); 7  8       }else{ 9 10         console.error(arguments[i]+" not a function");  11         12       }13     }14   }15 16 //调用toggle17 function a(){18   console.log('a');19 }20 function b(){21   console.log('b');22 }23 function c(){24   console.log('c');25 }26 toggle(a,b,c)

 

效果:

 

存在问题:传过去的函数全都执行 继续改进

3,让函数依次执行,

思路:把函数接收的参数遍历出来,存储在一个新的数组中,然后根据数组下标依次调用。

 

 1 function toggle(){ 2     var funarr = []; 3     //初始化index 为0 也就是默认执行第一个参数 4     var index = 0; 5  6     for(var i=0;i<arguments.length;i++){ 7       if(typeof arguments[i] == 'function'){         8         funarr.push(arguments[i]); 9       }else{10         console.error(arguments[i]+" not a function");          11       }    12     }13 14     //声明一个_go函数,来依次执行15     var _go = function(){    16       //判断index(数组下表)17       if(index < funarr.length){18         funarr[index]();19         //函数执行后下标+120         index += 1;21       }else{22       //index大于函数个数是重置为023         index = 0;      24       }25      26     }27     //返回go函数28     return {29       go:_go30     }31   }32 33 //调用toggle34 function a(){35   console.log('a');36 }37 function b(){38   console.log('b');39 }40 function c(){41   console.log('c');42 }43 var t = toggle(a,b,c);44 t.go();

 

 

同样,看看效果,三张图为别为调用1次,2次,3次

 

--------------------------------------------------------------------------------

------------------------------------------------------------------------------

 

恩,好的。不过还有问题。第四次调用就没有反应了.. 那么接着改

4,改进循环调用

思路:很简单,index重置为0的时候,让他自己调用自己

 

 

ok,那么现在功能都实现了。不过还有一个问题,如果参数列表中既有函数也有非函数,就会出问题。

改进很简单,写个flag判断是否夹杂有其他类型

 1 function toggle(){ 2     var funarr = []; 3     //初始化index 为0 也就是默认执行第一个参数 4     var index = 0; 5     //flag 判断是否有其他非函数类型的参数 6     var flag = 0; 7     for(var i=0;i<arguments.length;i++){ 8       if(typeof arguments[i] == 'function'){         9         funarr.push(arguments[i]);10       }else{11         flag = 1;12         console.error(arguments[i]+" not a function");          13       }    14     }15 16     //声明一个_go函数,来依次执行17     var _go = function(){  18       //判断是否夹杂其他类型参数19       if(!flag){20       //判断index(数组下表)21       if(index < funarr.length){22         funarr[index]();23         //函数执行后下标+124         index += 1;25       }else{26       //index大于函数个数是重置为027         index = 0;    28         //重置为0后 自己调用自己29         this.go();30       }31     }32      33     }34     //返回go函数35     return {36       go:_go37     }38   }39 40 //调用toggle41 function a(){42   console.log('a');43 }44 function b(){45   console.log('b');46 }47 function c(){48   console.log('c');49 }50 var t = toggle(a,'13213',b,c,'adf','f');51 t.go();52 t.go();53 t.go();54 t.go();55 t.go();56 t.go();

 

最终效果:

 

 

-----------------------------------------------------------------------------------------------------------------------------------------------------

到此这个函数就写完了。当然,由于我们是一步步实现,所以代码写得有点啰嗦。毕竟主要是向大家展示,让大家看得更直白点,各位可以按需改进下。

那么再回到最初那个例子,通过点击一个按钮轮流切换3种背景:

 

 

 完美解决。一个新的toggle出世