1.引言
今天在学习《jQuery基础教程》在学习编写插件的时候，书中说利用回调函数来当参数，会极大的提高程序的灵活性。对回调函数很陌生。研究了一下给的示例程序。感觉对回调函数有了基本的了解。记录下来，以备后用。
2.定义
回调函数就是一个通过函数指针调用的函数。如果你把函数的指针（地址）作为参数传递给另一个函数，当这个指针被用来调用其所指向的函数时，我们就说这是回调函数。回调函数不是由该函数的实现方直接调用，而是在特定的事件或条件发生时由另外的一方调用的，才会真正的执行回调函数内部的方法。
3.代码
JS代码
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 });
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.总结
从上面的分析可以看出，回调函数在参数中声明时，相当于只是声明了一个委托。等到用到这个参数的时候才会真正的执行回调函数里面的内容。
6.附html代码
1 <!DOCTYPE html>
2
3 <html lang="en">
4 <head>
5 <meta charset="utf-8">
6 <title>Developing Plugins</title>
7
8 <link href="08.css" type="text/css" />
9 <link href="ui-themes/smoothness/jquery-ui-1.10.0.custom.css" type="text/css" />
10
11 <script src="jquery.js"></script>
12 <script src="jquery-ui-1.10.0.custom.min.js"></script>
13 <script src="08.js"></script>
14 </head>
15 <body>
16 <div>
17 <h1>Inventory</h1>
18 <table>
19 <thead>
20 <tr>
21 <th>Product</th>
22 <th>Quantity</th>
23 <th>Price</th>
24 </tr>
25 </thead>
26 <tfoot>
27 <tr>
28 <td>Total</td>
29 <td></td>
30 <td></td>
31 </tr>
32 <tr>
33 <td>Average</td>
34 <td></td>
35 <td></td>
36 </tr>
37 </tfoot>
38 <tbody>
39 <tr>
40 <td><a href="spam.html" data-tooltip-text="Nutritious and delicious!">Spam</a></td>
41 <td>4</td>
42 <td>2.50</td>
43 </tr>
44 <tr>
45 <td><a href="egg.html" data-tooltip-text="Farm fresh or scrambled!">Egg</a></td>
46 <td>12</td>
47 <td>4.32</td>
48 </tr>
49 <tr>
50 <td><a href="gourmet-spam.html" data-tooltip-text="Chef Hermann's recipe.">Gourmet Spam</a></td>
51 <td>14</td>
52 <td>7.89</td>
53 </tr>
54 </tbody>
55 </table>
56 </div>
57 </body>
58 </html>
Html代码
相关文章
精彩导读
热门资讯
关注我们
