最近重构公司项目，为了让前端独立于后端进行开发，王二尝试使用了 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'的博客

八、原文地址

王玉略的个人网站