Mock, 让你的开发脱离接口

在前后台共同进行一个项目的时候常会遇到一种情景, 后台定义好接口,前端按照接口进行开发, 当前端开发完成后台接口却还没有开发完成, 这个时候要进行接口测试, 只能等后台开发完成才能测试, 在这中间浪费了很多时间,  现在有个利器可以解决这个问题, 即使不用后台,只要提前制定好接口的报文,那么前端就可以自己模拟接口来进行接口测试了, 今天要讲的东西就是mockjax和mockJSON

mockjax和mockJSON是两套不同的Javascript Library, 它们都是基于JQuery来开发的,
mockjax主要是可以针对指定的网址进行mock, 当Ajax呼叫网址时拦截并回传假的数据,
mockJSON则有点像是Json资料的Data Generater, 根据我们指定的格式随机数生成回传的Json资料.

首先我们来看个范例,
假设我们目前需要开发一个网站, 它会使用Ajax呼叫/WebApi/GetUserData.svc, 取得User资料,
并将所取得的数据显示在画面上, 我们可以很快速地完成这部分的程序代码.

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>Mocking JQuery Ajax</title>
 5     <script src="Scripts/jquery.1.7.2.js" type="text/javascript"></script>
 6     <script src="Scripts/jquery.mockjax.js" type="text/javascript"></script>
 7     <script src="Scripts/jquery.mockjson.js" type="text/javascript"></script>
 8     <script type="text/javascript">
 9         $(function () {
10             $.ajax({
11                     url: '/WebApi/GetUserData.svc',
12             type: 'GET',
13             error: function (xhr) {
14                 alert('無法取得資料!');
15             },
16             success: function (response) {
17                 $("div#result").append(response);
18             }
19         });
20         });
21     </script>
22 </head>
23 
24 <body>
25     <h1>User Data</h1>
26     <div id="result">
27 
28     </div>
29 </body>
30 </html>

执行网页, 我们可以发现这段程序是无法成功执行的,

因为/WebApi/GetUserData.svc并不存在, 所以会跳出错误讯息.

 

这时候mockjax就派上用场了, 我们在呼叫ajax之前加上这段程序代码

1 var isAjaxMocked = true;
2 if (isAjaxMocked) {
3     $.mockjax({
4             url: '/WebApi/GetUserData.svc',
5     status: 200,
6     responseTime: 750,        
7     responseText: 'User Information'
8     });
9 }

这代表我们mock了JQuery的Ajax,
当使用Ajax呼叫/WebApi/GetUserData.svc这个网址时,
将会花费750ms的时间, 回传status code 200, 以及'User Information'这个字符串
重新执行一次网页, 可以看到执行成功了

当然, 实际上在呼叫WebService时并不会只回传一个字符串,
那能不能支持Json格式的数据呢? 答案是可以的, 我们可以改写我们的程序代码

 

 1 $(function () {
 2     var isAjaxMocked = true;
 3     if (isAjaxMocked) {
 4         $.mockjax({
 5             url: '/WebApi/GetUserData.svc',
 6             status: 200,
 7             responseTime: 750,
 8             responseText: { "user": [{ "id": "1", "name": "david", "birthday": "2001/01/26" }] }
 9         });
10     }
11     $.ajax({
12         url: '/WebApi/GetUserData.svc',
13         type: 'GET',
14         error: function (xhr) {
15             alert('無法取得資料!');
16         },
17         success: function (response) {
18             var data = response.user;
19             for (var i = 0; i < data.length; i++) {
20                 $("div#result").append(
21                     "<ul>" +
22                 "<li>ID: " + data[i].id + "</li>" +
23                 "<li>Name: " + data[i].name + "</li>" +
24                 "<li>Birthday: " + data[i].birthday + "</li>" +
25                 "</ul>" +
26                 "<hr />"
27                 );
28             }
29         }
30     });
31 });

执行之后, 可以看到成功接收Json数据, 并且显示在画面上

一切看起来很完美, 但现在问题来了, 如果我们需要的是大量的数据,
我们光是拚好Json数据就会花费掉许多的时间, 该怎么办呢?
这时候我们就需要mockJSON, 它可以根据我们所制定的规则, 来产生JSON数据,
我们修改mockjax的responseText部分使用mockJSON来产生数据 

var isAjaxMocked = true;
if (isAjaxMocked) {
    $.mockjax({
        url: '/WebApi/GetUserData.svc',
        status: 200,
        responseTime: 750,
        responseText: $.mockJSON.generateFromTemplate({
            "user|3-6": [{
                "id|+1": 1,
                "name": "@MALE_FIRST_NAME",
                "birthday": "@DATE_YYYY/@DATE_MM/@DATE_DD"
            }]
        })
    });
}

在这边我使用了$.mockJSON.generateFromTemplate方法, 并设定了user数据产生的规则如下,
产生 3-6个user, 每个user之中有以下字段,
id从1开始依序增加, 每次+1,
name产生男生的名字,
birthday产生随机的日期.
重新执行网页, 我们可以发现每次重整网页结果都不同, 这可以用来模拟查询出不同的数据

 

是不是很轻松就可以产生大量的Json数据呢?
而一旦WebService开发完成, 我们只要将isAjaxMocked改成false, 就可以马上实际呼叫WebService啰!

在这两套Library帮忙之下, 就算Web Service完全还没开发好, 也并不会影响到我们前端页面的开发,
而这两套Library在使用上也十分的简单, 更进阶的使用可以参考我所做的心智图或是官方网站.
mockjax 设定:

 

mockJSON设定:

 

结语
透过这两套Library, 不仅仅是可以方便进行Ajax的本机端模拟测试,
还可以用在Javascript部分的单元测试, 让单元测试不会因为Ajax而难以进行,
这让我们在前端开发的进行上更加的方便!

posted @ 2014-06-18 17:21  火柴人  Views(5670)  Comments(0Edit  收藏  举报