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對象來進行前段錯誤提示。