你的位置:首页 > Java教程

[Java教程]jQuery回调函数


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         $originalElement21         .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.opacity30         })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 rel="stylesheet" href="08.css" type="text/css" /> 9   <link rel="stylesheet" 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 id="container">17    <h1>Inventory</h1>18    <table id="inventory">19     <thead>20      <tr class="two">21       <th>Product</th>22       <th>Quantity</th>23       <th>Price</th>24      </tr>25     </thead>26     <tfoot>27      <tr class="two" id="sum">28       <td>Total</td>29       <td></td>30       <td></td>31      </tr>32      <tr id="average">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代码