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

上一篇:ctags 的最简单使用


下一篇:C# url 路径转换 相对路径 转换为 绝对路径