轉載於:https://segmentfault.com/a/1190000010211622
mock大法好
mock是一個模擬數據生成器,旨在幫助前端獨立於後端進行開發,幫助編寫單元測試。mock有如下功能
根據數據模板生成模板數據
模擬ajax請求,生成請求數據
基於html模板生成模擬數據
下載安裝
npm install mockjs
//使用mock
var Mock = require('mockjs');
var mcok = Mock.mock({
...
})
mock的語法
mock的語法規範包含兩層規範
數據模板 (DTD)
數據佔位符 (DPD)
數據模板DTD
末班規則:‘name|rule’:value
name:屬性名
rule:屬性規則
value:屬性值
屬性名和規則之間用|隔開,規則是可以選的。
一共七個rule
‘name|mix-max’:value
'name|count':value
'name|mix-max.dmix-dmax':value
'name|min-max.dcount':value
'name|count.dmin-dmax':value
'name|count.dcount':value
'name|+step':value
生成規則需要根據屬性值的類型才能確定
屬性值可以含有@佔位符
屬性值還可以指定最終值的初始值和類型
屬性值是String
var data = Mock.mock({
'name1|1-3':'a', //重複生成1到3個a
'name2|2':'b' //生成bb
})
屬性值是Number
var data = Mock.mock({
'name1|+1':4, //生成4,如果循環每次加1
‘name2|1-7':2, //生成一個數字,1到7之間
'name3|1-4.5-8':1
//生成一個小數,整數部分1到4,小數部分5到8位
})
注意第三個是小數點之後的數位範圍,另外其實屬性值是Number的時候,value沒什麼用。
屬性值是Boolean
var data = Mock.mock({
'name|1':true, //生成一個布爾值,各一半
'name1|1-3':true //1/4是true,3/4是false
})
屬性值是Object
var obj = {
a:1,
b:2,
c:3,
d:4
}
var data = Mock.mock({
'name|1-3':obj, //隨機從obj中尋找1到3個屬性,新對象
'name|2':obj //隨機從onj中找到兩個屬性,新對象
})
屬性值是Array
var arr = [1,2,3];
var data = Mock.mock({
'name1|1':arr, //從數組裏隨機取出1個值
'name2|2':arr, //數組重複count次,這裏count爲2
'name3|1-3':arr, //數組重複1到3次
})
屬性值是Function
var fun = function(x){
return x+10;
}
var data = Mock.mock({
'name':fun(10) //返回函數的返回值20
})
屬性值爲RegExp
根據正則表達式反向生成對應的字符串,用於生成自定義格式的字符串
var data = Mock.mock({
‘name1':/[a-z][A-Z]/,
'name2':/\d{1,3}/
})
會根據各自的正則表達式進行適配,並且隨機返回
數據佔位符DPD
關於佔位符,佔位符只是在屬性值是字符串的時候,在字符串裏佔個位置,並不會出現在最終的屬性值中。
佔位符的格式爲:
@佔位符
關於佔位符需要知道以下幾點
用@標識符標識後面的字符串是佔位符
佔位符的值是從Mock.Random方法中引用的
可以通過Mock.Random.extend()來擴展自定義佔位符
佔位符可以引用數據模板中的屬性
佔位符優先引用數據模板中的屬性
佔位符支持相對路徑和決定路徑
var data = Mock.mock({
name:{
name1:'@FIRST',
name2:'@LAST'
}
})
語法大概是這樣,random會重點分析的。
Mock.mock()
這是mock的核心方法,用於生成模擬數據,前邊的例子中我們都已經見識過了。
Mock.mock(rurl?,rtype?,template|function(opt))
rurl:ajax請求的地址
rtype:ajax請求的類型,如’GET','POST'
template:數據模板,就是之前那些個例子
function:生成相應數據的函數
具體的應用情況在下邊:
Mock.mock(template)
Mock.mock(rurl,template),模擬ajax,匹配接收到url的ajax請求,把template對應的數據返回返回
Mock.mock(rurl,function(opt)),模擬ajax,會把函數執行的結果作爲ajax回調返回
Mock.mock(rurl,rtype,template) 同上,只是對ajax的類型有要求
Mock.mock(rurl,rtype,function) 同上
Mock.setup(setting)
配置攔截ajax請求的行爲,支持的配置項有timeout。
Mock.setup({
timeout:200
})
Mock.setup({
timeout:'200-500
})
這個現在僅用於配置ajax請求,以後可能會擴展
Mock.valid(template,data)
這個函數用來判斷,數據模板和數據是否一樣,
Mock.toJSONShema(template)
var template = Mock.mock({
'name|1-3':5
})
var tjs = Mock.toJSONSchema(tempalte);
把template風格的模板轉成JSON Schema。具體的結果,自己看吧,不貼了。
接下來是最後一個方法
Mock.Random
這是一個工具類,用於生成各種類型的數據。
Mock.Random的方法在模板數據中被稱爲佔位符,之前說過的
用法示例:
var Random = Mock.Random;
var em1 = Mock.email();
var em2 = Mock.mock('@email');
var em3 = Mock.mock({
email:'@email'
})
Mock.Random提供的完成方法
Type | Method |
---|---|
Basic | boolean natural integer float character string date datename now |
Date | date datetime time now |
Image | image dataImage |
Color | color hex rgb rgba hsl |
Text | paragraph sentence word title cparagraph csentence cword ctitle |
Name | first last name cfirst clast cname |
Web | url domain email ip tld |
Address | area region city county zip |
Helper | capitalize upper lower pick shuffle |
Miscellaneous | guid id |
Basic
Random.boolean(min?max?current?)
隨機生成布爾值
var bool1 = Random.boolean(); //true false各一半
var bool2 = Random.boolean(1,2,false) //1/3的可能性是false 2/3是true
Random.natural(min?,max?)
隨機生成一個自然數,什麼叫自然數,就是大於等於0的
var natural1 = Random.natural(); //默認值最大爲 9007199254740992
var natural2 = Random.natural(4); //隨機出來的最小值是4
var natural3 = Random.natural(6,9);
Random.Integer(min?,max?)
生成一個隨機的整數,可以是負數。
var integer1 = Random.integer();
var integer2 = Random.integer(-10); //隨機最小值是-10
var integer3 = Random.integer(-10,20);
Random.float(min?,max?,dmin?,dmax?)
隨機生成一個小數浮點數,四個參數分別爲,整數部分最小值最大值,小數部分最小值最大值。
var float1 = Random.float();
var float2 = Random.float(3,8);
var float3 = Random.float(1,3,5,7)
Random.character(pool?)
隨機生成一個字符,pool的值可以是:
upper: 26個大寫字母
lower: 26個小寫字母
number: 0到9十個數字
sympol: "!@#$%^&*()[]"
var character1 = Random.character();
var character2 = Random.character('lower');
var character3 = Random.character('upper');
var character4 = Random.character('symbol');
Random.string(pool?,min?,max?)
隨機生成一個字符串,pool的值同上邊四個。
var str1 = Random.string(); //長度3到7位
var str2 = Random.string(5); //長度5位
var str3 = Random.string('lower',7); //長度7位,小寫
var str4 = Random.string(4,6); //長度4到
var str5 = Random.string('新的字符串會從這裏選擇4到5位',4,6); //從第一個參數裏選擇4到5位
Random.range(start?,stop,step?)
返回一個整型數組
start,可選,數組起始值,閉區間
stop,必選,數據結束值,開區間
step,可選,數據每一項間隔值
var range1 = Random.range(10); //[0,1,2,3,4,5,6,7,8,9]
var range2 = Random.range(14,20); //[14,15,16,17,18,19]
var range3 = Random.range(3,13,2); //[3,5,7,9,11]
Date
Random.date(format?)
返回一個隨機日期的字符串
format的格式是‘yyyy-MM-dd’,可以隨機組合
var date1 = Random.date();
var date2 = Random.date('yyyy-MM-dd');
var date3 = Random.date('y-M-d');
var date4 = Random.date('yy-MM-dd');
Random.time(format?)
返回時間字符串
format的格式是‘HH-mm-ss’
var time1 = Random.time();
var time2 = Random.time('HH-mm-ss');
var time3 = Random.time('J-m-s');
Random.datetime(format?)
上邊兩個的結合版
var dt1 = Random.datetime();
var dt2 = Random.datetime('yyyy-MM-dd HH-mm-ss');
Random.now(unit?,format?)
返回當前時間的字符串
Image
一般情況下,使用dataImage更好,因爲更簡單,但是如果要生成高度自定義的圖片,則最好用image。另外,dataImage生成的是base64編碼
Random.image(size?,background?,foreground?,format?text?)
size 圖片寬高,格式是'寬x高'
background:圖片的背景色,默認值#000000
foreground:圖片的文字前景色,默認#FFFFFF
format:圖片的格式,默認'.png'
text:圖片上的默認文字,默認值爲參數size
其中size的取值範圍是
[
'300x250', '250x250', '240x400', '336x280',
'180x150', '720x300', '468x60', '234x60',
'88x31', '120x90', '120x60', '120x240',
'125x125', '728x90', '160x600', '120x600',
'300x600'
]
圖片的格式可以選擇.png .gif .jpg
var image1 = Random.image();
var image2 = Random.image('128x90');
var image3 = Random.image('120x660','#ccc'); //前景色#ccc
var image4 = Random.image('226x280','#eee','第三個參數是文字不是前景色');
var image5 = Random.image('66x31','#ddd','#123456','四個參數的時候第三個參數是前景色');
var image6 = Random.image('240x400','#333','#1483dc','.gif','全部參數的情況下');
Random.dataImage(size?,text?)
返回一段base64編碼,兩個參數同上。
var di1 = Random.dataImage();
var di2 = Random.datImage('300x600');
var di3 = Random.dataImage('180x150','hahahaha');
Color
Random.color()
有好幾個相關的方法
var color = Random.color(); 格式'#rrggbb'
var hex = Random.hex(); //好像和color沒什麼不同
var rgb = Random.rgb(); //生成格式如rgb(133,233,244)
var rgba = Random.rgba(); //生成個事如rgba(111,222,233,0.5)
var hsl = Random.hsl(); //生成格式(345,82,71)
Text
Random.paragraph(in?,max?,len?)
隨機生成一段文本,
var para1 = Random.paragraph(); //隨機生成一短文本,範圍3到7
var para2 = Random.paragraph(10); //隨機生成長度是10的文本
var para3 = Random.paragraph(9,12); //隨機生成9到11位長度的文本
Random.sentence(min?,max?,len?)
隨機生成一個句子,第一個單詞的首字母大寫
var sen1 = Random.sentence(); //默認長度12到18
var sen2 = Random.sentence(10); //隨機生成一個單詞個數爲10的句子
var sen3 = Random.sentence(5,10); //隨機生成一個5到9單詞個數的句子
Random.word(min?,max?,len?)
隨機生成一個單詞
var word1 = Random.word(); //默認長度3到10
var word2 = Random.word(7); //隨機生成長度是7的單詞
var word3 = Random.word(2,12); //隨機生成2到11位長度的單詞
Random.title(min?,max?,len?)
隨機生成一段標題,每個單詞的首字母大寫
var title1 = Random.title(); //title中的單詞個數
var title2 = Random.title(6); //title六個單詞
var title3 = Random.title(7,12); //title7到11個單詞
另外還有四個方法,四個方法前邊加一個
c,Random.cparagraph, 返回中文文本
Random.csentence, 返回中文句子
Random.cword, 返回中文文字
Random.ctitle. 返回中文標題
Name
var first = Random.first() 隨機生成常見英文名
var last = Random.last() 隨機生成常見英文姓
var name = Random.name() 隨機生成常見英文姓名
var cfirst = Random.cfirst() 隨機生成常見中文姓
var clast = Random.clast() 隨機生成常見中文名
var cname = Random.cname() 隨機生成一個常見中文姓名
Web
Random.url(protocol?,host?)
隨機生成一個url
protocol可選參數,表示網絡協議,如http。
host表示域名和端口號
var url1 = Random.url();
var url2 = Random.url('http');
var url3 = Random.url('http','58.com');
Random.protocol()
隨機生成一個域名
var protocol = Random.protocol()
protocol可以選的值,'http'、'ftp'、'gopher'、'mailto'、'mid'、'cid'、'news'、'nntp'、'prospero'、'telnet'、'rlogin'、'tn3270'、'wais'。
Random.domin()
隨機生成一個域名
Random.tld()
隨機生成一個頂級域名
var domain = Random.domain()
var tld = Random.tld()
Random.email(domain?)
隨機生成一個email地址,domain表示域名
var email1 = Random.email();
var email2 = Random.email('58.com') //生成[email protected]
Random.ip()
隨機生成一個ip地址
var ip = Random.ip()
Address
Random.region()
隨機生成一箇中國的大區,如華北,西南
var region = Random.region();
Random.province()
隨機生成一箇中國省直轄市自治區特別行政區
var province = Random.province()
Random.city(prefix?)
隨機生成一箇中國城市,prefix布爾值,表示是否標註所在省
var city1 = Random.city();
var city2 = Random.city(ture);
Random.country(prefix?)
隨機生成一箇中國縣,prefix布爾值,表示是否顯示所屬的省市
var county1 = Random.county();
var county2 = Random.county(ture);
Random.zip()
隨機生成一個六位數郵政編碼
var zip = Random.zip();
Helper
Random.capitlize(word)
把第一個字母轉成大寫
var capitalize = Random.capitalize('hello')
Random.upper(str)
轉成大寫
var upper = Random.upper('zhang');
Random.lower(str)
轉成小寫
var lower = Random.lower('JINGWEI');
Random.pick(arr)
從數組中隨機選取一個元素
var arr = [1,4,5,6,7,8];
var pick = Random.pick(arr);
Random.shuffle(arr);
打亂數組的順序並返回
var arr = [1,2,3,4,6];
var shuffle = Random.shuffle(arr);
Miscellaneous
Random.guid()
隨機生成一個GUID
Random.id()
隨機生成一個18位身份證id
var guid = Random.guid();
var id = Random.id();