三分钟快速上手MockJS

这不是普通的搬砖文，而是便于功能速览的总结性搬砖文。

简介

MockJS是github的一个开源项目(https://github.com/nuysoft/Mock)，可以拦截AJAX请求并返回模拟数据。

Mock.js is a simulation data generator to help the front-end to develop and prototype separate from the back-end progress and reduce some monotony particularly while writing automated tests.

MockJS能做什么？

1. 模拟数据
2. 验证数据是否符合模板定义

一个前提是使用者定义好数据模板。

如何定义数据模板？

按照json格式定义，每个元素的基本格式为

"name|rule": value

{
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1
    }]
}
           

能为字段定义那些属性？

可以定义的属性基本分为七种

1. 数值范围
2. 小数保留范围
3. 数量
4. 数量范围
5. 长度范围
6. 数值步进长度
7. 枚举

怎样使用一些已定义的随机规则

使用

Mock.Random

可以直接使用一些已经定义的规则（称之为占位符），如

email

url

color

等。命令行执行

npm install -g mockjs

后，可以通过

random -h

获取更多已定义的类型。

怎样转为JSONSchema使用

Mock提供了

Mock.toJSONSchema()

方法，将模板转为JSONSchema

如何验证数据

Mock提供了

Mock.valid(template, data)

方法用于验证数据

展示一个容纳了上述所有内容的脚本

// 使用 Mock
var Mock = require('mockjs')
var template = {
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1
    }]
};

// 模拟数据
var data = Mock.mock(template);
console.log(JSON.stringify(data, null, 4));

// toJSONSchema
console.log(JSON.stringify(Mock.toJSONSchema(template), null, 4));

// valid
var data = {
	'list': [
	]
}
console.log(JSON.stringify(Mock.valid(template, data), null, 4));
// []
/**
[
    {
        "path": [
            "ROOT",
            "list"
        ],
        "type": "items",
        "actual": 0,
        "expected": 1,
        "action": "is greater than or equal to",
        "message": "[ITEMS] array is too short: ROOT.list must have at least 1 elements but instance has 0 elements"
    }
]
*/

// 占位符
var Random = Mock.Random;
console.log(Random.email());

// 自定义占位符
Random.extend({
    extendKey: function(date) {
        return 'extend value';
    }
});
Random.extendKey();
console.log(JSON.stringify(Mock.mock(
	{
		'key': '@EXTENDKEY'
	}
), null, 4));
           

拦截AJAX

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

实际不是单纯的生成假数据的方法。通过前面两个可选参数，我们可以了解到，其还具备拦截请求的功能。具体可以描述为：当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。

在实际前端项目中，如果希望拦截AJAX请求，可以直接在代码前面添加如下代码。

// 这里的template即为上一代码中定义的template
Mock.mock('http://steam.meishakeji.com', template);
           

参数

rurl

支持正则

https://github.com/nuysoft/Mock/wiki/Mock.mock()

实际应用

通过MockJS，我们能很方便的开发一个实现接口文档编写(基于Mock定义格式)和浏览、接口测试、假数据服务器等多种功能的接口管理工具。前端同学也可以通过预先定义好的JSONSchema，不改动代码的情况下拦截本地AJAX请求，获取假数据，有助于提高前端开发效率。