一個關於回調的故事

1.回調的故事

1.最近辭職換了新工做，新公司的工做模式是先後端分離的，可是目前前端框架還須要瞭解以及熟悉，以前的框架又想廢棄，因而不得不用原生來開發，可是原生得造輪子啊，因而只能用js的類庫jQuery框架來進行開發，而後jq中ajax方法是用的最多的方法。

以前寫ajax一直是這樣：

$.ajax({
        url : "/xxxx",//請求的連接
        type : "get",
        data : {},
        success : function(data){
            //執行業務邏輯
        },
    });

全部的業務邏輯代碼都放在success裏面，而後就發現常常得開幾個不一樣的$.ajax()方法實現幾乎類似的方法，致使sucess方法裏面業務邏輯很是混亂，而且整個代碼的複用率並不高。

2.因而就想着封裝ajax方法，ajax方法僅僅只是用來獲取數據而不作其餘層次的事情，這樣就能夠在拿到數據後對數據寫本身的業務邏輯代碼了，而不會致使業務邏輯代碼混亂。因而咱們就改裝成這樣的函數：

function getData(arg){
    var returnData,
        url = arg.url,
        type = arg.type,
        data = arg.sendData || {};
    var contentType = arg.contentType || "application/x-www-form-urlencoded";
    $.ajax({
        url : url,
        type : type,
        data : JSON.stringify(data),
        contentType : contentType,
        async: false,
        dataType : "json",
        success : function(data2){
            returnData = data2;
        },
    });
    return returnData;
}

定義一個局部變量returnData來接受success返回的數據，而且因爲ajax默認是異步的，須要給改爲同步的，這樣returnData才能獲取到數據，可是漸漸發現同步會阻塞接下來業務邏輯的執行，若是網速過慢的話會致使接下來代碼都沒法執行，這不是我所須要的獲取數據的方法。因而就又想着改進這個方法。

3.以前看過jQuery源碼，ajax方法裏傳入參數，其中參數包括一個函數叫success，可是success是把整個函數代碼傳入ajax方法裏的，而後在後臺返回數據到前端時進行調用：

var success = data.success;//data是ajax進行調用時傳入的參數
if(xhr.readyState==4 && xhr.status==200){
    success(data);//這兒進行調用
}

我就想着照葫蘆畫瓢來用回調來獲取獲得的數據，這樣就能夠又不會阻塞其餘業務邏輯的進行，又能夠在數據獲取到以後執行我想作的邏輯，因而就給改爲:

function getData(arg){
    var url = arg.url,
        type = arg.type,
        data = arg.sendData || {},
        returnData = arg.returnData || function(){};//若是returnData爲underfind時設置函數爲空
    var contentType = arg.contentType || "application/x-www-form-urlencoded";
    $.ajax({
        url : url,
        type : type,
        data : JSON.stringify(data),
        contentType : contentType,
        dataType : "json",
        success : function(data2){
            returnData(data2);//這兒運行函數
        },
    });
} 

//調用獲取數據的函數
getData({
    url : "/isleep/doctor",
    type : "post",
    sendData : {"doctor_id" : doctorId,"record_id" : recordId},
    contentType : "application/json",
    returnData : showData, //傳入的回調函數
});

//設置回調函數
var showData = function(data){
                   //業務邏輯代碼
               }

1.先設置一個獲取數據的函數，函數傳入一個參數，參數是一個對象，跟ajax差很少，其中包括url等參數。
2.調用getData函數，傳入url等參數，在returnData是直接把showData代碼做爲參數傳入到getData函數裏面去的，這樣在getData裏returnData就是一個函數了，指針指向showData,即把showData賦值給returnData。
3.這時當success執行後，就會執行success函數裏面定義的returnData函數，而returnData執行即至關於執行showData函數。

這樣咱們就能夠拿到後臺返回的數據，在showData裏面定義咱們本身想要的業務邏輯，而不去管怎麼獲取數據，以及ajax同步會阻塞進程的狀況了。

2.回調的解釋

百度百科是這樣解釋的：

回調函數就是一個經過函數指針調用的函數。若是你把函數的指針（地址）做爲參數傳遞給另外一個函數，當這個指針被用來調用其所指向的函數時，咱們就說這是回調函數。回調函數不是由該函數的實現方直接調用，而是在特定的事件或條件發生時由另外的一方調用的，用於對該事件或條件進行響應。

大致意思就是回調是經過函數定義的變量經過參數傳入另外一個函數，在另外一個函數進行調用，咱們就稱之爲回調函數。
而回調字面解釋意思就是回頭去調用，以上面爲例，當getData進行到success函數時，會調用returnData(data)函數，但ajax方法裏面爲定義，根據函數做用於鏈會向上找，即找到定義returnData的地方，而returnData是隻是經過參數賦值的，傳進來的只是一個指針（地址），再根據地址去找到最上層的showData函數，在success裏面傳入data參數，並調用。而js引擎在解釋js時，js引擎會首先初始化函數，即getData是早就定義好的，但一直沒有進行調用，直到進行到success時才進行調用，因此先定義好，再調用咱們稱之爲回調。

3.回調的意義

回調做爲javascript最重要的一個特性，那麼他的意義何在呢？當咱們想封裝類庫而且提供接口時，咱們發現這個接口每一個人都有可能有本身的業務邏輯，咱們不能把這個接口給寫死，這是提供一個回調函數不得不說是一個更棒的辦法，咱們把回調函數的參數定義好，告訴用戶有可能會有哪幾個參數，而後用戶拿這個參數去定義本身的業務員邏輯，這樣就能夠構成一個完成的函數體了。

這樣寫接口就能夠專一於寫接口而不會去考慮會發生的業務員邏輯狀況，而用戶拿到接口就能夠根據接口提供的數據來自定義業務邏輯了。