js的回調(diào)函數(shù)詳解
現(xiàn)在做native App 和Web App是主流，也就是說(shuō)現(xiàn)在各種基于瀏覽器的web app框架也會(huì)越來(lái)越火爆了，做js的也越來(lái)越有前途。我也決定從后端開(kāi)發(fā)漸漸向前端開(kāi)發(fā)和手機(jī)端開(kāi)發(fā)靠攏，廢話不說(shuō)了，我們來(lái)切入正題“js的回調(diào)函數(shù)”相關(guān)的東西。
說(shuō)起回調(diào)函數(shù)，好多人雖然知道意思，但是還是一知半解。至于怎么用，還是有點(diǎn)糊涂。網(wǎng)上的一些相關(guān)的也沒(méi)有詳細(xì)的說(shuō)一下是怎么回事，說(shuō)的比較片面。下面我只是說(shuō)說(shuō)個(gè)人的一點(diǎn)理解，大牛勿噴。我們來(lái)看一下一個(gè)粗略的一個(gè)定義“函數(shù)a有一個(gè)參數(shù)，這個(gè)參數(shù)是個(gè)函數(shù)b，當(dāng)函數(shù)a執(zhí)行完以后執(zhí)行函數(shù)b。那么這個(gè)過(guò)程就叫回調(diào)?！保@句話的意思是函數(shù)b以一個(gè)參數(shù)的形式傳入函數(shù)a并執(zhí)行，順序是先執(zhí)行a ，然后執(zhí)行參數(shù)b,b就是所謂的回調(diào)函數(shù)。我們先來(lái)看下面的例子。
function a(callback){
alert('a');
callback.call(this);//或者是 callback（）, callback.apply(this),看個(gè)人喜好
}
function b(){
alert('b');
}
//調(diào)用
a(b);
這樣的結(jié)果是先彈出 'a'，再?gòu)棾觥産'。這樣估計(jì)會(huì)有人問(wèn)了“寫(xiě)這樣的代碼有什么意思呢？好像沒(méi)太大的作用呢！”
是的，其實(shí)我也覺(jué)得這樣寫(xiě)沒(méi)啥意思，“如果調(diào)用一個(gè)函數(shù)就直接在函數(shù)里面調(diào)用它不就行了”。我這只是給大家寫(xiě)個(gè)小例子，做初步的理解。真正寫(xiě)代碼的過(guò)程中很少用這樣無(wú)參數(shù)的，因?yàn)樵诖蟛糠謭?chǎng)景中，我們要傳遞參數(shù)。來(lái)個(gè)帶參數(shù)的：
function c(callback){
alert('c');
callback.call(this,'d');
}
//調(diào)用
c(function(e){
alert(e);
});
這個(gè)調(diào)用看起來(lái)是不是似曾相識(shí)，這里e參數(shù)被賦值為'd'，我們只是簡(jiǎn)單的賦值為字符竄，其實(shí)也可以賦值為對(duì)象。Jquery里面是不是也有個(gè)e參數(shù)，下面我們就來(lái)講講
Jquery里面的e參數(shù)是如何被回調(diào)賦值的。
Jquery框架我想大家不陌生了，出來(lái)了好久，開(kāi)發(fā)的時(shí)候都在用，比較簡(jiǎn)單，api網(wǎng)上搜起來(lái)很方便，上手快。在Jquery框架下，我們有時(shí)候要獲取事件中的一些參數(shù)，比如我要獲取當(dāng)前點(diǎn)擊的坐標(biāo)，點(diǎn)擊的元素對(duì)象。這個(gè)需求在Jquery里面好辦 ：
$("#id").bind('click',function(e){
//e.pageX ,e.pageY ,e.target.....各種數(shù)據(jù)
});
用起來(lái)倒是挺方便，其實(shí)這個(gè)e參數(shù)的賦值也是通過(guò)回調(diào)函數(shù)來(lái)實(shí)現(xiàn)的，這個(gè)參數(shù)是用回調(diào)參數(shù)給它賦予了一個(gè)對(duì)象值，仔細(xì)研究過(guò)JJquery源碼的朋友應(yīng)該發(fā)現(xiàn)了這一點(diǎn)。
還有Ajax里面 $.get('',{},function(data){}) data這個(gè)參數(shù)也是同樣的原理。
我們來(lái)看看Jquery事件對(duì)象里面是怎么應(yīng)用回調(diào)函數(shù)的。
為了方便，我簡(jiǎn)單的寫(xiě)了一下$相關(guān)的一些實(shí)現(xiàn)，之前寫(xiě)過(guò)“小談Jquery”里面有比較接近框架實(shí)現(xiàn)的方法，我下面只是寫(xiě)一個(gè)簡(jiǎn)易的選擇器。
<div id="container" style="width:200px;height:200px;background-Color:green;">
</div>
<script>
var _$=function (id)
{
this.element= document.getElementById(id);
}
_$.prototype={
bind:function(evt,callback)
{
var that=this;
if(document.addEventListener)
{
this.element.addEventListener(evt, function(e){
callback.call(this,that.standadize(e));
} ,false);
}
else if(document.attachEvent)
{
this.element.attachEvent('on'+evt,function(e){
callback.call(this,that.standadize(e));
});
}
else
this.element['on'+evt]=function(e){
callback.call(this,that.standadize(e));
};
},
standadize:function(e){
var evt=e||window.event;
var pageX,pageY,layerX,layerY;
//pageX 橫坐標(biāo) pageY縱坐標(biāo) layerX點(diǎn)擊處位于元素的橫坐標(biāo) layerY點(diǎn)擊處位于元素的縱坐標(biāo)
if(evt.pageX)
{
pageX=evt.pageX;
pageY=evt.pageY;
}
else
{
pageX=document.body.scrollLeft+evt.clientX-document.body.clientLeft;
pageY=document.body.scrollTop+evt.clientY-document.body.clientLTop;
}
if(evt.layerX)
{
layerX=evt.layerX;
layerY=evt.layerY;
}
else
{
layerX=evt.offsetX;
layerXY=evt.offsetY;
}
return {
pageX:pageX,
pageY:pageY,
layerX:layerX,
layerY:layerY
}
}
}
window.$=function(id)
{
return new _$(id);
}
$('container').bind('click',function(e){
alert(e.pageX);
});
$('container1').bind('click',function(e){
alert(e.pageX);
});
</script>
這段代碼我們主要看standadize函數(shù)的實(shí)現(xiàn)，兼容性的代碼，就不多說(shuō)了，返回的是一個(gè)對(duì)象
return {
pageX:pageX,
pageY:pageY,
layerX:layerX,
layerY:layerY
}
然后再看bind函數(shù)里面的代碼 callback.call(this,that.standadize(e))，這段代碼其實(shí)就是給e參數(shù)賦值了，是用callback回調(diào)實(shí)現(xiàn)的。
callback 函數(shù)被調(diào)用的時(shí)候傳入的是匿名函數(shù)
function(e){
}
而callback.call(this,that.standadize(e))相當(dāng)于是執(zhí)行了這么一段代碼
(function(e){
})(standadize(e))
這也是Jquery用回調(diào)函數(shù)比較經(jīng)典的地方，e參數(shù)就是這么被賦值的，說(shuō)了這些你們也大概有個(gè)了解了，以及怎么使用了。
回調(diào)在各種框架中應(yīng)用的比較多，有時(shí)候自己寫(xiě)一些東西的時(shí)候也可以根據(jù)實(shí)際情況用用看。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)書(shū)架小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
[紅色]經(jīng)驗(yàn)幾則 推薦...2006-09-09
JavaScript 未結(jié)束的字符串常量常見(jiàn)解決方法
做JavaScript的時(shí)候,發(fā)現(xiàn)老是出現(xiàn)錯(cuò)誤：“未結(jié)束的字符串常量”. 自己找了下應(yīng)該是傳參數(shù)的時(shí)候,有特殊字符引起的.網(wǎng)上也找了下,也有好多出現(xiàn)這種情況.做下總結(jié),以方便以后查閱.2010-01-01
js使用swiper實(shí)現(xiàn)層疊輪播效果實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于js使用swiper實(shí)現(xiàn)層疊輪播效果的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
JavaScript編寫(xiě)一個(gè)簡(jiǎn)易購(gòu)物車功能
這篇文章主要為大家詳細(xì)介紹了JavaScript簡(jiǎn)易購(gòu)物車功能的編寫(xiě)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
JavaScript清空數(shù)組元素的兩種方法簡(jiǎn)單比較
這篇文章主要介紹了JavaScript清空數(shù)組元素的兩種方法簡(jiǎn)單比較,羅列了幾種常見(jiàn)的情況javascript數(shù)組的方法,并且比較了其中的兩種常見(jiàn)方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
用js實(shí)現(xiàn)的圖片生成效果代碼，學(xué)習(xí)js的朋友可以看看2008-04-04
AJAX使用了UpdatePanel后無(wú)法使用alert彈出腳本
今天在做項(xiàng)目的時(shí)候發(fā)現(xiàn)個(gè)問(wèn)題。。使用UpdatePanel后alert腳本就要報(bào)錯(cuò)了。2010-04-04
這篇文章主要為大家詳細(xì)介紹了js界面跳轉(zhuǎn)與值傳遞的相關(guān)代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
檢查對(duì)象類型的一種方式是參考所有JavaScript對(duì)象所共有的一個(gè)稱為constructor的屬性。該屬性是對(duì)一個(gè)最初用來(lái)構(gòu)造此對(duì)象的函數(shù)的引用。2010-10-10