Mock.js简介
Mock.js 是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试。
功能:
- 基于 数据模板 生成 模拟数据;
- 类型丰富的 随机数据
- 模拟 Ajax 请求
语法规范
Mock.js 的语法规范包括两部分:
- 数据模板定义(Data Temaplte Definition,DTD)
- 数据占位符定义(Data Placeholder Definition,DPD)
数据模板定义 DTD
数据模板中的每个属性由 3 部分构成:属性名、生成规则、属性值:
属性名|生成规则:属性值 |
生成规则
属性名 和 生成规则 之间用
|
分隔。生成规则 是可选的。
生成规则 有 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 个 "★" |
'name|count': string
重复字符串 string 生成一个字符串,重复次数等于count
// 重复 "String" 3 次 |
Number : 属性值为数字
'name|min-max': number
生成一个大于等于 min、小于等于 max 的整数,属性值 number只用来确定Number类型
// 生成一个整数,区间:[1,10] |
'name|min-max.dmin-dmax': number
生成一个浮点数,整数部分大于等于min、小于等于 max,小数部分保留 dmin 到 dmax 位,属性值 value 只用来确定Number类型
// number1: 生成一个小数,整数区间:[1,10], 小数部分保留 2 到 4 位 |
'name|+step': number
属性值以 step 递增,初始值为 number, step不能为负值
tip: 官网示例关于Number的这一条示例没看懂,摸不清Result的刷新规则,但对于数组中应从此规则是很好理解的,示例如下:
// 生成一个数组list, 每一项的id 自增 5 ,初始值为100 |
Boolean:属性值为布尔值
'name|1': boolean
随机生成一个布尔值,值为 true 的概率是 1/2,值为 false 的概率是 1/2
// 生成一个布尔值, 1/2为true, 1/2为false |
'name|min-max': boolean
随机生成一个布尔值,值为 boolean 的概率是
min / (min + max)
,值为 !boolean 的概率是max / (min + max)
// 生成一个布尔值, 1/3为false, 2/3为true |
Object:属性值为对象 Object
'name|min-max': object
从属性值 object 中随机选取 min 到 max 个属性。
// 生成一个对象, 包含 1 ~ 2 个属性 |
'name|count': object
从属性值 object 中随机选取 count 个属性。
|
Array : 属性值为数组
'name|1': array
从属性值 array 中随机选取 1 个元素,作为最终值
Mock.mock({ |
'name|count': array
通过重复属性值 array 生成一个新数组,重复次数为 count
Mock.mock({ |
- `’name|min-max’: array
通过重复属性值 array 生成一个新数组,重复次数大于等于
min
,小于等于max
Mock.mock({ |
'name|+step': array
从下标 0 的位置循环取出array中的元素, 下标以 step 递增并对 array.length 取余
Mock.mock({ |
Function:属性值为函数
'name': function(){}
取函数返回值作为最终的属性值,上下文为
'name'
所在的对象。
Mock.mock({ |
RegExp: 属性值为正则表达式
'name': regexp
Mock.mock({ |
Path: 属性值通过路径获取
- Relative Path 相对路径
相对于当前属性名的路径
var relativePathData = Mock.mock({ |
- Absolute Path 绝对路径
最外层为根路径
var absolutePathData = Mock.mock({ |
数据占位符定义 DPD
占位符 只是在属性值字符串中占个位置,并不出现在最终的属性值中
- 用 @ 来标识其后的字符串是 占位符
- 占位符 引用的是
Mock.Random
中的方法,建议引用时 方法名 全大写,以便在阅读时从视觉上提高占位符的识别度,快速识别占位符 和 普通字符 - 通过
Mock.Random.extend()
来扩展自定义占位符 - 占位符 也可以引用 数据模板 中的属性
- 占位符 会优先引用 数据模板 中的属性
- 占位符 支持 相对路径 和 绝对路径。
// @FIRST 和 @first 均可调用 Mock.Random.first(), 使用大写易于区分占位符和字符串 |
综合示例
|
Mock.Random
Mock.Random 是一个工具类,用于生成各种随机数据,调用方式有2种:
// 1. 直接调用 Matn.random 方法 |
自定义占位符
// 自定义占位符 |
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。
// 一个参数表示结束值 |
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() |
Image
image:图片URL
Random.image( size?, background?, foreground?, format?, text? )
参数 size:可选。指示图片的宽高,格式为
'宽x高'
。默认从下面的数组中随机读取一个
[ |
参数 background:可选。图片的背景色(16进制颜色)。默认值为 ‘#000000’。使用英文单词(red等)表示颜色无效
参数 foreground:可选。图片的前景色(文件)。默认值为 ‘#FFFFFF’。使用英文单词(red等)表示颜色无效
参数 format:可选。指示图片的格式。默认值为 ‘png’,可选值包括:’png’、’gif’、’jpg’。
参数 text:可选。指示图片上的文字(中文无效)。默认为参数 size(尺寸大小 eg:200x100)。
Random.image('200x100', '#FF0000', '#FFF', 'png', '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() |
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() |
title:标题
随机生成一句标题,其中每个单词的首字母大写。
Random.title( len )
参数 len:可选。指示标题中单词的个数。默认值为 3 到 7 之间的随机数。
Random.title( min?, max? )
参数 min:可选。指示标题中单词的最小个数。默认值为 3。
参数 max:可选。指示标题中单词的最大个数。默认值为 7。
Random.title() |
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() |
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() |
cfirst:中文姓
Random.cfirst()
随机生成一个常见的中文姓氏。
clast:中文名
Random.clast()
随机生成一个常见的中文名。
cname:中文姓名
Random.cname()
Random.cname() |
Web
url:url地址
Random.url()
Random.url() |
domain:域名
Random.domain()
Random.domain() |
protocal:协议
Random.protocol()
Random.protocol() |
tld:顶级域名
Random.tld()
Random.tld() |
ip
Random.ip()
Random.ip() |
email:邮箱
Random.email()
Random.email() |
Address
region:大区
Random.region()
随机生成一个(中国)大区。
Random.area() |
province:省(或直辖市、自治区、特别行政区)
Random.province()
Random.city() |
city:城市
Random.city( prefix? )
参数 prefix:可选。布尔值。指示是否生成所属的省。默认值为 false。
Random.city() |
county:县(区)
Random.county( prefix? )
参数 prefix:可选。布尔值。指示是否生成所属的省、市。默认值为 false。
Random.county() |
zip:邮政编码
Random.zip()
随机生成一个邮政编码(六位数字)
Random.zip() |
Helper:工具类
capitalize:首字母大写
Random.capitalize( word )
Random.capitalize( 'hello' ) |
upper:大写转换
Random.upper( str )
Random.upper('hello WORld') |
lower:小写转换
Random.lower( str )
Random.lower('HELLO WorLD') |
pick:元素选取
Random.pick( arr )
从数组中随机选取一个元素,并返回
Random.pick(['a', 'e', 'i', 'o', 'u']) |
shuffle:打乱
Random.shuffle( arr )
打乱数组中元素的顺序,并返回。
Random.shuffle(['a', 'e', 'i', 'o', 'u']) |
Miscellaneous:杂项
guid:随机标识符
Random.guid()
随机生成一个 GUID。
Random.guid()
的实现参考了 UUID 规范。
Random.guid() |
id:18 位身份证。
Random.id()
// 随机生成一个 18 位身份证。 |
increment:自增整数
Random.increment( step? )
参数 step:可选。整数自增的步长。默认值为 1。起始值为0。
生成一个 全局 的自增整数。
全局变量!!!
// 仔细观察每次调用 Random.increment 后的返回值 |
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.setup(settings )
参数settings:必选。指示配置项对象。配置拦截 Ajax 请求时的行为。
Mock.setup( settings )
仅用于配置 Ajax 请求,同上,有兴趣的同学可以查看 官方文档)
settings:配置项
timeout
可选。指定被拦截的 Ajax 请求的响应时间,单位是毫秒。
值可以是正整数,例如
400
,表示 400 毫秒 后才会返回响应内容也可以 ‘200-600’,表示响应时间介于 200 和 600 毫秒之间。默认值是
'10-100'
。
Mock.setup({ |