關(guān)于js的回調(diào)函數(shù)的一點(diǎn)看法 原文:關(guān)于js的回調(diào)函數(shù)的一點(diǎn)看法

? ? ? 算了一下又有好幾個(gè)月沒寫博客了，最近在忙公司android的項(xiàng)目，所以也就很少抽時(shí)間來(lái)寫些東西了。剛閑下來(lái)，我就翻了翻之前看的東西。做了android之后更加感覺到手機(jī)端開發(fā)的重要性，現(xiàn)在做native App??和Web App是主流，也就是說(shuō)現(xiàn)在各種基于瀏覽器的web app框架也會(huì)越來(lái)越火爆了，做js的也越來(lái)越有前途。我也決定從后端開發(fā)漸漸向前端開發(fā)和手機(jī)端開發(fā)靠攏，廢話不說(shuō)了，我們來(lái)切入正題“js的回調(diào)函數(shù)”相關(guān)的東西。

??????說(shuō)起回調(diào)函數(shù)，好多人雖然知道意思，但是還是一知半解。至于怎么用，還是有點(diǎn)糊涂。網(wǎng)上的一些相關(guān)的也沒有詳細(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è)過程就叫回調(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ì)有人問了“寫這樣的代碼有什么意思呢？好像沒太大的作用呢！”

???????是的，其實(shí)我也覺得這樣寫沒啥意思，“如果調(diào)用一個(gè)函數(shù)就直接在函數(shù)里面調(diào)用它不就行了”。我這只是給大家寫個(gè)小例子，做初步的理解。真正寫代碼的過程中很少用這樣無(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)了好久，開發(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ù)的賦值也是通過回調(diào)函數(shù)來(lái)實(shí)現(xiàn)的，這個(gè)參數(shù)是用回調(diào)參數(shù)給它賦予了一個(gè)對(duì)象值，仔細(xì)研究過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)單的寫了一下$相關(guān)的一些實(shí)現(xiàn)，之前寫過“小談Jquery”里面有比較接近框架實(shí)現(xiàn)的方法，我下面只是寫一個(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));});}elsethis.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> View Code

這段代碼我們主要看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í)候自己寫一些東西的時(shí)候也可以根據(jù)實(shí)際情況用用看。

????如果覺得這篇文章不夠詳細(xì)，可以單獨(dú)q我共同討論下（見博客首頁(yè)左上角），語(yǔ)言表達(dá)能力有所欠缺。感謝來(lái)訪的博友，我會(huì)在后面繼續(xù)增強(qiáng)個(gè)人技術(shù)以及語(yǔ)言水平，寫出更好的博客，大家互相學(xué)習(xí)進(jìn)步。

?

posted on 2015-01-05 11:48 NET未來(lái)之路 閱讀(...) 評(píng)論(...) 編輯 收藏

轉(zhuǎn)載于:https://www.cnblogs.com/lonelyxmas/p/4203186.html

總結(jié)

以上是生活随笔為你收集整理的关于js的回调函数的一点看法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。