jquery回调函数的一个案例

1.引言

今天在学习《jQuery基础教程》在学习编写插件的时候,书中说利用回调函数来当参数,会极大的提高程序的灵活性。对回调函数很陌生。研究了一下给的示例程序。感觉对回调函数有了基本的了解。记录下来,以备后用。

2.定义

回调函数就是一个通过函数指针调用的函数。如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时,我们就说这是回调函数。回调函数不是由该函数的实现方直接调用,而是在特定的事件或条件发生时由另外的一方调用的,才会真正的执行回调函数内部的方法。

3.代码

JS代码

jquery回调函数的一个案例
 1 (function($){
 2     $.fn.shadow = function(opts){
 3         //定义的默认的参数
 4         var defaults = {
 5             copies: 5,
 6             opacity:0.1,
 7             //回调函数
 8  copyOffset:function(index){
 9                 return{x:index,y:index};
10             }
11         };
12         //将opts的内容合并到default中。
13         var options = $.extend(defaults,opts);
14         return this.each(function(){
15             var $originalElement  = $(this);
16             //设置参数对象
17             for(var i=0;i<options.copies;i++)
18             {
19                 var offset = options.copyOffset(i);
20                 $originalElement
21                 .clone()
22                 .css({
23                     position:'absolute',
24                     left:$originalElement.offset().left + offset.x,
25                     top:$originalElement.offset().top + offset.y,
26                     margin:0,
27                     zIndex:-1,
28                     //设置参数对象
29                     opacity:options.opacity
30                 })
31                 .appendTo('body');
32             }
33         });
34     };
35 })(jQuery);
36 $(document).ready(function(){
37     $('h1').shadow({
38         copies:5,
39         copyOffset:function(index){
40         return {x:-index,y:-2 * index};
41         }
42     });
43 });
jquery回调函数的一个案例

4.分析

通过这段代码调试的时候进入的顺序,便可理解回调函数的机制。通过对黄背景的四段代码加入断点。程序将会以以下的顺序运行

39:先跑第39行,当DOM加载完毕后运行了shadow(),跑完39行并不会直接跑40行。而是直接调到了shadow()函数定义的地方。在这里只是声明了copyOffset的函数指针。

2:这时候查看opts里面的内容Object { copies=5, copyOffset=function()}从这里可以看出来copyOffset只是一个function(),

8:开始走默认参数的copyOffset,与39行一样,不会直接进入回调函数里面的内容。

19:走到这里时,需要将对CopyOffset发出请求并传入了i作为参数。这时候i就是回调函数的参数index。

40:由于13行的”var options = $.Extend(defauflts,opts)”。opts的属性会覆盖掉default的属性,所以不会走9行默认的参数中的回调函数的执行方法,而是走了第40行的回调函数的方法。

5.总结

从上面的分析可以看出,回调函数在参数中声明时,相当于只是声明了一个委托。等到用到这个参数的时候才会真正的执行回调函数里面的内容。

上一篇:利用JS实现自定义滚动条


下一篇:git 下载部分目录