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

標籤：布爾   自動   attr   ram   浮點數   string   mock   param   log   

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: ‘@FIRST‘, middle: ‘@FIRST‘, last: ‘@LAST‘, full: ‘@first @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