三分鐘快速上手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請求，擷取假資料，有助于提高前端開發效率。