【工具类】Mock.js的应用（一）

Mock.js

一、什么是Mock.js

Mock.js 是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试，模拟数据请求。

二、有什么用

• 根据数据模板生成模拟数据
• 模拟 Ajax 请求，生成并返回模拟数据
• 基于 HTML 模板生成模拟数据

三、核心点

Mock.js 的语法规范包括两部分：

1. 数据模板定义（Data Temaplte Definition，DTD）
2. 数据占位符定义（Data Placeholder Definition，DPD）

数据模板中的每个属性由 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，如下所示：

时间日期占位符参考表[^1]

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"