一个关于回调的故事

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最重要的一个特性，那么他的意义何在呢？当咱们想封装类库而且提供接口时，咱们发现这个接口每一个人都有可能有本身的业务逻辑，咱们不能把这个接口给写死，这是提供一个回调函数不得不说是一个更棒的办法，咱们把回调函数的参数定义好，告诉用户有可能会有哪几个参数，而后用户拿这个参数去定义本身的业务员逻辑，这样就能够构成一个完成的函数体了。

这样写接口就能够专一于写接口而不会去考虑会发生的业务员逻辑状况，而用户拿到接口就能够根据接口提供的数据来自定义业务逻辑了。