关于js 回调函数的札记

关于js 回调函数的笔记。

用过ajax的人都知道，在ajax的options中有个回调函数，通过这个回调函数我们可以得到并操作请求返回的数据。

最近一直在做js方面的事情，在工作过程中我也需要回调函数，不过是自己写的：

define(['zepto'],function($){


    function uploadPicFmSubmit(formId,requestURL,fn){
        var formdata = false;

        if (window.FormData) {
            formdata = new FormData();
        }
        var subFm = $('#'+formId)[0];
        var len = subFm.length;
        var reader;
        for ( var i=0; i < len; i++ ) {
            var ele = subFm[i];
            var ele_name = ele.name;
            if (ele.type=='file') {
                var files = ele.files;
                for(var j=0;j<files.length;j++) {
                    var file = files[j];
                    //if (!!file.type.match(/image.*/)){
                        if (window.FileReader) {
                            reader = new FileReader();
                            reader.readAsDataURL(file);
                        }
                        if (formdata) {
                            formdata.append(ele_name, file);
                        }
                    //}
                }
            }else{
                if (formdata) {
                    formdata.append(ele_name, ele.value);
                }
            }
        }

        if (formdata) {
            $.ajax({
                url: requestURL,
                type: "POST",
                data: formdata,
                processData: false,
                contentType: false,
                success: function (res) {
                    var msg = eval(res);
                    fn(msg);
                },
                error:function(e){
                    fn(e);
                }
            });
        }
    }

    return{
        uploadPicFmSubmit:uploadPicFmSubmit
    }
});

以上代码是针对zeptojs未提供类似ajax form提交而编写的，遇到同样问题的同学可以拿去用。

uploadPicFmSubmit方法中的最后一个参数fn即就是我们自定义的回调函数，我们看到回调函数最后是被用在接收ajax请求结果的地方。

下来是外部调用的代码：

 bindForBtn=function(){
        $('#addBtn').bind('click',function(){
            var requestURL = requestBaseUrl+'/taskhelper/workreport/save?webapp=1&token='+token;
            var formId = 'workreprot_fm';
                _fh.uploadPicFmSubmit(formId,requestURL,function(data){
                    if(data.msg=='success'){
                        alert('保存成功！');
                    }
                });
            });
    };

我们看到传递进去的带参数的function对象被调用后就会到外部调用的地方。

其实就是带有function对象参数的方法的使用。

--------------------------------------------------------------------------------------------------------------

为了写组件，有时候需要避免一些对其他第三方类库的依赖。所以我在写某个组件的时候不得不以最原始的方法去异步请求数据。这个时候又遇到了回调函数。

var xmlhttp;
    function VcallBack(){
        if(Vtree_validateState(xmlhttp)){
            var res = xmlhttp.responseText;
            func(res);
        }
    }
    //js异步请求
    var func;
    function Vtree_Quest(url,fn){
        func = fn;
        if (window.XMLHttpRequest) {
            //针对FireFox，Mozillar，Opera，Safari，IE7，IE8
            xmlhttp = new XMLHttpRequest();
            //针对某些特定版本的mozillar浏览器的BUG进行修正
            if (xmlhttp.overrideMimeType) {
                xmlhttp.overrideMimeType("text/xml");
            }
        } else if (window.ActiveXObject) {
            //针对IE6，IE5.5，IE5
            //两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js的数组中
            //排在前面的版本较新
            var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
            for (var i = 0; i < activexName.length; i++) {
                try{
                    //取出一个控件名进行创建，如果创建成功就终止循环
                    //如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建
                    xmlhttp = new ActiveXObject(activexName[i]);
                    break;
                } catch(e){
                }
            }
        }
        //确认XMLHTtpRequest对象创建成功
        if (!xmlhttp) {
            alert("fail to create XMLHttpRequest!!");
            return;
        }
        xmlhttp.onreadystatechange = VcallBack;
        xmlhttp.open("POST",url,true);
        xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xmlhttp.send(null);
    }

    function Vtree_validateState(xmlhttp){
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
            return true;
        }else{
            return false;
        }
    }

其实上面代码就是原始的异步请求代码，需要的同学也可以拿去用。这里外部调用入口方法是

Vtree_Quest(url,fn)

fn即就是回调函数，其实 xmlhttp.onreadystatechange = VcallBack这句绑定回调函数的代码完全可以把function对象VcallBack换成传入的fn，但是由于VcallBack这个函数中含有本地变量xmlhttp的一些判断，我们就需要再向外部与VcallBack中间夹上一层。

在本地初始一个对象 func

在外部调用Vtree_Quest传入fn时将func赋值为fn

在VcallBack方法的xmlhttp.responseText处直接调用func对象并将结果值传入，这样我们就能在外部接收到最终的结果值。

关于js 回调函数的札记

相关推荐