jQuery Mockjax插件使用心得

時間 2019-11-29

原文原文鏈接

最近指導前端攻城獅在後臺代碼沒有完成前測試本身寫的後臺代碼，第一個版本是讓他直接建立一個data.json靜態數據，而後再ajax調用，缺點很是明顯，首先須要localhost的支持，其次是能測的功能太單一，若是遙測是不一樣的url，或不一樣的參數是就力不從心了。前端

後來在網上找尋可以模擬客戶端請求服務器的工具時意外發現了mockjax這個工具，瞬間被征服了，只要在引入一個預約好的要攔截的url和要返回的數據，就能夠輕鬆實現不一樣url，同url不一樣數據的攔截、處理、返回。今後以後前端輕鬆的撇開後端的束縛快樂的修煉了。ajax

贊一個json

用它開發了一個獲取考勤記錄的demo後端

$.mockjaxSettings.contentType = "application/json";
var datatable = [
        {id: 'eba055b9-7de3-499f-9a24-4c35152f350c', date:'2015-4-1',in:false, out:true, workTimeTotal:499, late:true,early:false},
        {id: 'bfec817c-9023-4052-b688-946d22b6f92a',date:'2015-4-2',in:true, out:false, workTimeTotal:415, late:true,early:false},
        {id: 'ce8c7e2d-0a0b-4cec-9ffc-c3cf826d87a5',date:'2015-4-5',in:true, out:true, workTimeTotal:520, late:false,early:false},
        {id: 'b8a0e687-f36c-45c6-a4a9-606d7c5d6ea5',date:'2015-4-6',in:true, out:true, workTimeTotal:468, late:false,early:false},
        {id: '7348968c-fcfc-412d-b007-86015cc4b4d5',date:'2015-4-7',in:true, out:true, workTimeTotal:327, late:false,early:false},
        {id: 'a24079a4-b4ed-4d99-8212-4aee07f226e3',date:'2015-4-8',in:true, out:true, workTimeTotal:370, late:false,early:true},
        {id: '63e24c2d-377c-4fa3-b9f3-ed11054d1f65',date:'2015-4-20',in:true, out:true, workTimeTotal:370, late:false,early:true},
        
        {id: '510b95be-77ff-4ee1-aa12-c5a602adb297',date:'2015-2-3',in:true, out:true, workTimeTotal:290, late:true,early:false},
        {id: '13befce3-981a-4698-be01-a7dc7ab03e9d',date:'2015-2-4',in:true, out:false, workTimeTotal:385, late:true,early:false},
        {id: '0cb6c020-f5d9-4900-be51-18430f171de8',date:'2015-2-5',in:true, out:true, workTimeTotal:299, late:false,early:false},
        {id: 'e158c2ec-4118-4131-b0cf-50271df20fc6',date:'2015-2-6',in:true, out:true, workTimeTotal:480, late:false,early:false},
        {id: 'b54e8a1e-d799-48e6-a55b-e4c50390e1ec',date:'2015-2-9',in:true, out:true, workTimeTotal:450, late:false,early:false},
        {id: '5a8a6db2-da61-4042-bedc-23c3a7e2e0ef',date:'2015-2-10',in:true, out:true, workTimeTotal:419, late:false,early:true}
    ];
var dateitem = [
    {id: 'eba055b9-7de3-499f-9a24-4c35152f350c', intime:'2015-4-1 7:20', inaddress:'廣州荔灣區昌崗中路238號達鏢國際廣場1918室', plan:'把全部匹配的元素追加到另外一個指定的元素元素集合中。實際上，使用這個方法是顛倒了常規的$(A).append(B)的操做，即不是把B追加到A中，而是把A追加到B中。在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll這個幾個方法成爲一個破壞性操做，返回值是全部被追加的內容，而不單單是先前所選中的元素。因此，要選擇先前選中的元素，須要使用end()方法，參見例二。' ,  outtime:'2015-4-1 18:20', outaddress:'廣州xxxxxxxxxxx', conclusion:'用迅速的動畫將隱藏的段落顯示出來，歷時200毫秒。並在以後執行反饋！'   },
    {id: 'bfec817c-9023-4052-b688-946d22b6f92a', intime:'2015-4-2 7:20', inaddress:'廣州荔灣區昌崗中路238號達鏢國際廣場4110室', plan:'用緩慢的動畫將隱藏的段落顯示出來，歷時600毫秒。' ,  outtime:'2015-4-2 19:00', outaddress:'廣州天河區體育西橫路育蕾小區3街6號601', conclusion:'用迅速的動畫將隱藏的段落顯示出來，歷時200毫秒。並在以後執行反饋！'   }
];
    
     $.mockjax({
        url: '/userlist',
        responseText: datatable
    });
    
    function getUrl (url, name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = url.substr(url.indexOf('?')).substr(1).match(reg);
            if (r != null) return unescape(r[2]); return null;
        }

    $.mockjax({
        url: '/getMonth?*',
        response: function(getmonth){
            var year = getUrl(getmonth.url, 'year');
            var month = getUrl(getmonth.url, 'month');
            var d = year+'-'+month;
            this.responseText= $.grep(datatable, function(n,i){
                if(n.date.indexOf(d)>=0)
                    return n;
            });
        }
    });
    
    $.mockjax({
        url: '/getInfor?*',
        response: function(getinfor){
            var id=getUrl(getinfor.url, 'id');
            for(var i=0; i<dateitem.length; i++){
                if(dateitem[i].id==id){
                    this.responseText= dateitem[i];
                }
            }
        }
    });