前端扩展 - 优秀的 Mock.js

前端开发过程中免不了出现等接口的情况，而静态 JSON 不足以体现前端高大上的逼格，是时候拿出 mock.js 了，众多在线 Mock API 都是使用的 mock.js 语法哦

Mock.js简介

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

示例：http://mockjs.com/examples.html
文档：http://mockjs.com/0.1/

功能：

1. 基于 数据模板 生成 模拟数据；
2. 类型丰富的 随机数据
3. 模拟 Ajax 请求

个人应用：

使用 Koa 和 mockjs 搭建的本地服务

个人仓库：mock-server，开箱即用，喜欢可以 star ^ _ ^

语法规范

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

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

数据模板定义 DTD

数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：

属性名|生成规则：属性值
'name|rule': value

生成规则

• 属性名 和 生成规则 之间用 | 分隔。

• 生成规则 是可选的。

• 生成规则 有 7 种格式：

  1. 'name|min-max': value
  2. 'name|count': value
  3. 'name|min-max.dmin-dmax': value
  4. 'name|min-max.dcount': value
  5. 'name|count.dmin-dmax': value
  6. 'name|count.dcount': value
  7. 'name|+step': value
  

• 生成规则的含义需要依赖 属性值 才能确定。

• 属性值中可以含有 @占位符。

• 属性值还指定了最终值的初始值和类型。

String : 属性值为字符串

• 'name|min-max': string

重复字符串 string 生成一个字符串，重复次数大于等于 min，小于等于 max

// 生成 1 ~ 10 个 "★"
Mock.mock({
  "string|1-10": "★"
})

// ==> 
{ "string": "★★★★" }

• 'name|count': string

重复字符串 string 生成一个字符串，重复次数等于count

// 重复 "String" 3 次
Mock.mock({
  "string|3": "String",
})

// ==> 
{ "string": "StringStringString" }

Number : 属性值为数字

• 'name|min-max': number

生成一个大于等于 min、小于等于 max 的整数，属性值 number只用来确定Number类型

// 生成一个整数，区间：[1,10]
Mock.mock({
  "number|1-10": 100
})

// ==> 
{ "number": 6 }

• 'name|min-max.dmin-dmax': number

生成一个浮点数，整数部分大于等于min、小于等于 max，小数部分保留 dmin 到 dmax 位，属性值 value 只用来确定Number类型

// number1: 生成一个小数，整数区间：[1,10], 小数部分保留 2 到 4 位
// number2: 生成一个小数，整数部分为10, 小数部分保留 2 到 4 位
// number3: 生成一个小数，整数部分为10, 小数部分保留 2 位
Mock.mock({
  "number1|1-10.2-4": 100,
  "number2|10.2-4": 100,
  "number3|10.2": 100,
})

// => 
{ 
    "number1": 6.123, 
    "number2": 10.2884,
    "number3": 10.68,
}

• 'name|+step': number

属性值以 step 递增，初始值为 number， step不能为负值

tip: 官网示例关于Number的这一条示例没看懂，摸不清Result的刷新规则，但对于数组中应从此规则是很好理解的，示例如下：

// 生成一个数组list, 每一项的id 自增 5 ，初始值为100
Mock.mock({
  "list|3": [
    {"id|+5": 100}
  ],
})

// => 
{"list": [
    {id: 100},
    {id: 105},
    {id: 110},
]}

Boolean：属性值为布尔值

• 'name|1': boolean

随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率是 1/2

// 生成一个布尔值, 1/2为true, 1/2为false
Mock.mock({
    "boolean|1": true,
})

// => 
{ "boolean": false }

• 'name|min-max': boolean

随机生成一个布尔值，值为 boolean 的概率是 min / (min + max)，值为 !boolean 的概率是 max / (min + max)

// 生成一个布尔值, 1/3为false, 2/3为true
Mock.mock({
    "boolean|1-2": false,
})

// => 
{ "boolean": false }

Object：属性值为对象 Object

• 'name|min-max': object

从属性值 object 中随机选取 min 到 max 个属性。

