最近重构公司项目，为了让前端独立于后端进行开发，王二尝试使用了 Mock.js
一、有什么用？
Mock.js 可以生成随机数据，拦截 Ajax 请求
二、如何安装？
1、在前端工程中，我们可以通过如下命令安装
npm install mockjs
2、如果想在浏览器中测试，可以在自己的html中引用如下代码：
<script src="http://mockjs.com/dist/mock.js"></script>
三、为什么能拦截 Ajax 请求
对这个问题感兴趣的同学可以参考这个链接
四、生成随机数据
Mock.js 的语法规范包括两部分：
- 数据模板定义（Data Temaplte Definition，DTD）
- 数据占位符定义（Data Placeholder Definition，DPD）
咱们不玩这些虚的，先看一些简单的例子：
说明：如果在自己的html中引用如下代码：<script src="http://mockjs.com/dist/mock.js"></script>，以下测试代码可以直接运行
1、将一个字符串随机重复1到10遍
Mock.mock({
"string|1-10": "★"
})
// {
// "string": "★★★"
// }
2、将一个字符串随机重复5遍
Mock.mock({
"string|5": "★"
})
// {
// "string": "★★★★★"
// }
3、 随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率是 1/2
Mock.mock({
"boolean|1": true
})
// {
// "boolean": true
// }
4、从属性值 {} 中随机选取 2 个属性
Mock.mock({
"object|2": {
"310000": "上海市",
"320000": "江苏省",
"330000": "浙江省",
"340000": "安徽省"
}
})
// {
// "object": {
// "310000": "上海市",
// "330000": "浙江省"
// }
// }
5、从属性值 {} 中随机选取 2 到 4 个属性
Mock.mock({
"object|2-4": {
"110000": "北京市",
"120000": "天津市",
"130000": "河北省",
"140000": "山西省"
}
})
// {
// "object": {
// "110000": "北京市",
// "120000": "天津市",
// "130000": "河北省",
// "140000": "山西省"
// }
// }
6、从属性值 [{}, {} ...] 中随机选取 1 个元素，作为最终值
Mock.mock({
"array|1": [
{title:"AMD"},
{title:"CMD"},
{title:"UMD"},
]
})
// {
// "array": {
// title:"CMD"
// }
// }
7、通过重复属性值 [{}, {} ...] 生成一个新数组，重复次数大于等于 2，小于等于 3
Mock.mock({
"array|2-3": [
{title:"AMD"},
{title:"CMD"},
{title:"UMD"},
]
})
// {
// "array": [
// {
// "title": "AMD"
// },
// {
// "title": "CMD"
// },
// {
// "title": "UMD"
// },
// {
// "title": "AMD"
// },
// {
// "title": "CMD"
// },
// {
// "title": "UMD"
// }
// ]
// }
8、传入一个正则，返回符合正则的字符串
Mock.mock({
'regexp': /[a-z][A-Z][0-9]/
})
// {
// "regexp": "uD2"
// }
9、Mock对象中有一个 Random 方法，利用 Random 方法我们可以做很多事情：
var Random = Mock.Random
Random.integer(20,100) //随机返回20到100的数字
Random.float(60, 100, 3, 5) //随机返回60到100的带有3到5位小数的数字
Random.string() //随机返回一个字符串
Random.string(5) //随机返回一个长度为5的字符串
Random.string(7, 10)//随机返回一个长度为5到7位的字符串
Random.date()//随机返回一个日期
Random.date('yyyy-MM-dd')//随机返回一个格式化日期
Random.image()//随机返回一张图片
Random.image('200x100')//随机返回一张带尺寸的图片
Random.image('200x100', '#FF6600')//随机返回一张带尺寸和颜色的图片
Random.paragraph()//随机返回一段文字
Random.cparagraph()//随机返回一段中文文字
Random.cparagraph(1, 3)//随机返回1到3段中文文字
Random.csentence()//随机返回一句中文
Random.ctitle()//随机返回一个中文标题
关于其更多的用法，感兴趣的同学可以参考官方示例代码；
五、拦截 ajax 请求的代码细节
以jQuery为例：
Mock.mock('http://test/api', {
'name' : '[@name](/user/name)()',
'age|1-100': 100,
'color' : '[@color](/user/color)'
});
$.ajax({
url: 'http://test/api',
success: function(data){
console.log(JSON.stringify(data, null, 4)
)}
})
// {
// "name": "Elizabeth Hall",
// "age": 91,
// "color": "#0e64ea"
// }
语法如下：Mock.mock( rurl, template ),其中的参数 rurl 还可以传入正则表达式。
关于其更多的用法，感兴趣的同学可以参考官方文档；
六、王二遇到的问题
有了以上的各种方法，再加上嵌套，可以满足绝大多数我们想要的数据格式。但是因为使用姿势不正确，王二也遇到了一点小小的的问题，
例如如下代码：
Mock.mock({
'list|2-10': [{
'id': Random.integer(20,100),
'name':Random.ctitle(),
'date':Random.date("yyyy-MM-dd")
}]
});
// {
// "list": [
// {
// "id": 57,
// "name": "边且反认",
// "date": "1989-08-12"
// },
// {
// "id": 57,
// "name": "边且反认",
// "date": "1989-08-12"
// },
// {
// "id": 57,
// "name": "边且反认",
// "date": "1989-08-12"
// }
// ]
// }
王二原本的目的是想在 list 里返回数据不同的数组,但是用以上的写法数组里每个对象的数据都一样。
经过查阅文档，发现在 Mock 模板里属性的值可以是 Function,于是修改如下：
Mock.mock({
'list|2-10': [{
'id': ()=>Random.integer(20,100),
'name': ()=>Random.ctitle(),
'date':()=>Random.date("yyyy-MM-dd")
}]
});
// {
// "list": [
// {
// "id": 74,
// "name": "但称青气",
// "date": "2004-10-31"
// },
// {
// "id": 32,
// "name": "三六属集",
// "date": "2008-06-28"
// },
// {
// "id": 28,
// "name": "装造始",
// "date": "1975-04-29"
// }
// ]
// }
这样就符合王二的预期了。
七、参考文章
Mock官方网站 Mock官方示例代码 Mock官方文档 'think2011'的博客
