Mock.js
一、什么是Mock.js
Mock.js 是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试，模拟数据请求。
二、有什么用
- 根据数据模板生成模拟数据
- 模拟 Ajax 请求，生成并返回模拟数据
- 基于 HTML 模板生成模拟数据
三、核心点
Mock.js 的语法规范包括两部分：
- 数据模板定义（Data Temaplte Definition，DTD）
- 数据占位符定义（Data Placeholder Definition，DPD）
数据模板定义 DTD
数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：
// 属性名 name
// 生成规则 rule
// 属性值 value
'name|rule': value
注意：
- 属性名 和 生成规则 之间用
|分隔。 - 生成规则 是可选的。
- 生成规则 有 7 种格式：
'name|min-max': value'name|count': value'name|min-max.dmin-dmax': value'name|min-max.dcount': value'name|count.dmin-dmax': value'name|count.dcount': value'name|+step': value
- 生成规则 的 含义 需要依赖 属性值 才能确定。
- 属性值 中可以含有
@占位符。 - 属性值 还指定了最终值的初始值和类型。
生成规则和示例：
-
属性值是字符串String
'name|min-max': 'value'通过重复'value'生成一个字符串，重复次数大于等于min，小于等于max。
'name|count': 'value'通过重复'value'生成一个字符串，重复次数等于count。
-
属性值是数字 Number
-
'name|+1': 100属性值自动加 1，初始值为 100 -
'name|1-100': 100生成一个大于等于 1、小于等于 100 的整数，属性值 100 只用来确定类型。 -
'name|1-100.1-10': 100生成一个浮点数，整数部分大于等于 1、小于等于 100，小数部分保留 1 到 10 位。{ 'number1|1-100.1-10': 1, 'number2|123.1-10': 1, 'number3|123.3': 1, 'number4|123.10': 1.123 } // => { "number1": 12.92, "number2": 123.51, "number3": 123.777, "number4": 123.1231091814 }
-
-
属性值是布尔型Boolean
'name|1': value随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率是 1/2。
'name|min-max': value随机生成一个布尔值，值为value的概率是min / (min + max)，值为!value的概率是max / (min + max)。
-
属性值是对象Object
'name|min-max': {}从属性值{}中随机选取min到max个属性。
'name|count': {}从属性值{}中随机选取count个属性。
-
属性值是数组Array
'name|1': [{}, {} ...]从属性值[{}, {} ...]中随机选取 1 个元素，作为最终值。
'name|min-max': [{}, {} ...]通过重复属性值[{}, {} ...]生成一个新数组，重复次数大于等于min，小于等于max。'name|count': [{}, {} ...]通过重复属性值[{}, {} ...]生成一个新数组，重复次数为count。
-
属性值是数组 Function
'name': function(){}执行函数function(){}，取其返回值作为最终的属性值，上下文为'name'所在的对象。
四、Coding
1）基础模板的应用
随机生成字符串
Mock.mock({
"string1|1-10": "abc",
"string2|3": "abc"
})
//输出
{
string1: "abcabcabcabcabc",
string2: "abcabcabc"
}
随机生成数字
Mock.mock({
"number1|1-100":1, //1-100随机数
"number2|1-100.1-10": 1,//1-100随机数，1-10位随机小数位
"number3|123.3": 1//123.xxx 随机3为小数
})
//输出
{
number1:55,
number2:42.123152345,
number3:123.632
}
随机布尔值
Mock.mock({
"boolean1|1":true,//随机true/false
"boolean2|1-2": true// 1/3几率 true 2/3几率 false
})
//输出
{
boolean1: true,
boolean2: false
}
随机对象属性
Mock.mock({
"object1|2":{
"310000": "上海市",
"320000": "江苏省",
"330000": "浙江省",
"340000": "安徽省"
},
"object2|2-4": {
"110000": "北京市",
"120000": "天津市",
"130000": "河北省",
"140000": "山西省"
}
})
//输出
{
object1:{
"330000": "浙江省",
"340000": "安徽省"
},
object2:{
"110000": "北京市",
"140000": "山西省",
"130000": "河北省"
}
}
随机一个数组
Mock.mock({
"array1|1": [ //随机一个
"AMD",
"CMD",
"UMD"
],
"array2|1-5": [
{"name|1": [
"Hello",
"Mock.js",
]}
]
})
//输出
{
"array1": "AMD",
"array2": [
{
"name": "Hello"
},
{
"name": "Mock.js"
},
{
"name": "Hello"
}
]
}
函数应用
Mock.mock({
'name': 'AlengHan',
'sayName': function() {
return "我的名字是："+this.name
}
})
//输出
{
'name': 'AlengHan',
'sayName': "我的名字是：AlengHan"
}
2）占位符
1.随机的布尔值。
Random.boolean( min?, max?, current? ) === @boolean(min, max, current)
Random.boolean()
Mock.mock('@boolean')
Mock.mock('@boolean()')
Random.boolean(1, 9, true)
Mock.mock('@boolean(1, 9, true)')
2.随机的自然数（大于等于 0 的整数）。
Random.natural( min?, max? ) === @natural(min?, max? )
Random.natural()//4667925258767094
Mock.mock('@natural')//4667925258767094
Mock.mock('@natural()')//4667925258767094
Random.natural(60, 100)
Mock.mock('@natural(60, 100)')
3.随机的整数。
Random.integer( min?, max? )
Random.integer()//2135015435898868
Mock.mock('@integer')//-7047792899679432
Mock.mock('@integer()')//-1964858354379868
Random.integer(60, 100)
Mock.mock('@integer(60, 100)')
4.随机的浮点数。
Random.float( min?, max?, dmin?, dmax? )
- 参数 min：可选。整数部分的最小值。默认值为 -9007199254740992。
- 参数 max：可选。整数部分的最大值。默认值为 9007199254740992。
- 参数 dmin：可选。小数部分位数的最小值。默认值为 0。
- 参数 dmin：可选。小数部分位数的最大值。默认值为 17。
Random.float()//2050529809881216.5
Mock.mock('@float')//-2195083631689596.8
Mock.mock('@float()')//686071118661252.4
Random.float(60, 100, 3, 5)
Mock.mock('@float(60, 100, 3, 5)')//91.513
5.随机字符。
Random.character( pool? )
参数 pool：可选。字符串。表示字符池，将从中选择一个字符返回。
-
如果传入
'lower'或'upper'、'number'、'symbol'，表示从内置的字符池从选取：{ lower: "abcdefghijklmnopqrstuvwxyz", upper: "ABCDEFGHIJKLMNOPQRSTUVWXYZ", number: "0123456789", symbol: "!@#$%^&*()[]" } -
如果未传入该参数，则从
'lower' + 'upper' + 'number' + 'symbol'中随机选取一个字符返回。
Random.character()
Mock.mock('@character')
Mock.mock('@character()')
Random.character('lower')
Random.character('upper')
Random.character('number')
Random.character('symbol')
Mock.mock('@character("lower")')
Mock.mock('@character("upper")')
Mock.mock('@character("number")')
Mock.mock('@character("symbol")')
Random.character('abcdefg')
Mock.mock('@character("abcdefg")')
6.随机字符串。
Random.string( pool?, min?, max? )
-
参数 pool：可选。字符串。表示字符池，将从中选择一个字符返回。
-
如果传入
'lower'或'upper'、'number'、'symbol'，表示从内置的字符池从选取：{ lower: "abcdefghijklmnopqrstuvwxyz", upper: "ABCDEFGHIJKLMNOPQRSTUVWXYZ", number: "0123456789", symbol: "!@#$%^&*()[]" } -
如果未传入该参数，则从
'lower' + 'upper' + 'number' + 'symbol'中随机选取一个字符返回。
-
-
参数 min：可选。随机字符串的最小长度。默认值为 3。
-
参数 max：可选。随机字符串的最大长度。默认值为 7。
Random.string()
Mock.mock('@string')
Mock.mock('@string()')
Mock.mock('@string("lower", 1, 3)')
Mock.mock('@string("upper", 1, 3)')
Mock.mock('@string("number", 1, 3)')
Mock.mock('@string("symbol", 1, 3)')
Mock.mock('@string("aeiou", 1, 3)')
7.整型数组。
Random.range(start?, stop, step?)
- 参数 start：必选。数组中整数的起始值。
- 参数 stop：可选。数组中整数的结束值（不包含在返回值中）。
- 参数 step：可选。数组中整数之间的步长。默认值为 1。
Random.range(10)
Mock.mock('@range(10)')
Mock.mock('@range(1, 10, 2)')//[1,3,5,7,9]
Mock.mock('@range(1, 10, 3)')//[1,4,7]
8.随机的日期字符串。
Random.date( format? )
参数的含义和默认值如下所示：
- 参数 format：可选。指示生成的日期字符串的格式。默认值为
yyyy-MM-dd。可选的占位符参考自 Ext.Date，如下所示：
| Format | Description | Example |
|---|---|---|
| yyyy | A full numeric representation of a year, 4 digits | 1999 or 2003 |
| yy | A two digit representation of a year | 99 or 03 |
| y | A two digit representation of a year | 99 or 03 |
| MM | Numeric representation of a month, with leading zeros | 01 to 12 |
| M | Numeric representation of a month, without leading zeros | 1 to 12 |
| dd | Day of the month, 2 digits with leading zeros | 01 to 31 |
| d | Day of the month without leading zeros | 1 to 31 |
| HH | 24-hour format of an hour with leading zeros | 00 to 23 |
| H | 24-hour format of an hour without leading zeros | 0 to 23 |
| hh | 12-hour format of an hour without leading zeros | 1 to 12 |
| h | 12-hour format of an hour with leading zeros | 01 to 12 |
| mm | Minutes, with leading zeros | 00 to 59 |
| m | Minutes, without leading zeros | 0 to 59 |
| ss | Seconds, with leading zeros | 00 to 59 |
| s | Seconds, without leading zeros | 0 to 59 |
| SS | Milliseconds, with leading zeros | 000 to 999 |
| S | Milliseconds, without leading zeros | 0 to 999 |
| A | Uppercase Ante meridiem and Post meridiem | AM or PM |
| a | Lowercase Ante meridiem and Post meridiem | am or pm |
| T | Milliseconds, since 1970-1-1 00:00:00 UTC | 759883437303 |
Random.date()
Mock.mock('@date')
Mock.mock('@date()')
Mock.mock('@date("yyyy-MM-dd")')//"2020-06-28"
9.随机的时间字符串。
Random.time( format? )
参数的含义和默认值如下所示：
- 参数 format：可选。指示生成的时间字符串的格式。默认值为
HH:mm:ss。参考上表。
Random.time()
Mock.mock('@time')
Mock.mock('@time()')
Mock.mock('@datetime("HH H hh h mm m ss s SS S A a T")')
10.随机的日期和时间字符串。
Random.datetime( format? )
参数的含义和默认值如下所示：
- 参数 format：可选。指示生成的日期和时间字符串的格式。默认值为
yyyy-MM-dd HH:mm:ss。
Random.datetime()
Mock.mock('@datetime')
Mock.mock('@datetime()')
Mock.mock('@datetime("yyyy yy y MM M dd d HH H hh h mm m ss s SS S A a T")')
11.当前的日期和时间字符串。
Random.now( unit?, format? )
- 参数 unit：可选。表示时间单元，用于对当前日期和时间进行格式化。可选值有：
year、month、week、day、hour、minute、second、week，默认不会格式化。 - 参数 format：可选。指示生成的日期和时间字符串的格式。默认值为
yyyy-MM-dd HH:mm:ss。时间日期占位符参考表
Random.now()
Mock.mock('@now')
Mock.mock('@now()')
Random.now('yyyy-MM-dd HH:mm:ss SS')//"2020-06-29 19:15:33 433"
Random.now('day', 'yyyy-MM-dd HH:mm:ss SS')//"2020-06-29 00:00:00 000"