jQuery回调函数

1.引言

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

2.定义

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

3.代码

JS代码

 (function($){

     $.fn.shadow = function(opts){

         //定义的默认的参数

         var defaults = {

             copies: 5,

             opacity:0.1,

             //回调函数

  copyOffset:function(index){

                 return{x:index,y:index};

             }

         };

         //将opts的内容合并到default中。

         var options = $.extend(defaults,opts);

         return this.each(function(){

             var $originalElement  = $(this);

             //设置参数对象

             for(var i=0;i<options.copies;i++)

             {

19                 var offset = options.copyOffset(i);

                 $originalElement

                 .clone()

                 .css({

                     position:'absolute',

                     left:$originalElement.offset().left + offset.x,

                     top:$originalElement.offset().top + offset.y,

                     margin:0,

                     zIndex:-1,

                     //设置参数对象

                     opacity:options.opacity

                 })

                 .appendTo('body');

             }

         });

     };

 })(jQuery);

 $(document).ready(function(){

     $('h1').shadow({

         copies:5,

         copyOffset:function(index){

         return {x:-index,y:-2 * index};

         }

     });

 });

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代码

 <!DOCTYPE html>

 <html lang="en">

   <head>

     <meta charset="utf-8">

     <title>Developing Plugins</title>

     <link rel="stylesheet" href="08.css" type="text/css" />

     <link rel="stylesheet" href="ui-themes/smoothness/jquery-ui-1.10.0.custom.css" type="text/css" />

     <script src="jquery.js"></script>

     <script src="jquery-ui-1.10.0.custom.min.js"></script>

     <script src="08.js"></script>

   </head>

   <body>

     <div id="container">

       <h1>Inventory</h1>

       <table id="inventory">

         <thead>

           <tr class="two">

             <th>Product</th>

             <th>Quantity</th>

             <th>Price</th>

           </tr>

         </thead>

         <tfoot>

           <tr class="two" id="sum">

             <td>Total</td>

             <td></td>

             <td></td>

           </tr>

           <tr id="average">

             <td>Average</td>

             <td></td>

             <td></td>

           </tr>

         </tfoot>

         <tbody>

           <tr>

             <td><a href="spam.html" data-tooltip-text="Nutritious and delicious!">Spam</a></td>

             <td>4</td>

             <td>2.50</td>

           </tr>

           <tr>

             <td><a href="egg.html" data-tooltip-text="Farm fresh or scrambled!">Egg</a></td>

             <td>12</td>

             <td>4.32</td>

           </tr>

           <tr>

             <td><a href="gourmet-spam.html" data-tooltip-text="Chef Hermann's recipe.">Gourmet Spam</a></td>

             <td>14</td>

             <td>7.89</td>

           </tr>

         </tbody>

       </table>

     </div>

   </body>

 </html>

Html代码