在線引用最新jquery文件的實現(xiàn)方法
759
2024-02-20
1.回調(diào)函數(shù)定義
回調(diào)函數(shù)就是一個通過函數(shù)指針調(diào)用的函數(shù)。如果你把函數(shù)的指針（地址）作為參數(shù)傳遞給另一個函數(shù)，當(dāng)這個指針被用來調(diào)用其所指向的函數(shù)時，我們就說這是回調(diào)函數(shù)。回調(diào)函數(shù)不是由該函數(shù)的實現(xiàn)方直接調(diào)用，而是在特定的事件或條件發(fā)生時由另外的一方調(diào)用的，才會真正的執(zhí)行回調(diào)函數(shù)內(nèi)部的方法。
2.代碼
JS代碼
(function($){
$.fn.shadow = function(opts){
//定義的默認的參數(shù)
var defaults = {
copies: 5,
opacity:0.1,
//回調(diào)函數(shù)
copyOffset:function(index){
return{x:index,y:index};
}
};
//將opts的內(nèi)容合并到default中。
var options = $.extend(defaults,opts);
return this.each(function(){
var $originalElement = $(this);
//設(shè)置參數(shù)對象
for(var i=0;i<options.copies;i++)
{
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,
//設(shè)置參數(shù)對象
opacity:options.opacity
})
.appendTo('body');
}
});
};
})(jQuery);
$(document).ready(function(){
$('h1').shadow({
copies:5,
copyOffset:function(index){
return {x:-index,y:-2 * index};
}
});
});
3.分析
通過這段代碼調(diào)試的時候進入的順序，便可理解回調(diào)函數(shù)的機制。通過對黃背景的四段代碼加入斷點。程序?qū)砸韵碌捻樞蜻\行
39：先跑第39行，當(dāng)DOM加載完畢后運行了shadow()，跑完39行并不會直接跑40行。而是直接調(diào)到了shadow()函數(shù)定義的地方。在這里只是聲明了copyOffset的函數(shù)指針。
2:這時候查看opts里面的內(nèi)容Object { copies=5, copyOffset=function()}從這里可以看出來copyOffset只是一個function()，
8:開始走默認參數(shù)的copyOffset，與39行一樣，不會直接進入回調(diào)函數(shù)里面的內(nèi)容。
19：走到這里時，需要將對CopyOffset發(fā)出請求并傳入了i作為參數(shù)。這時候i就是回調(diào)函數(shù)的參數(shù)index。
40:由于13行的”var options = $.Extend(defauflts,opts)”。opts的屬性會覆蓋掉default的屬性，所以不會走9行默認的參數(shù)中的回調(diào)函數(shù)的執(zhí)行方法，而是走了第40行的回調(diào)函數(shù)的方法。
4.總結(jié)
從上面的分析可以看出，回調(diào)函數(shù)在參數(shù)中聲明時，相當(dāng)于只是聲明了一個委托。等到用到這個參數(shù)的時候才會真正的執(zhí)行回調(diào)函數(shù)里面的內(nèi)容。
5.附html代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Developing Plugins</title> <link rel="stylesheet" type="text/css" /> <link rel="stylesheet" type="text/css" /> <script src="http://www.gimoo.net/t/1901/jquery.js"></script> <script src="http://www.gimoo.net/t/1901/jquery-ui-1.10.0.custom.min.js"></script> <script src="http://www.gimoo.net/t/1901/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 data-tooltip-text="Nutritious and delicious!">Spam</a></td> <td>4</td> <td>2.50</td> </tr> <tr> <td><a data-tooltip-text="Farm fresh or scrambled!">Egg</a></td> <td>12</td> <td>4.32</td> </tr> <tr> <td><a data-tooltip-text="Chef Hermann's recipe.">Gourmet Spam</a></td> <td>14</td> <td>7.89</td> </tr> </tbody> </table> </div> </body> </html>
以上所述是小編給大家介紹的jQuery學(xué)習(xí)筆記之回調(diào)函數(shù)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對綠夏網(wǎng)網(wǎng)站的支持！
