jQuery Mockjax插件使用心得

最近指导前端攻城狮在后台代码没有完成前测试自己写的后台代码，第一个版本是让他直接创建一个data.json静态数据，然后再ajax调用，缺点非常明显，首先需要localhost的支持，其次是能测的功能太单一，如果遥测是不同的url，或不同的参数是就力不从心了。

后来在网上找寻能够模拟客户端请求服务器的工具时意外发现了mockjax这个工具，瞬间被征服了，只要在引入一个预定好的要拦截的url和要返回的数据，就可以轻松实现不同url，同url不同数据的拦截、处理、返回。从此之后前端轻松的撇开后端的束缚快乐的修炼了。

赞一个

用它开发了一个获取考勤记录的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];

                }

            }

        }

    }); 

全部代码点击下载：calender.zip