上次重构 vue 目录时，有提到一个 mock 目录，是用来模拟生成 ajax 数据的。今天把这个遗留内容看下，看如何能应用到团队前端开发中：
官网地址：
http://mockjs.com/
github 地址：
https://github.com/nuysoft/Mock
文档在 github 上，我们简单过一遍，安装以及使用：
1.安装：
npm install mockjs
2.简单使用：
var Mock = require('mockjs');
var data = Mock.mock({
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
'list|1-10': [{
// 属性 id 是一个自增数，起始值为 1，每次增 1
'id|+1': 1
}]
});
// 生成数据的方法很简单，但是得熟悉模拟数据的各种规则
3.语法规范
mock.js 的语法规范包含 2 部分：
1.数据模板定义规则(Data Template Definition, DTD)
2.数据占位符定义规则(Data Placeholder Definition, DPD)
DTD 规范：
每个属性由 3 部分组成：属性名、生成规则、属性值。
'name|rule': value
name - 属性名
rule - 生成规则
value - 属性值
注意点：
1.属性名和生成规则，之间有一个 '|'
2.生成规则是 '可选的'
3.生成规则有 '7' 种格式：
1>min-max
2>count
3>min-max.dmin-dmax
4>min-max.dcount
5>count.dmin-dmax
6>count.dcount
7>+step
4.生成规则的含义，依赖 '属性值类型' 来确定(意思是：生成规则，根据属性值 '类型' 的不同，会生成不同的模拟数据)
5.属性值中可以含有 '@占位符'
6.属性值，指定了最终值的 '初始值' 和 '类型'
生成规则：
1.属性值是 String
1>'name|min-max': string
通过重复 string 生成一个字符串，重复次数 >= min、<= max
2>'name|count': string
通过重复 string 生成一个字符串，重复次数 = count
2.属性值是 Number
1>'name|+1': number
属性值自动 +1，初始值是 number
2>'name|min-max': number
生成一个 >= min、<= max 的整数，属性值 number 只是用来确定类型
3>'name|min-max.dmin-dmax': number
生成一个浮点数，整数部分 >= min、<= max，小数部分保留 dmin - dmax 位数
3.属性值是 Boolean
1>'name|1': boolean
实际生成一个 boolean，值为 true 的概率是 1/2，值为 false 的概率也是 1/2
2>'name|min-max': value
随机生成一个 boolean，值为 value 的概率是 min/(min + max)，值为 !value 的概率是 max
4.属性值是 Object
1>'name|count': object
从属性值 object 中随机选取 count 个属性
2>'name|min-max': object
从属性值 object 中随机选取 min - max 个属性
5.属性值是 Array
1>'name|1': array
从属性值 array 中随机选取一个元素，作为最终值
2>'name|+1': array
从属性值 array 中顺序选取一个元素，作为最终值
3>'name|min-max': array
通过重复属性值 array 生成一个新数组，重复次数 >= min、<= max
4>'name|count': array
通过重复属性值 array 生成一个新数组，重复次数 = count
6.属性值是 Function
1>'name': function
执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 'name' 所在的对象
7.属性值是 RegExp
1>'name': regexp
根据正则表达式 regexp，反向生成可以匹配它的字符串。用于生成自定义格式的字符串。
Mock.mock({
'regexp1': /[a-z][A-Z][0-9]/,
'regexp2': /\w\W\s\S\d\D/,
'regexp3': /\d{5-10}/,
});
// 输出
{
'regexp1': 'pJ7',
'regexp2': 'f)\fp1G',
'regexp3': '123456',
}
DPD 规范：
占位符，只是在 '属性值' 中占个位置，并不会出现在生成的属性值中。
@占位符
@占位符(参数[, 参数])
注意点：
1.用 '@' 来标识其后的字符串为 '占位符'
2.占位符引用的是 'Mock.Random' 中的方法
3.通过 Mock.Random.extend() 来 '自定义' 占位符
4.'占位符' 也 '可以引用' '数据模板' 的属性
5.'占位符' 会 '优先' 引用 '数据模板' 的属性
6.'占位符' 支持 '相对路径' 和 '绝对路径'
示例：
Mock.mock({
name: {
first: '@FIRST',
middle: '@MIDDLE',
last: '@LAST',
full: '@first @middle @last',
}
})
// 输出
{
name: {
first: 'dong',
middle: 'xue',
last: 'min',
full: 'dong xue min',
}
}
/*
生成数据的方式，非常多，我们需要根据自己需求，来使用合适的规则！得经常使用！不用一次全部记住！
官方提供了各个规则的示例，我们可以好好参照下：
http://mockjs.com/examples.html#String
*/
4.Mock.mock() 函数解析：
Mock.mock(rurl? rtype? template|function(options))
生成模拟数据
rurl - 可选
表示需要拦截的 URL，可以是 '字符串' 或 '正则'。例如：
'www.xxx.com/list.json'
/\/www\.xxx\.com\/list\.json/
rtype - 可选
表示需要拦截的 Ajax 请求方法。例如：
GET、POST、PUT、DELETE 等
template - 可选
表示数据模板，可以是 '对象' 或 '字符串'。例如：
{
'data|1-10': [{}]
}
或
'@EMAIL'
function(options) - 可选
表示用于生成响应数据的函数。
options
指向本次请求的 Ajax 选项集，包含：
url
type
body
3 个属性
几个可选参数，有以下几种组合形式：
1.Mock.mock(template)
根据数据模板生成模拟数据
2.Mock.mock(rurl, template)
记录用于生成响应数据的 '数据模板'。当拦截到匹配 rurl 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回
3.Mock.mock(rurl, function(options))
记录用于生成响应数据的 '函数'。当拦截到匹配 rurl 的 Ajax 请求时，将根据函数 function(options) 生成模拟数据，并作为响应数据返回
4.Mock.mock(rurl, rtype, template)
比 2 多了一个 rtype，匹配对应的请求方法
5.Mock.mock(rurl, rtype, function(options))
比 3 多了一个 rtype，匹配对应的请求方法
5.Mock.setup() 函数解析：
Mock.setup(settings)
配置拦截 Ajax 请求的行为。支持的配置项只有：'timeout'
timeout - 必选
指定被拦截的 Ajax 请求的响应时间，单位是 'ms'。
值有 2 种格式：
正整数：
400 - 表示 400ms 后才会返回响应数据
'-' 风格字符串：
'200-600' - 表示响应时间介于 200ms 和 600ms 之间。(默认值是：'10-100')
Mock.setup({
timeout: 400
});
6.Mock.Random - 注意这是一个 '类'，用于生成各种随机数据
Mock.Random 的方法，在数据模板中称为 '占位符'，格式为：
@占位符(参数[, 参数])
用法：
var Random = Mock.Random;
Random.email(); // [email protected]
Mock.mock('@email'); // [email protected]
Mock.mock({email: '@email'}); // {email: '[email protected]'}
Mock.Random 的完整方法列表，按类别展示：
Basic:
boolean, natural, integer, float, character, string, range, date, time, datetime, now
Image:
image, dataImage
Color:
color
Text:
paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle
Name:
first, last, name, cfirst, clast, cname
Web:
url, domain, email, ip, tld
Address:
area, region
Helper:
capitalize, upper, lower, pick, shuffle
Miscellaneous:
guid, id
扩展 Random 方法：
Random.extend({
constellation: function(date) {
var constellations = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座'];
return this.pick(constellations);
}
})
之后就可以像上面 'email' 那样来使用了
7.Mock.valid() 函数解析：
Mock.valid(template, data)
校验真实数据 'data' 是否与数据模板 template 匹配
template - 必选
表示数据模板，可以是对象或字符串。例如：
{
'list|1-10': [{}]
}
或
'@EMAIL'
data - 必选
表示真实数据
var template = {
name: 'value1'
};
var data = {
name: 'value2'
}
Mock.valid(template, data);
// 输出
[
{
"path": [
"data",
"name"
],
"type": "value",
"actual": "value2",
"expected": "value1",
"action": "equal to",
"message": "[VALUE] Expect ROOT.name'value is equal to value1, but is value2"
}
]
8.Mock.toJSONSchema()
Mock.toJSONSchema(template)
把 Mock.js 风格的数据模板 template 转换成 JSON Schema
template - 必选
表示数据模板，可以是 '对象' 或 '字符串'。例如：
{
'data|1-10': [{}]
}
或
'@EMAIL'
JSON Schema：
http://json-schema.org/
JSON Schema 定义了如何基于 JSON 格式描述 JSON 数据结构的规范，进而提供数据校验、文档生成和接口数据交互控制等一系列能力。
貌似是一个规定 JSON 数据的规范！不太清楚，自行搜索！
我们希望，在项目中 Ajax 请求数据时，使用 mock.js 来模拟请求数据，前端就无语等待后端、或者自己查询数据库来获取数据了。以后自己就可以模拟数据了，不用依赖后端！
打算是在项目中创建 mock/ 目录，同 API 接口目录、方法对应，以后用起来再补充实例
