web前端与后台数据访问的对象封装

前言：通常情况下，在不使用angularJS/nodeJS/react等这类完整性的解决方案的js时，前端与后台的异步交互都是使用Ajax技术进行解决

一：作为java web开发工程师可能以下代码是刚开始的阶段最普遍的写法

 $.ajax({

             cache: false,

             type: 'GET',

             url: this.rootUrl + '?' + $.param(param),

             dataType: "json",

             success: function(data){

             },

             error: function(){

             }

 });

如果业务系统稍微复杂，CRUD比较多的看情况下，项目中会出现过多的类似代码，维护起来相当麻烦，样板式的代码过多，不利于代码的可读性。

二:对于这种后台异步交互的访问代码，我们可以通过对业务数据访问的代码封装来进行。

function Service(url) {

    this.rootUrl = url;

    this.errorHandler = function (jqXHR) {

        var response = jqXHR.responseJSON;

        if (response != null) {

            if (!response.success && response.errCode === MSG_SERVER_RESPONSE_NO_USER) {

                $(".close").click();

                window.location.href = "index.html";

            } else {

                if (response.msg != null) {

                    Dialog.showMsg("错误代码：" + response.errCode + ",信息：" + response.msg);

                } else {

                    Dialog.showAlert("错误代码：" + response.errCode + ",信息：服务器异常");

                }

            }

        } else {

            Dialog.showAlert("服务器异常");

        }

    };

}

Service.prototype = {

    constructor: Service,

    //find

    getAll: function (param, callback) {

        $.ajax({

            cache: false,

            type: 'GET',

            url: this.rootUrl + '?' + $.param(param),

            dataType: "json",

            success: callback,

            error: this.errorHandler

        });

    },

    //find

    getAllAsync: function (param, callback) {

        $.ajax({

            cache: false,

            type: 'GET',

            url: this.rootUrl + '?' + $.param(param),

            dataType: "json",

            success: callback,

            async: false,

            error: this.errorHandler

        });

    },

    //find data by id

    getById: function (id, data, callback) {

        if (typeof data === "function") {

            callback = data;

            data = null;

        }

        $.ajax({

            cache: false,

            type: 'GET',

            url: this.rootUrl + '/' + id,

            data: data,

            dataType: "json",

            success: callback,

            error: this.errorHandler

        });

    }

};

　　这样封装以后，我们就可以通过对象的方式来获取后端业务数据。这也是前端面向对象的处理方式。例如：

    var entService = new Service("../service/ba/enterprise");

    var userData = {

        "id": currentEnt.id

    };

    var successCallback = function (data) {

        resoleEntViewAll(data.data);

    };

    var errorCallBack = function () {

        return null;

    };

    entService.getById(userData.id, userData, successCallback);

　　首先，通过new 一个自定义的Service，请求参数与正确返回的函数、错误返回的函数通过参数传递，在此处，我的所有错误处理方法都是调用同一个通用的错误处理函数。正确返回的回调函数，由于业务不同，在调用时分别指定，此处我的错误处理回调函数中使用了BootstrapDialog插件封装的自定义的错误弹框Dialog对象来进行前段错误提示。

巴特西

web前端与后台数据访问的对象封装

最新文章

热门文章