Mockjs實現的功能

1.讓前端攻城師獨立於後端進行開發。

2.通過隨機數據，模擬各種場景。增加單元測試的真實性

3.不需要修改既有代碼，就可以攔截 Ajax 請求，返回模擬的響應數據。

4.用法簡單

5.支持生成隨機的文本、數字、布爾值、日期、郵箱、鏈接、圖片、顏色等

6.支持支持擴展更多數據類型，支持自定義函數和正則。

語法

數據模版中，每個屬性由3個部分組成：屬性名，生成規則，屬性值：‘name’|‘rule’：‘value’

註意：

1. 屬性名與生成規則之間用 ‘|’
2. 生成規則是可選的
3. 生成規則有其中格式：
   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
4. 生成規則的含義需要以來屬性值才能確定
5. 屬性值中可以含有占位符
6. 屬性值還指定了最終值的初始值和類型

生成規則示例說明

1. ‘name|min-max‘: ‘value‘ 通過重復 ‘value‘ 生成一個字符串，重復次數大於等於 min，小於等於 max。
2. ‘name|count‘: ‘value‘ 通過重復 ‘value‘ 生成一個字符串，重復次數等於 count。
3. ‘name|+1‘: 100 屬性值自動加 1，初始值為 100
4. ‘name|1-100‘: 100 生成一個大於等於 1、小於等於 100 的整數，屬性值 100 只用來確定類型。
5. ‘name|1-100.1-10‘: 100 生成一個浮點數，整數部分大於等於 1、小於等於 100，小數部分保留 1 到 10 位。
6. ‘name|1‘: value 隨機生成一個布爾值，值為 true 的概率是 1/2，值為 false 的概率是 1/2。
7. ‘name|min-max‘: value 隨機生成一個布爾值，值為 value 的概率是 min / (min + max)，值為 !value 的概率是 max / (min + max)。
8. ‘name|min-max‘: {} 從屬性值 {} 中隨機選取 min 到 max 個屬性。
9. ‘name|count‘: {} 從屬性值 {} 中隨機選取 count 個屬性。
10. ‘name|1‘: [{}, {} ...] 從屬性值 [{}, {} ...] 中隨機選取 1 個元素，作為最終值。
11. ‘name|min-max‘: [{}, {} ...] 通過重復屬性值 [{}, {} ...] 生成一個新數組，重復次數大於等於 min，小於等於 max。
12. ‘name|count‘: [{}, {} ...] 通過重復屬性值 [{}, {} ...] 生成一個新數組，重復次數為 count。
13. ‘name‘: function(){} 執行函數 function(){}，取其返回值作為最終的屬性值，上下文為 ‘name‘ 所在的對象。

數據的占位符定義

占位符 只是在屬性值字符串中占個位置，並不出現在最終的屬性值中。占位符 的格式為：@占位符（參數 [,參數]）

註意：

1. 用 @ 來標識其後的字符串是 占位符。
2. 占位符 引用的是 Mock.Random 中的方法。
3. 通過 Mock.Random.extend() 來擴展自定義占位符。
4. 占位符 也可以引用 數據模板 中的屬性。
5. 占位符 會優先引用 數據模板 中的屬性

示例

{
 name: {
 first: [email protected],
 middle: [email protected],
 last: [email protected],
 full: [email protected] @middle @last‘
    }
}
// =>
{
 "name": {
 "first": "Charles",
 "middle": "Brenda",
 "last": "Lopez",
 "full": "Charles Brenda Lopez"
    }
}

用法：

jquery：

<script src="http://mockjs.com/dist/mock.js"></script>

Mock.mock(‘http://g.cn‘, {
    ‘name‘     : ‘@name‘,
    ‘age|1-100‘: 100,
    ‘color‘    : ‘@color‘
});

$.ajax({
    url: ‘http://g.cn‘,
    dataType:‘json‘
    }).done(function(data, status, xhr){
    console.log(
    JSON.stringify(data, null, 4)
    )    
})；

nodejs:

// 安裝
npm install mockjs

// 使用
var Mock = require(‘mockjs‘);
var data = Mock.mock({
    ‘list|1-10‘: [{
        ‘id|+1‘: 1
    }]
});

console.log(JSON.stringify(data, null, 4))

官方文檔：http://mockjs.com

進行獨立於後臺後端的前端開發——學習Mockjs