㐵 Mock.js
生成模拟数据
㐵
蓝色 Logo 出自设计师 @山峰，图片来自 刺豚_百度百科。
开始之前
开始之前 - ？
Mock.js
开始之前 - ？
RAP、IF、River、中途岛
开始之前 - ？
开始之前 - ？
内容
- Mock.js 是什么
- 快速开始
- 数据模板
- 数据占位符
- 未来规划
- 问答
Mock.js 是什么
HTML
<a class="url" href="url">{{url}}</a>CSS
.url { color: #428BCA; }Mock.js 是什么
JS
$('.url').on('mouseenter', function(event){ })DATA
{ url: 'http://mockjs.com' }Warning 数据是必不可少的一环，但解决方案很少
Mock.js 是什么
AJAX
$.ajax({
url: '...',
sucess: function(data, status, xhr){
// ...
}
})Warning 如果接口不稳定，怎么办？
Mock.js 是什么
var data = {
list: [
{ "id": 1, "name": "Jennifer Allen" },
{ "id": 2, "name": "Donna Lopez" },
{ "id": 3, "name": "Edward Davis" }
]
}
function sucess(data, status, xhr) { ... }
// $.ajax({ ... })
sucess(data)Mock.js 是什么
Warning 制造静态数据很无趣，例如可能很长
Warning 静态数据的类型很多，例如图片
Warning 需要修改既有代码
Warning 测试用例单一
Mock.js 是什么
期望1 生成随机数据
期望2 拦截 Ajax 请求
Mock.js 是什么
期望3 开发无侵入
期望4 引入方便，用法简单
期望5 数据类型丰富
期望6 符合直觉的接口
期望7 一目了然的文档
Mock.js 是什么
可用 好用
Mock.js 是什么
一款模拟数据生成器。
功能 1 基于 数据模板 生成 模拟数据
功能 2 类型丰富的 随机数据
功能 3 模拟 Ajax 请求
功能 4 基于 HTML 模板生成模拟数据
Mock.js 是什么
价值 1 前端攻城师独立于后端进行开发
价值 2 提高单元测试覆盖率
快速开始
第 1 步 安装 Mock.js
npm install bower -g
bower install mockjs --save第 2 步 引入 Mock.js
<script src="./bower_components/mockjs/dist/mock.js"></script>快速开始
第 3 步 调用 Mock.mock( template ) 生成模拟数据
var data = Mock.mock({
'list|1-10': [{
'id|+1': 1
}]
})
console.log(
JSON.stringify(data, null, 4)
)快速开始
生成的模拟数据
{
"list": [
{ "id": 1 },
{ "id": 2 },
{ "id": 3 },
{ "id": 4 }
]
}快速开始
第 3 步 调用 Mock.mock( url, template ) 拦截 Ajax
Mock.mock('hello.json', {
'list|1-10': [{
'id|+1': 1
}]
})快速开始
发起 Ajax 请求
$.ajax({
url: 'hello.json',
dataType: 'json'
}).done(function(data, status, xhr){
console.log(
JSON.stringify(data, null, 4)
)
})快速开始
响应的模拟数据
{
"list": [
{ "id": 1 },
{ "id": 2 },
{ "id": 3 },
{ "id": 4 },
{ "id": 5 }
]
}数据模板
每个属性由 3 部分构成：
// 属性名 name
// 生成规则 rule
// 属性值 value
'name|rule': value数据模板
String 'name|min-max': 'value'
Number 'name|min-max.dmin-dmax': value
Boolean 'name|min-max': value
数据模板
Object 'name|min-max': {}
Array 'name|min-max': [{}, {} ...]
Function 'name': function(){}
数据占位符
格式：
@占位符
@占位符(参数 [, 参数])与 Mock.Random 中的方法一一对应
数据占位符
Mock.Random
Basics Image Color Text Name Web Address Miscellaneous Helpers
数据占位符
Mock.Random.extend()
Mock.Random.extend({
hero: function() {
return this.pick([
'盖伦 德玛西亚',
'艾希 寒冰射手',
'瑞兹 流浪法师'
])
}
})数据占位符
Mock.Random.extend()
Mock.Random.hero()
// => "艾希 寒冰射手"
Random.hero()
// => "瑞兹 流浪法师"数据占位符
Mock.Random.extend()
Mock.mock('@hero')
// => "瑞兹 流浪法师"
Mock.mock({
free: '@hero'
})
// => { free: "盖伦 德玛西亚"}阿里妈妈的实践
集中管理数据模板
KISSY.add("app/models/data", function(S, Mock) {
Mock.mock('foo.json', { ... })
Mock.mock('bar.json', { ... })
Mock.mock('faz.json', { ... })
}, {
requires: ['components/mock/index']
})阿里妈妈的实践
根据 URL 中是否含有参数 mock 动态加载数据模板
// http://host:port?mock
var mock = ~location.search.indexOf('mock')
if(mock) KISSY.use('app/models/data')未来规划
基于 模板 校验 数据
Mock.valid(template, data)
基于 正则 生成 数据
Mock.mock( regexp )
回顾一下
- Mock.js 是什么
- 数据模板
- 数据占位符
只做一件事，并做好。——《Unix 编程艺术》
问答
你如何看待 JSON Schema？
看上去很美。
Mock.js 如何协同 RAP（阿里妈妈）、IF（天猫）、中途岛（淘宝）、River（集团）？
目前 RAP、中途岛、River 基于 Mock.js 生成随机数据。
问答
㐵 ？
求 Star
没有了
谢谢各位的聆听