共计 3480 个字符,预计需要花费 9 分钟才能阅读完成。
基于前后端分离的开发方式,后端只需提供 api 接口,前端负责数据展示和交互实现。
对于前端开发来说,一个比较大的问题是,api 接口数据不能较早的获得,那么只能使用模拟数据。前端模拟数据可有如下思路:
1. 使用临时的数据获取方法替代 ajax 接口请求,联调时修改数据获取方式;
2. 使用代理方式,代理转发到本地模拟文件或模拟接口;
3. 在前端截获接口请求,针对性处理后返回数据。
方法一在简单的开发调试中比较方便快捷,但涉及接口和数据较多时,管理起来比较麻烦。
方法二是一种不错的方式,模拟和联调时前端代码均保持一致,但需要对后端接口请求进行代理配置,操作上相对复杂。
你可以将接口请求代理转发到本地服务,本地服务针对不同的接口返回不同的数据。这里推荐一个不错的前端开发代理调试工具: fidder(http://www.telerik.com/fiddler)
方法三即是这里要介绍的 jquery-mockjax 所实现的方式。
使用 jquery-mockjax
jquery-mockjax 是一个 jquery 插件,它可以截获 ajax 请求,匹配后模拟返回 ajax 响应。
使用 jquery-mockjax 可简单概括为三个步骤。
1. 在协调好数据接口后,准备好需模拟的接口和模拟数据配置。
2. 在应用请求发生前执行模拟。
3. 在后端正式接口上线/联调时,去掉模拟。
举个例子。如一个页面有一个列表请求如下:
/get/article/list
那么,我们可以新建一个文件 lzw-mockajx.js,内容写为:
var config = [{ | |
url: '/get/article/list', | |
responseText: { | |
code: 200, | |
value: [] | |
}, | |
response: function (rq) { | |
console.log(rq.data); | |
for (var i = 0; i < 25; i++) { | |
this.responseText.value.push({ | |
id: i + 1, | |
title: 'test jquery mockajx_' + i, | |
author: 'lzw.me', | |
link: 'http://lzw.me', | |
dateTime: new Date().getTime() | |
}); | |
} | |
} | |
}]; | |
for (var i = 0, len = config.length; i < len; i++) { | |
$.mockajx(config[i]); | |
} |
示例页面:
<!doctype html> | |
<html lang="zh-cn"> | |
<head> | |
<meta charset="utf-8"> | |
<title>jquery-mockajx 示例</title> | |
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> | |
<script src="http://cdn.bootcss.com/jquery-mockjax/1.6.2/jquery.mockjax.min.js"></script> | |
<script src="lzw-mockajx.js"></script> | |
<script type="text/javascript"> | |
$.post('/get/article/list', {pageSize: 10, page:2}, function (result) { | |
console.log('result: ', result); | |
} | |
</script> | |
</head> | |
<body> | |
</html> |
从 console 控制台中,浏览该页面,即可看到打印出来的 result 模拟数据。在与后端联调时,只需去掉 lzw-mockajx.js 的引用即可。
一个简单实用的使用方式介绍到这里就结束了,是否已经帮助到了你?jquery-mockjax 还提供了丰富的配置参数,请到如下地址详细了解:
https://github.com/jakerella/jquery-mockjax
最佳实践示例
丰富多样未必意味着最佳。如下示例代码展示了在过去的一段时间中,我使用 jquery-mockajx 的方式。它可以满足只详细定义关键接口、部分模拟、简单正则匹配等需求。
模型定义 mzMockjax.js:
require('./jquery.mockjax'); | |
var responseConfig = {}; | |
var mzMockjax = { | |
mockjaxList: {}, //存储当前缓存的对象 | |
render: function (restapiList, responseConfig) { | |
this.getConfig(restapiList, responseConfig); | |
return this; | |
}, | |
/** | |
* 主要配置项 | |
* @param {Object} restapiList api 列表,用于通用定义 | |
* @param {Object} detailConfig 详细的定义 | |
*/ | |
getConfig: function (restapiList, detailConfig) { | |
var item, len, options = {}; | |
len = restapiList.length; | |
//通用返回定义 | |
for (item in restapiList) { | |
if (! restapiList.hasOwnProperty(item)) { | |
continue; | |
} | |
options[item] = { | |
url: restapiList[item], | |
responseText: { | |
"message": "", | |
"value": true, | |
code: 200 | |
} | |
}; | |
} | |
//特殊接口定义义扩展 | |
responseConfig = $.extend(true, options, detailConfig); | |
return responseConfig; | |
}, | |
/** | |
* 执行模拟 | |
* @param {Object|String} list 允许模拟的url列表,包含 responseConfig 的键名的数组。当为字符串时,尝试作为正则匹配。当部分接口已开发完毕,则可从中移除。可选,无参时模拟所有接口 | |
*/ | |
run: function (list) { | |
var item, regex; | |
$.extend(true, $.mockjaxSettings, { | |
contentType: "application/json" | |
}); | |
if (typeof list === 'string') { | |
try{ | |
regex = new RegExp(list); | |
}catch(e){ | |
list = null; | |
} | |
} | |
for (item in responseConfig) { | |
if (! responseConfig.hasOwnProperty(item)) { | |
continue; | |
} | |
if (!list || | |
$.isArray(list) && $.inArray(item, list) !== -1 || | |
regex && regex.test(item) | |
) { | |
this.mockjaxList[item] = $.mockjax(responseConfig[item]); | |
} | |
} | |
} | |
}; | |
//mzMockjax.run(['get_article_list', 'get_article_content']); | |
module.exports = mzMockjax; |
使用接口模拟:
rest-list.js
var restList = { | |
get_article_list: '/rest/get/artice/list', | |
save_article_list: '/rest/save/artice', | |
get_article_content: '/rest/get/artice/content' | |
}; | |
module.exports = restList; |
config.js
var config = { | |
get_article_list: { | |
responseText: { | |
value: [] | |
}, | |
response: function (rq) { | |
var i = 0, list = []; | |
while(i++ < 10) { | |
this.responseText.value.push({ | |
id: i + 1, | |
title: 'test jquery mockajx_' + i, | |
author: 'lzw.me', | |
link: 'http://lzw.me', | |
dateTime: new Date().getTime() | |
}); | |
} | |
} | |
} | |
}; | |
var mzMockjax = require('./mzMockjax'); | |
var restList = require('./rest-list'); | |
mzMockjax.render(restList, config) | |
.run('_article_'); |