mock.js 学习笔记

213 阅读6分钟

上次重构 vue 目录时,有提到一个 mock 目录,是用来模拟生成 ajax 数据的。今天把这个遗留内容看下,看如何能应用到团队前端开发中:

官网地址: mockjs.com/

github 地址: github.com/nuysoft/Moc…

文档在 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 请求方法。例如:
				GETPOSTPUTDELETE 等
		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();			// dong@123.com
		Mock.mock('@email');	// xue@123.com
		Mock.mock({email: '@email'});	// {email: 'min@123.com'}

	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 Schemahttp://json-schema.org/

		JSON Schema 定义了如何基于 JSON 格式描述 JSON 数据结构的规范,进而提供数据校验、文档生成和接口数据交互控制等一系列能力。

		貌似是一个规定 JSON 数据的规范!不太清楚,自行搜索!

我们希望,在项目中 Ajax 请求数据时,使用 mock.js 来模拟请求数据,前端就无语等待后端、或者自己查询数据库来获取数据了。以后自己就可以模拟数据了,不用依赖后端!

打算是在项目中创建 mock/ 目录,同 API 接口目录、方法对应,以后用起来再补充实例