首頁 > web前端 > js教程 > js的回呼函數詳解_javascript技巧

js的回呼函數詳解_javascript技巧

WBOY
發布: 2016-05-16 16:22:13
原創
972 人瀏覽過

現在做native App  和Web App是主流,也就是說現在各種基於瀏覽器的web app框架也會越來越火爆了,做js的也越來越有前途。我也決定從後端開發漸漸向前端開發和手機端開發靠攏,廢話不說了,我們來切入正題「js的回調函數」相關的東西。

      說起回呼函數,好多人雖然知道意思,但是還是一知半解。至於怎麼用,還是有點糊塗。網路上的一些相關的也沒有詳細的說一下是怎麼回事,說的比較片面。下面我只是說說個人的一點理解,大牛勿噴。我們來看一個粗略的一個定義“函數a有一個參數,這個參數是個函數b,當函數a執行完以後執行函數b。那麼這個過程就叫回調。”,這句話的意思是函數b以一個參數的形式傳入函數a並執行,順序是先執行a ,然後執行參數b,b就是所謂的回呼函數。我們先來看下面的例子。

複製程式碼 程式碼如下:

   function  a(callback){
      alert('a');
      callback.call(this);//或 callback(),  callback.apply(this),看個人喜好
   }
   function  b(){
       alert('b');
   }
   //呼叫
   a(b);

       這樣的結果是先彈出 'a',再彈出‘b'。這樣估計會有人問了「寫這樣的程式碼有什麼意思呢?好像沒太大的作用呢!」

       是的,其實我也覺得這樣寫沒啥意思,「如果呼叫一個函數就直接在函數裡面呼叫它不就行了」。我這只是給大家寫個小例子,做初步的理解。真正寫程式的過程中很少用這樣無參數的,因為在大部分場景中,我們要傳遞參數。來個帶參數的:

複製程式碼 程式碼如下:

function  c(callback){
      alert('c');
      callback.call(this,'d');
    }
//呼叫
c(function(e){
    alert(e);
});

      這個調用看起來是不是似曾相識,這裡e參數被賦值為'd',我們只是簡單的賦值為字符竄,其實也可以賦值為對象。 Jquery裡面是不是也有e參數,下面我們就來講
Jquery裡面的e參數是如何被回呼賦值的。

       Jquery框架我想大家不陌生了,出來了好久,開發的時候都在用,比較簡單,api網上搜起來很方便,上手快。在Jquery框架下,我們有時候要取得事件中的一些參數,例如我要取得目前點擊的座標,點擊的元素物件。這個需求在Jquery裡面好辦  :

複製程式碼 程式碼如下:

        $("#id").bind('click',function(e){
          //e.pageX ,e.pageY ,e.target.....各種資料
        });

        用起來倒是挺方便,其實這個e參數的賦值也是透過回呼函數來實現的,這個參數是用回調參數給它賦予了一個物件值,仔細研究過JJquery源碼的朋友應該發現了這一點。

還有Ajax裡面   $.get('',{},function(data){})    data這個參數也是同樣的原理。

        我們來看看Jquery事件物件裡面是怎麼應用回呼函數的。

       為了方便,我簡單的寫了一下$相關的一些實現,之前寫過“小談Jquery”裡面有比較接近框架實現的方法,我下面只是寫一個簡易的選擇器。

複製程式碼 程式碼如下:




     var   _$=函數(id)
               {
                     this.element=  document.getElementById(id);
                }
       _$.prototype={
            綁定:函數(evt,回調)
            {
                var   that=this;
                if(document.addEventListener)
                {
                    this.element.addEventListener(evt, function(e){
                        callback.call(this,that.standadize(e));
                    } ,假);
                }
                else if(document.attachEvent)
                {
                    this.element.attachEvent('on' evt,function(e){
                        callback.call(this,that.standadize(e));
                    });
                }
                其他
                    this.element['on' evt]=function(e){
                        callback.call(this,that.standadize(e));
                    };
            },
            標準化:函數(e){
                 var evt=e||window.event;
                 var pageX,pageY,layerX,layerY;
                 //pageX 橫向座標  pageY 縱向座標  layerX 點選處定位元素的橫向座標  layerY 點選處定位元素的縱向座標
                 if(evt.pageX)
                 {
                     pageX=evt.pageX;
                     pageY=evt.pageY;
                 }
                 其他
                 {
                    pageX=document.body.scrollLeft evt.clientX-document.body.clientLeft;
                    pageY=document.body.scrollTop evt.clientY-document.body.clientLTop;
                 }
                 if(evt.layerX)
                 {
                                          LayerY=evt.layerY;
                 }
                 其他
                 {
                                          LayerXY=evt.offsetY;
                 }
                 回 {
                    第X頁:頁X頁,
                    第Y頁:第Y頁,
                    層X:層X,
                    Y 層:Y 層
                 }
            }
       }
       視窗.$=函數(id)
       {
          回新的_$(id);
       }
        $('container').bind('click',function(e){
            警報(e.pageX);
        });
        $('container1').bind('click',function(e){
             警報(e.pageX);
        });
腳本>


大概的程式碼我們主要看standadize函數的實現,相容的程式碼,不多說了,回傳的是一個物件

複製程式碼程式碼如下:
     回 {
                    第X頁:頁X頁,
                    第Y頁:第Y頁,
                    層X:層X,
                    Y 層:Y 層
                 }


然後再看bind函數裡面的程式碼   callback.call(this,that.standadize(e)),大概程式碼其實就是給e參數賦值了,是用callback回呼實現的。

回呼函數被呼叫的時候確定的是匿名函數

複製程式碼程式碼如下:
         函數(e){
        }


而callback.call(this,that.standadize(e))其實是執行了這麼一段程式碼

複製程式碼程式碼如下:

(関数(e){
})(standadize(e))

これは、Jquery がコールバック関数を使用する典型的な場所でもあります。これで e パラメーターが割り当てられる方法とその使用方法は理解できたでしょう。

コールバックはさまざまなフレームワークで広く使用されており、自分で何かを作成する場合、実際の状況に応じて使用することもできます。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板