在我們?nèi)粘ｉ_發(fā)中，雖然大多都是前后端分離的開發(fā)模式，但是還是會遇到一些前后端協(xié)調(diào)的問題。比如有時候前端頁面已經(jīng)開發(fā)好，后端接口卻還在開發(fā)中，而我們有些樣式又必須要有數(shù)據(jù)才能看效果，這時候該怎么辦呢？
通常情況下，我們的做法是自己手動造一些假數(shù)據(jù)，但是當(dāng)數(shù)據(jù)量大且需要考慮到各種極端情況時，這種自造假數(shù)據(jù)的方式顯然不是最好的解決方法。那么，我們能不能讓程序自己來隨機(jī)產(chǎn)生一些符合一定規(guī)則的數(shù)據(jù)呢？
答案當(dāng)然是肯定的。今天介紹的一款JS插件就是專門用來實(shí)現(xiàn)這個功能的，那就是 Mock.js，它可以用來批量模擬后端數(shù)據(jù)，并且可以按照我們自己設(shè)定的規(guī)則來隨機(jī)產(chǎn)生，非常強(qiáng)大和實(shí)用！
一、用法
Mock.js 有兩種定義規(guī)范，一種是數(shù)據(jù)模板定義，另一種是數(shù)據(jù)占位符定義。
1. 數(shù)據(jù)模板定義
'name|rule': value
其中，name為 屬性名，rule為 生成規(guī)則（可選），value為 屬性值。屬性名和生成規(guī)則之間用符號|隔開。
關(guān)于生成規(guī)則rule，我們可以結(jié)合 屬性值的數(shù)據(jù)類型 來看。
① 字符串
1）'name|min-max': string
通過重復(fù) string 生成一個字符串，重復(fù)次數(shù)大于等于 min，小于等于 max。例如：
// JS代碼
Mock.mock({
"string|1-10": "" // 重復(fù)n次，n為1~10
})
// 生成結(jié)果
{
"string": "" // 這個的個數(shù)是1-10之間（包括1和10）隨機(jī)的
}
2）'name|count': string
通過重復(fù) string 生成一個字符串，重復(fù)次數(shù)等于 count。例如：
// JS代碼
Mock.mock({
"string|3": "" // 重復(fù)3次
})
// 生成結(jié)果
{
"string": ""
}
② 數(shù)字
1）'name|+1': number
屬性值自動加 1，初始值為 number。例如：
// JS代碼
Mock.mock({
"number|+1": 202 // 初始值為202
})
// 生成結(jié)果
{
"number": 202
}
上面這樣的單個對象是看不出來自增效果的，但如果換成數(shù)組項的話就很清楚了，我們再看看這個例子：
// JS代碼
Mock.mock({
"list|6": [ // list為屬性名，因為屬性值為數(shù)組（后面會講到），所以6代表數(shù)組項個數(shù)
{
"number|+1": 1 // +1代表自增步長為1，屬性值1代表從1開始自增
}
]
})
// 生成結(jié)果
{
list: [
{"number": 1},
{"number": 2},
{"number": 3},
{"number": 4},
{"number": 5},
{"number": 6}
]
}
2）'name|min-max': number
生成一個大于等于 min、小于等于 max 的整數(shù)，屬性值 number 僅用于確定類型。例如：
// JS代碼
Mock.mock({
"number|1-100": 100 // 生成1~100之間的隨機(jī)數(shù)（包含1和100），屬性值100僅用于確定值類型為數(shù)字
})
// 生成結(jié)果
{
"number": 66 // 隨機(jī)數(shù)
}
