jQuery回调函数
1.引言
今天在學(xué)習(xí)《jQuery基礎(chǔ)教程》在學(xué)習(xí)編寫插件的時(shí)候，書中說(shuō)利用回調(diào)函數(shù)來(lái)當(dāng)參數(shù)，會(huì)極大的提高程序的靈活性。對(duì)回調(diào)函數(shù)很陌生。研究了一下給的示例程序。感覺(jué)對(duì)回調(diào)函數(shù)有了基本的了解。記錄下來(lái)，以備后用。
2.定義
回調(diào)函數(shù)就是一個(gè)通過(guò)函數(shù)指針調(diào)用的函數(shù)。如果你把函數(shù)的指針（地址）作為參數(shù)傳遞給另一個(gè)函數(shù)，當(dāng)這個(gè)指針被用來(lái)調(diào)用其所指向的函數(shù)時(shí)，我們就說(shuō)這是回調(diào)函數(shù)。回調(diào)函數(shù)不是由該函數(shù)的實(shí)現(xiàn)方直接調(diào)用，而是在特定的事件或條件發(fā)生時(shí)由另外的一方調(diào)用的，才會(huì)真正的執(zhí)行回調(diào)函數(shù)內(nèi)部的方法。
3.代碼
JS代碼
1 (function($){ 2 $.fn.shadow = function(opts){ 3 //定義的默認(rèn)的參數(shù) 4 var defaults = { 5 copies: 5, 6 opacity:0.1, 7 //回調(diào)函數(shù) 8 copyOffset:function(index){ 9 return{x:index,y:index}; 10 } 11 }; 12 //將opts的內(nèi)容合并到default中。 13 var options = $.extend(defaults,opts); 14 return this.each(function(){ 15 var $originalElement = $(this); 16 //設(shè)置參數(shù)對(duì)象 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 //設(shè)置參數(shù)對(duì)象 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.分析
通過(guò)這段代碼調(diào)試的時(shí)候進(jìn)入的順序，便可理解回調(diào)函數(shù)的機(jī)制。通過(guò)對(duì)黃背景的四段代碼加入斷點(diǎn)。程序?qū)?huì)以以下的順序運(yùn)行
39：先跑第39行，當(dāng)DOM加載完畢后運(yùn)行了shadow()，跑完39行并不會(huì)直接跑40行。而是直接調(diào)到了shadow()函數(shù)定義的地方。在這里只是聲明了copyOffset的函數(shù)指針。
2:這時(shí)候查看opts里面的內(nèi)容Object { copies=5, copyOffset=function()}從這里可以看出來(lái)copyOffset只是一個(gè)function()，
8:開(kāi)始走默認(rèn)參數(shù)的copyOffset，與39行一樣，不會(huì)直接進(jìn)入回調(diào)函數(shù)里面的內(nèi)容。
19：走到這里時(shí)，需要將對(duì)CopyOffset發(fā)出請(qǐng)求并傳入了i作為參數(shù)。這時(shí)候i就是回調(diào)函數(shù)的參數(shù)index。
40:由于13行的”var options = $.Extend(defauflts,opts)”。opts的屬性會(huì)覆蓋掉default的屬性，所以不會(huì)走9行默認(rèn)的參數(shù)中的回調(diào)函數(shù)的執(zhí)行方法，而是走了第40行的回調(diào)函數(shù)的方法。
5.總結(jié)
從上面的分析可以看出，回調(diào)函數(shù)在參數(shù)中聲明時(shí)，相當(dāng)于只是聲明了一個(gè)委托。等到用到這個(gè)參數(shù)的時(shí)候才會(huì)真正的執(zhí)行回調(diào)函數(shù)里面的內(nèi)容。
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代碼?
轉(zhuǎn)載于:https://www.cnblogs.com/MaFeng0213/p/5769785.html
總結(jié)
以上是生活随笔為你收集整理的jQuery回调函数的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Atitit.去除水印的方案
- 下一篇： Maven提高篇系列之（五）——处理依赖