// 生成一个对象, 包含 1 ~ 2 个属性
Mock.mock({
  "object|1-2": {
    "name": "code",
    "gender": 1,
    "age": 18,
    "tel": "18911112222"
  }
})

// => 
{object: {
    "name": "code",
}}

• 'name|count': object

从属性值 object 中随机选取 count 个属性。

// 生成一个对象, 包含 2 个属性
Mock.mock({
  "object|2": {
    "name": "code",
    "gender": 1,
    "age": 18,
    "tel": "18911112222"
  }
})

// => 
{object: {
    "name": "code",
    "age": 18,
}}

Array : 属性值为数组

• 'name|1': array

从属性值 array 中随机选取 1 个元素，作为最终值

Mock.mock({
  "array|1": [1,2,3,4]
})

// => 
{ array: 1 }

• 'name|count': array

通过重复属性值 array 生成一个新数组，重复次数为 count

Mock.mock({
  "array1|2": [1,2,3],
  "array2|2": [{a:1},2],
})

// => 
{
    array1: [ 1, 2, 3, 1, 2, 3 ],
    array2: [ {a:1}, 2, {a:1}, 2 ]
}

• `'name|min-max': array

通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max

Mock.mock({
  "array|1-3": [{id:1, name: 2}],
})

// => 
{array1: [ 
    {id:1, name: 2}, 
    {id:1, name: 2} 
]}

• 'name|+step': array

从下标 0 的位置循环取出array中的元素， 下标以 step 递增并对 array.length 取余

Mock.mock({
  "array|4": [{
      "number|+1": [2,4]
  }]
})

// => 
{array: [
    { number: 2},
    { number: 4},
    { number: 2},
    { number: 4}
]}

Function：属性值为函数

• 'name': function(){}

取函数返回值作为最终的属性值，上下文为 'name' 所在的对象。

Mock.mock({
  'firstName': 'Guoda',
  'name': function() {
    var nameObj =  Mock.mock({
      'firstName': 'Jason',
      'lastName': 'Statham',
      'name': function() {
        // 这里的 this.firstName 会取到 'Jason' 而不会取到 'Guoda'
        return this.firstName + " " +this.lastName;
      }
    })
    return nameObj.name
  }
})

// => 
{
    "firstName": "Guoda",
    "name": "Jason Statham"
}

RegExp： 属性值为正则表达式

• 'name': regexp

Mock.mock({
  'regexp1': /[a-z][A-Z][0-9]/,
  'regexp2': /\d{5,10}/
  'regexp3|1-5': /\d{5,10}\-/,
  'regexp4|3': /\d{2,4}\*/
})

// => 
{
    "regexp1": "cD3",
    "regexp2": "54833",
    "regexp3": "597425-8412964-5862207-7615212-051289-582018-",
    "regexp4": "374*1397*88*027*",
}

Path： 属性值通过路径获取

• Relative Path 相对路径

相对于当前属性名的路径

var relativePathData = Mock.mock({
  "foo": "Hello",
  "nested": {
    "a": {
      "b": {
        "c": "Mock.js"
      }
    }
  },
  "relativePath": {
    "a": {
      "b": {
        "c": "@../../../foo @../../../nested/a/b/c"
      }
    }
  }
})
console.log(relativePathData.relativePath)
// => 
"Hello Mock.js"

• Absolute Path 绝对路径

最外层为根路径

var absolutePathData = Mock.mock({
  "foo": "Hello",
  "nested": {
    "a": {
      "b": {
        "c": "Mock.js"
      }
    }
  },
  "absolutePath": "@/foo @/nested/a/b/c"
})
console.log(absolutePathData.absolutePath)
// => 
"Hello Mock.js"

数据占位符定义 DPD

占位符 只是在属性值字符串中占个位置，并不出现在最终的属性值中

1. 用 @ 来标识其后的字符串是 占位符
2. 占位符 引用的是 Mock.Random 中的方法，建议引用时 方法名 全大写，以便在阅读时从视觉上提高占位符的识别度，快速识别占位符 和 普通字符
3. 通过 Mock.Random.extend() 来扩展自定义占位符
4. 占位符 也可以引用 数据模板 中的属性
5. 占位符 会优先引用 数据模板 中的属性
6. 占位符 支持 相对路径 和 绝对路径。

// @FIRST 和 @first 均可调用 Mock.Random.first()， 使用大写易于区分占位符和字符串
Mock.mock({
     "name": {
         first: '@FIRST',   // @FIRST 引用 Mock.Random.first()
         last: '@LAST',     // @LAST 引用 Mock.Random.last()
         full: '@first @last' // @first 优先引用数据模版的属性（this.first）
     }
 })
 // =>
 {"name": {
     "first": "Charles",
     "last": "Lopez",
     "full": "Charles Lopez"
 }}

综合示例

Mock.mock({
  "list|10": [
    {
      "id": "@GUID",
      "first": "@CFIRST",
      "last": "@CLAST",
      "name": "@first@last",
      "age|10-60": 1,
      "gender": "@pick([1,2])",
      "say": function(){
          return "my name is " + this.name;
      }
    }
  ]
})

Mock.Random

Mock.Random 是一个工具类，用于生成各种随机数据，调用方式有2种：

// 1. 直接调用 Matn.random 方法
var Random = Mock.Random;
Random.boolean()
Random.boolean(1, 9, true)

// 2. 数据占位符调用
Mock.mock('@boolean')
Mock.mock('@boolean()')
Mock.mock('@boolean(1, 9, true)')

自定义占位符

// 自定义占位符
Mock.Random.extend({
    constellations: [
        '白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', 
        '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座'
    ],
    constellation: function(date){
        return this.pick(this.constellations)
    }
})
Random.constellation()
// => "水瓶座"
Mock.mock('@CONSTELLATION')
// => "天蝎座"
Mock.mock({ constellation: '@CONSTELLATION'})
// => { constellation: "射手座" }

Basics

boolean：布尔值

• Random.boolean(min?, max?, current?)

参数说明参见 数据模版定义-Boolean

natural：自然数（大于等于 0 的整数）

• Random.natural( min?, max? )

参数 min：可选。指示随机自然数的最小值。默认值为 0。

参数 max：可选。指示随机自然数的最小值。默认值为 9007199254740992。

integer：整数（包含负数）

• Random.integer( min?, max? )

参数 min：可选。指示随机整数的最小值。默认值为 -9007199254740992。

参数 max：可选。指示随机整数的最大值。默认值为 9007199254740992。

float：浮点数

• Random.float( min?, max?, dmin?, dmax? )

参数 min：可选。整数部分的最小值。默认值为 -9007199254740992。

参数 max：可选。整数部分的最大值。默认值为 9007199254740992。

参数 dmin：可选。小数部分 位数 的最小值。默认值为 0。

参数 dmin：可选。小数部分 位数 的最大值。默认值为 17。

character：单个字符

• Random.character( pool? )

参数 pool：可选。字符串。表示字符池，将从中选择一个字符返回。

如果传入 'lower' 或 'upper'、'number'、'symbol'，表示从内置的字符池从选取。

如果未传入该参数，则从 'lower' + 'upper' + 'number' + 'symbol' 中随机选取一个字符返回。

内置字符池：
lower: "abcdefghijklmnopqrstuvwxyz",
upper: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
number: "0123456789",
symbol: "!@#$%^&*()[]"

string：字符串

• Random.string( pool?, min?, max? )

参数 pool：可选。字符串。释义同上字符。

参数 min：可选。随机字符串的最小长度。默认值为 3。

参数 max：可选。随机字符串的最大长度。默认值为 7。

range：整型数组

• Random.range(stop)

一个参数：表示数组中整数的结束值（不包含在返回值中）

• Random.range(start?, stop, step?)

参数 start：可选。数组中整数的起始值，默认值为 0。

参数 stop：必选。数组中整数的结束值（不包含在返回值中）。

参数 step：可选。数组中整数之间的步长，默认值为 1。

// 一个参数表示结束值
Random.range(10)
// => [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
// 多参数
Random.range(3, 7)
// => [3, 4, 5, 6]
Random.range(1, 10, 2)
// => [1, 3, 5, 7, 9]
Random.range(1, 10, 3)
// => [1, 4, 7]

Date

参数 format：可选。格式化生成的日期字符串。默认值为 yyyy-MM-dd。可选值参照 date-format

date：日期字符串

• Random.date( format? )

time：时间字符串

• Random.time(format?)

datetime：随机的日期和时间字符串

• Random.datetime( format? )

now：当前的日期和时间字符串

• Random.now( unit?, format? )

参数 unit：可选。表示时间单元，用于对当前日期和时间进行格式化。

​ 可选值有：year、month、week、day、hour、minute、second、week，默认不会格式化。

参数 format：可选。指示生成的日期和时间字符串的格式。默认值为 yyyy-MM-dd HH:mm:ss。

Random.now()
// => "2018-11-09 10:28:53"

// Ranndom.now( unit )
    Random.now('year')
    // => "2018-01-01 00:00:00"
    Random.now('month')
    // => "2018-11-01 00:00:00"
    Random.now('week')
    // => "2018-11-04 00:00:00"
    Random.now('day')
    // => "2018-11-09 00:00:00"
    Random.now('hour')
    // => "2018-11-09 20:00:00"
    Random.now('minute')
    // => "2018-11-09 20:08:00"
    Random.now('second')
    // => "2018-11-09 20:08:38"

// Ranndom.now( unit, format )
    Random.now('day', 'yyyy-MM-dd HH:mm:ss SS')
    // => "2018-11-09 00:00:00 000"

Image

image：图片URL

• Random.image( size?, background?, foreground?, format?, text? )

参数 size：可选。指示图片的宽高，格式为 '宽x高'。默认从下面的数组中随机读取一个

[
    '300x250', '250x250', '240x400', '336x280', '180x150', '720x300', '468x60', 
    '234x60', '88x31', '120x90', '120x60', '120x240', '125x125', '728x90', 
    '160x600', '120x600', '300x600'
 ]

参数 background：可选。图片的背景色（16进制颜色）。默认值为 '#000000'。使用英文单词(red等)表示颜色无效

参数 foreground：可选。图片的前景色（文件）。默认值为 '#FFFFFF'。使用英文单词(red等)表示颜色无效

参数 format：可选。指示图片的格式。默认值为 'png'，可选值包括：'png'、'gif'、'jpg'。

参数 text：可选。指示图片上的文字(中文无效)。默认为参数 size（尺寸大小 eg：200x100）。

Random.image('200x100', '#FF0000', '#FFF', 'png', 'text')
// =>
"https://dummyimage.com/200x100/FF0000/FFF.png&text=text"

dataImage：base64图片

• Random.dataImage( size?, text? )

图片的背景色是随机的，取值范围参考自 http://brandcolors.net/。

Color

color：'#RRGGBB'

• Random.color()

返回16进制颜色（'#RRGGBB'）

hex : '#RRGGBB'

• Random.hex()

返回16进制颜色（'#RRGGBB'）

rgb：'rgb(r, g, b)'

• Random.rgb()

rgba：'rgb(r, g, b, a)'

• Random.rgba()

hsl：'hsl(h, s, l)'

• Random.hsl()

Random.color()
// => "#f279c3"
Random.hex()
// => "#7988f2"
Random.rgb()
// => "rgb(242, 184, 121)"
Random.rgba()
// => "rgba(242, 121, 164, 0.58)"
Random.hsl()
// => "hsl(286, 82, 71)"

Text

paragraph：英文段落（多条句子）

• Random.paragraph( len )

参数 len：可选。指示文本中句子的个数。默认值为 3 到 7 之间的随机数。

• Random.paragraph( min?, max? )

参数 min：可选。指示文本中句子的最小个数。默认值为 3。

参数 max：可选。指示文本中句子的最大个数。默认值为 7。

sentence：一个英文句子

随机生成一个句子，第一个的单词的首字母大写。

• Random.sentence( len )

参数 len：可选。指示句子中单词的个数。默认值为 12 到 18 之间的随机数。

• Random.sentence( min?, max? )

参数 min：可选。指示句子中单词的最小个数。默认值为 12。

参数 max：可选。指示句子中单词的最大个数。默认值为 18。

word：英文单词

• Random.word( len )

参数 len：可选。指示单词中字符的个数。默认值为 3 到 10 之间的随机数。

• Random.word( min?, max? )

参数 min：可选。指示单词中字符的最小个数。默认值为 3。

参数 max：可选。指示单词中字符的最大个数。默认值为 10。

Random.word()
// => "fzljqtu"

title：标题

随机生成一句标题，其中每个单词的首字母大写。

• Random.title( len )

参数 len：可选。指示标题中单词的个数。默认值为 3 到 7 之间的随机数。

• Random.title( min?, max? )

参数 min：可选。指示标题中单词的最小个数。默认值为 3。

参数 max：可选。指示标题中单词的最大个数。默认值为 7。

Random.title()
// => "Odd Krdote Tidnsovvr Gcljiwzk Gtbckxopbg Vhfr"

cparagraph：中文段落

参数同 paragraph

• Random.cparagraph( len )

• Random.cparagraph( min?, max? )

Random.cparagraph()
// => "科叫强上全六党争很温素通。增精老新节劳人要格原山设总。可京条眼作少空么属气众原并是结型。社马高率主约样明只事过且往除。"

csentence：中文句子

参数同 sentence

• Random.cparagraph( len )
• Random.cparagraph( min?, max? )

Random.csentence()
// => "气想指选价领金高每提实式转。"

cword：汉字

• Random.cword(pool？）
• Random.cword(pool？, length？）
• Random.cword( pool?, min?, max? )
• Random.cword(length？）
• Random.cword(min, max）

参数 pool：可选。字符串。表示字符池，将从中选择汉字返回(可重复选择)。

参数 length：可选。指示随机汉字的长度，默认值为 1。

参数 min：可选。指示随机汉字的最小长度。

参数 max：可选。指示随机汉字的最大长度。

// Random.cword()
Random.cword()
// => "况"

// Random.cword( pool )
Random.cword('零一二三四五六七八九十')
// => "十"

// Random.cword( length )
Random.cword(3)
// => "万为此"

// Random.cword( pool, length )
Random.cword('零一二三四五六七八九十', 3)
// => "五三六"

// Random.cword( min, max )
Random.cword(3, 5)
// => "眼克好金少"

// Random.cword( pool, min, max )
Random.cword('零一二三四五六七八九十', 5, 7)
// => "二五五八三六"

ctitle：中文标题

• Random.ctitle(length？）
• Random.ctitle(min, max）

参数 length：可选。指示随机标题的长度。

参数 min：可选。指示随机标题的最小长度，默认值为3。

参数 max：可选。指示随机标题的最大长度，默认值为7。

Random.ctitle(3, 5)
// => "路属改往"

Name

first：英文名

• Random.first()

随机生成一个常见的英文名。

last：英文姓

• Random.last()

随机生成一个常见的英文姓。

name：英文姓名

• Random.name( middle? )

随机生成一个常见的英文姓名。

参数 middle：可选。布尔值。指示是否生成中间名。

Random.name()
// => "Larry Wilson"
Random.name(true)
// => "Helen Carol Martinez"

cfirst：中文姓

• Random.cfirst()

随机生成一个常见的中文姓氏。

clast：中文名

• Random.clast()

随机生成一个常见的中文名。

cname：中文姓名

• Random.cname()

Random.cname()
// => "薛静"

Web

url：url地址

• Random.url()

Random.url()
// => "gopher://qmug.sh/uprwjbph"

domain：域名

• Random.domain()

Random.domain()
// => "ynadsh.tj"

protocal：协议

• Random.protocol()

Random.protocol()
// => "http"

tld：顶级域名

• Random.tld()

Random.tld()
// => "nz"

ip

• Random.ip()

Random.ip()
// => "97.167.99.146"

email：邮箱

• Random.email()

Random.email()
// => "[email protected]"

Address

region：大区

• Random.region()

随机生成一个（中国）大区。

Random.area()
// => "华北"

province：省（或直辖市、自治区、特别行政区）

• Random.province()

Random.city()
// => "安徽省"

city：城市

• Random.city( prefix? )

参数 prefix：可选。布尔值。指示是否生成所属的省。默认值为 false。

Random.city()
// => "海东市"
Random.city(true)
// => "吉林省 吉林市"

county：县（区）

• Random.county( prefix? )

参数 prefix：可选。布尔值。指示是否生成所属的省、市。默认值为 false。

Random.county()
// => "永胜县"
Random.county(true)
// => "河南省 安阳市 龙安区"

zip：邮政编码

• Random.zip()

随机生成一个邮政编码（六位数字）

Random.zip()
// => "139862"

Helper：工具类

capitalize：首字母大写

• Random.capitalize( word )

Random.capitalize( 'hello' )
// => "Hello"

upper：大写转换

• Random.upper( str )

Random.upper('hello WORld')
// => "HELLO WORLD"

lower：小写转换

• Random.lower( str )

Random.lower('HELLO WorLD')
// => "hello world"

pick：元素选取

• Random.pick( arr )

从数组中随机选取一个元素，并返回

Random.pick(['a', 'e', 'i', 'o', 'u'])
// => "o"

shuffle：打乱

• Random.shuffle( arr )

打乱数组中元素的顺序，并返回。

Random.shuffle(['a', 'e', 'i', 'o', 'u'])
// => ["i", "u", "a", "o", "e"]

Miscellaneous：杂项

guid：随机标识符

• Random.guid()

随机生成一个 GUID。Random.guid() 的实现参考了 UUID 规范。

Random.guid()
// => "8Dc8DA10-3FDe-FFc8-3AD6-703bdeFff0D8"

id：18 位身份证。

• Random.id()

// 随机生成一个 18 位身份证。
Random.id()
// => "620000201010107263"

increment：自增整数

• Random.increment( step? )

参数 step：可选。整数自增的步长。默认值为 1。起始值为0。

生成一个 全局 的自增整数。

全局变量！！！

// 仔细观察每次调用 Random.increment 后的返回值
Random.increment()
// => 1 （0+1）
Random.increment()
// => 2 （1+1）
Random.increment(100)
// => 102 （2+100）
Random.increment()
// => 103 (102+1)

Mock.mock()

Mock.js 通过覆盖和模拟原生 XMLHttpRequest 的行为来拦截 Ajax 请求

当前版本只能拦截Ajax请求，故对此方法不做过多记录，有兴趣的同学可以查看 官方文档

Mock.mock( rurl?, rtype?, template|function( options ) )

• Mock.mock( template )
• Mock.mock( rurl, template )
• Mock.mock( rurl, function(options) )
• Mock.mock( rurl, rtype, template )
• Mock.mock( rurl, rtype, function(options) )

参数 rurl：可选。表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。

​ 例如 /\/domain\/list\.json/、'/domian/list.json'。

参数 rtype：可选。表示需要拦截的 Ajax 请求类型。

​ 例如 GET、POST、PUT、DELETE 等。

参数 template：可选。表示数据模板，可以是对象或字符串。

​ 例如 { 'data|1-10':[{}] }、'@EMAIL'。

参数 function(options)：可选。表示用于生成响应数据的函数。

参数 options：指向本次请求的 Ajax 选项集。

​ 含有 url、type 和 body 三个属性，参见 XMLHttpRequest 规范。

// Mock.mock( rurl, rtype, template )
Mock.mock(/\.json/, 'post', {
    'list|1-10': [{
        'id|+1': 1,
        'email': '@EMAIL'
    }]
})
$.ajax({
    url: 'list.json',
    type: 'post',
    dataType: 'json'
}).done(function (data, status, jqXHR) {
    console.log(data)
})

Mock.setup(settings )

参数settings：必选。指示配置项对象。配置拦截 Ajax 请求时的行为。

Mock.setup( settings ) 仅用于配置 Ajax 请求，同上，有兴趣的同学可以查看 官方文档

settings：配置项

timeout

可选。指定被拦截的 Ajax 请求的响应时间，单位是毫秒。

值可以是正整数，例如 400，表示 400 毫秒 后才会返回响应内容

也可以 '200-600'，表示响应时间介于 200 和 600 毫秒之间。默认值是'10-100'。

Mock.setup({
    timeout: 400
})
Mock.setup({
    timeout: '200-600'
})