對js中回調(diào)函數(shù)的一些看法
最近在忙公司android的項目，所以也就很少抽時間來寫些東西了。剛閑下來，我就翻了翻之前看的東西。做了android之后更加感覺到手機端開發(fā)的重要性，現(xiàn)在做native App 和Web App是主流，也就是說現(xiàn)在各種基于瀏覽器的web app框架也會越來越火爆了，做js的也越來越有前途。我也決定從后端開發(fā)漸漸向前端開發(fā)和手機端開發(fā)靠攏，廢話不說了，我們來切入正題“js的回調(diào)函數(shù)”相關(guān)的東西。
說起回調(diào)函數(shù)，好多人雖然知道意思，但是還是一知半解。至于怎么用，還是有點糊涂。網(wǎng)上的一些相關(guān)的也沒有詳細的說一下是怎么回事，說的比較片面。下面我只是說說個人的一點理解，大牛勿噴。我們來看一下一個粗略的一個定義“函數(shù)a有一個參數(shù)，這個參數(shù)是個函數(shù)b，當函數(shù)a執(zhí)行完以后執(zhí)行函數(shù)b。那么這個過程就叫回調(diào)。”，這句話的意思是函數(shù)b以一個參數(shù)的形式傳入函數(shù)a并執(zhí)行，順序是先執(zhí)行a ，然后執(zhí)行參數(shù)b,b就是所謂的回調(diào)函數(shù)。我們先來看下面的例子。
function a(callback){
alert('a');
callback.call(this);//或者是 callback（）, callback.apply(this),看個人喜好
}
function b(){
alert('b');
}
//調(diào)用
a(b);
這樣的結(jié)果是先彈出 'a'，再彈出‘b'。這樣估計會有人問了“寫這樣的代碼有什么意思呢？好像沒太大的作用呢！”
是的，其實我也覺得這樣寫沒啥意思，“如果調(diào)用一個函數(shù)就直接在函數(shù)里面調(diào)用它不就行了”。我這只是給大家寫個小例子，做初步的理解。真正寫代碼的過程中很少用這樣無參數(shù)的，因為在大部分場景中，我們要傳遞參數(shù)。來個帶參數(shù)的：
function c(callback){
alert('c');
callback.call(this,'d');
}
//調(diào)用
c(function(e){
alert(e);
});
這個調(diào)用看起來是不是似曾相識，這里e參數(shù)被賦值為'd'，我們只是簡單的賦值為字符竄，其實也可以賦值為對象。Jquery里面是不是也有個e參數(shù)，下面我們就來講講
Jquery里面的e參數(shù)是如何被回調(diào)賦值的。
Jquery框架我想大家不陌生了，出來了好久，開發(fā)的時候都在用，比較簡單，api網(wǎng)上搜起來很方便，上手快。在Jquery框架下，我們有時候要獲取事件中的一些參數(shù)，比如我要獲取當前點擊的坐標，點擊的元素對象。這個需求在Jquery里面好辦 ：
$("#id").bind('click',function(e){
//e.pageX ,e.pageY ,e.target.....各種數(shù)據(jù)
});
用起來倒是挺方便，其實這個e參數(shù)的賦值也是通過回調(diào)函數(shù)來實現(xiàn)的，這個參數(shù)是用回調(diào)參數(shù)給它賦予了一個對象值，仔細研究過JJquery源碼的朋友應該發(fā)現(xiàn)了這一點。
還有Ajax里面 $.get('',{},function(data){}) data這個參數(shù)也是同樣的原理。
我們來看看Jquery事件對象里面是怎么應用回調(diào)函數(shù)的。
為了方便，我簡單的寫了一下$相關(guān)的一些實現(xiàn)，之前寫過“小談Jquery”里面有比較接近框架實現(xià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 橫坐標 pageY縱坐標 layerX點擊處位于元素的橫坐標 layerY點擊處位于元素的縱坐標
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ù)的實現(xiàn)，兼容性的代碼，就不多說了，返回的是一個對象
return {
pageX:pageX,
pageY:pageY,
layerX:layerX,
layerY:layerY
}
然后再看bind函數(shù)里面的代碼 callback.call(this,that.standadize(e))，這段代碼其實就是給e參數(shù)賦值了，是用callback回調(diào)實現(xiàn)的。
callback 函數(shù)被調(diào)用的時候傳入的是匿名函數(shù)
function(e){
}
而callback.call(this,that.standadize(e))相當于是執(zhí)行了這么一段代碼
(function(e){
})(standadize(e))
這也是Jquery用回調(diào)函數(shù)比較經(jīng)典的地方，e參數(shù)就是這么被賦值的，說了這些你們也大概有個了解了，以及怎么使用了。
回調(diào)在各種框架中應用的比較多，有時候自己寫一些東西的時候也可以根據(jù)實際情況用用看。
以上這篇對js中回調(diào)函數(shù)的一些看法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
- javascript回調(diào)函數(shù)的概念理解與用法分析
- JS回調(diào)函數(shù)基本定義與用法實例分析
- 微信小程序中使用javascript 回調(diào)函數(shù)
- JS回調(diào)函數(shù)簡單用法示例
- 深入理解Node.js 事件循環(huán)和回調(diào)函數(shù)
- 常用js,css文件統(tǒng)一加載方法(推薦) 并在加載之后調(diào)用回調(diào)函數(shù)
- 關(guān)于Javascript回調(diào)函數(shù)的一個妙用
- 淺析JavaScript回調(diào)函數(shù)應用
- JS動態(tài)插入并立即執(zhí)行回調(diào)函數(shù)的方法
- Javascript基于AJAX回調(diào)函數(shù)傳遞參數(shù)實例分析
- js自定義回調(diào)函數(shù)
- 詳解JavaScript的回調(diào)函數(shù)
- javascript回調(diào)函數(shù)詳解
相關(guān)文章
bootstrap table之通用方法（ 時間控件，導出，動態(tài)下拉框， 表單驗證 ，選中與獲取信息）代碼分享
這篇文章主要介紹了bootstrap table之通用方法（ 時間控件，導出，動態(tài)下拉框， 表單驗證 ，選中與獲取信息）代碼分享，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-01-01
今天小編就為大家分享一篇layui點擊按鈕頁面會自動刷新的解決方案，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
js中forEach的用法之forEach與for之間的區(qū)別
這篇文章主要介紹了js中forEach的用法之forEach與for之間的區(qū)別，forEach() 調(diào)用數(shù)組的每個元素，并將元素傳遞給回調(diào)函數(shù)，下面更多詳細介紹需要的小伙伴可以參考一下2022-03-03
九種js彈出對話框的方法總結(jié)，需要的朋友可以參考一下2013-03-03
ES2015 推出了JS 的 Promise ，而在沒有原生支持的時候，我們也可以使用諸如 Promises/A+ 的庫的幫助，在我們的代碼里實現(xiàn)Promise 的支持，下面這篇文章主要給大家介紹了如何從零開始利用js手寫一個Promise庫的相關(guān)資料，需要的朋友可以參考下。2018-04-04
這篇文章主要介紹了如何利用Cesium繪制柵欄效果的示例代碼，文中的示例代碼講解詳細，對我們學習或工作有一定的幫助，需要的可以參考一下2022-06-06
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)單選選項卡切換效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-02-02
js實現(xiàn)動態(tài)加載數(shù)據(jù)瀑布流
這篇文章主要為大家詳細介紹了js實現(xiàn)動態(tài)加載數(shù)據(jù)瀑布流，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
javascript+xml技術(shù)實現(xiàn)分頁瀏覽
基于web的技術(shù)中，分頁是一個老的不能再老的，但大家津津樂道的問題，隨著xml技術(shù)的日漸應用，把xml應用到分頁當中，也是一種可能，當然網(wǎng)上的教程很多，當我都是看得稀里糊涂，索性自己寫一個，與大家分享、指正。2008-07-07
這篇文章主要為大家詳細介紹了js實現(xiàn)簡單頁面全屏的功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09