最近重構公司專案，為了讓前端獨立於後端進行開發，王二嘗試使用了 Mock.js
一、有什麼用？
Mock.js 可以生成隨機資料，攔截 Ajax 請求
二、如何安裝？
1、在前端工程中，我們可以通過如下命令安裝
npm install mockjs
複製程式碼2、如果想在瀏覽器中測試，可以在自己的html中引用如下程式碼：
<script src="http://mockjs.com/dist/mock.js"></script>
複製程式碼三、為什麼能攔截 Ajax 請求
對這個問題感興趣的同學可以參考這個連結
四、生成隨機資料
Mock.js 的語法規範包括兩部分：
- 資料模板定義（Data Temaplte Definition，DTD）
- 資料佔位符定義（Data Placeholder Definition，DPD）
我們們不玩這些虛的，先看一些簡單的例子：
說明：如果在自己的html中引用如下程式碼：<script src="http://mockjs.com/dist/mock.js"></script>，以下測試程式碼可以直接執行
1、將一個字串隨機重複1到10遍
Mock.mock({
"string|1-10": "★"
})
// {
// "string": "★★★"
// }
複製程式碼2、將一個字串隨機重複5遍
Mock.mock({
"string|5": "★"
})
// {
// "string": "★★★★★"
// }
複製程式碼3、 隨機生成一個布林值，值為 true 的概率是 1/2，值為 false 的概率是 1/2
Mock.mock({
"boolean|1": true
})
// {
// "boolean": true
// }
複製程式碼4、從屬性值 {} 中隨機選取 2 個屬性
Mock.mock({
"object|2": {
"310000": "上海市",
"320000": "江蘇省",
"330000": "浙江省",
"340000": "安徽省"
}
})
// {
// "object": {
// "310000": "上海市",
// "330000": "浙江省"
// }
// }
複製程式碼5、從屬性值 {} 中隨機選取 2 到 4 個屬性
Mock.mock({
"object|2-4": {
"110000": "北京市",
"120000": "天津市",
"130000": "河北省",
"140000": "山西省"
}
})
// {
// "object": {
// "110000": "北京市",
// "120000": "天津市",
// "130000": "河北省",
// "140000": "山西省"
// }
// }
複製程式碼6、從屬性值 [{}, {} ...] 中隨機選取 1 個元素，作為最終值
Mock.mock({
"array|1": [
{title:"AMD"},
{title:"CMD"},
{title:"UMD"},
]
})
// {
// "array": {
// title:"CMD"
// }
// }
複製程式碼7、通過重複屬性值 [{}, {} ...] 生成一個新陣列，重複次數大於等於 2，小於等於 3
Mock.mock({
"array|2-3": [
{title:"AMD"},
{title:"CMD"},
{title:"UMD"},
]
})
// {
// "array": [
// {
// "title": "AMD"
// },
// {
// "title": "CMD"
// },
// {
// "title": "UMD"
// },
// {
// "title": "AMD"
// },
// {
// "title": "CMD"
// },
// {
// "title": "UMD"
// }
// ]
// }
複製程式碼8、傳入一個正則，返回符合正則的字串
Mock.mock({
'regexp': /[a-z][A-Z][0-9]/
})
// {
// "regexp": "uD2"
// }
複製程式碼9、Mock物件中有一個 Random 方法，利用 Random 方法我們可以做很多事情：
var Random = Mock.Random
Random.integer(20,100) //隨機返回20到100的數字
Random.float(60, 100, 3, 5) //隨機返回60到100的帶有3到5位小數的數字
Random.string() //隨機返回一個字串
Random.string(5) //隨機返回一個長度為5的字串
Random.string(7, 10)//隨機返回一個長度為5到7位的字串
Random.date()//隨機返回一個日期
Random.date('yyyy-MM-dd')//隨機返回一個格式化日期
Random.image()//隨機返回一張圖片
Random.image('200x100')//隨機返回一張帶尺寸的圖片
Random.image('200x100', '#FF6600')//隨機返回一張帶尺寸和顏色的圖片
Random.paragraph()//隨機返回一段文字
Random.cparagraph()//隨機返回一段中文文字
Random.cparagraph(1, 3)//隨機返回1到3段中文文字
Random.csentence()//隨機返回一句中文
Random.ctitle()//隨機返回一箇中文標題
複製程式碼關於其更多的用法，感興趣的同學可以參考官方示例程式碼；
五、攔截 ajax 請求的程式碼細節
以jQuery為例：
Mock.mock('http://test/api', {
'name' : '[@name](/user/name)()',
'age|1-100': 100,
'color' : '[@color](/user/color)'
});
$.ajax({
url: 'http://test/api',
success: function(data){
console.log(JSON.stringify(data, null, 4)
)}
})
// {
// "name": "Elizabeth Hall",
// "age": 91,
// "color": "#0e64ea"
// }
複製程式碼語法如下：Mock.mock( rurl, template ),其中的引數 rurl 還可以傳入正規表示式。
關於其更多的用法，感興趣的同學可以參考官方文件；
六、王二遇到的問題
有了以上的各種方法，再加上巢狀，可以滿足絕大多數我們想要的資料格式。但是因為使用姿勢不正確，王二也遇到了一點小小的的問題，
例如如下程式碼：
Mock.mock({
'list|2-10': [{
'id': Random.integer(20,100),
'name':Random.ctitle(),
'date':Random.date("yyyy-MM-dd")
}]
});
// {
// "list": [
// {
// "id": 57,
// "name": "邊且反認",
// "date": "1989-08-12"
// },
// {
// "id": 57,
// "name": "邊且反認",
// "date": "1989-08-12"
// },
// {
// "id": 57,
// "name": "邊且反認",
// "date": "1989-08-12"
// }
// ]
// }
複製程式碼王二原本的目的是想在 list 裡返回資料不同的陣列,但是用以上的寫法陣列裡每個物件的資料都一樣。
經過查閱文件，發現在 Mock 模板裡屬性的值可以是 Function,於是修改如下：
Mock.mock({
'list|2-10': [{
'id': ()=>Random.integer(20,100),
'name': ()=>Random.ctitle(),
'date':()=>Random.date("yyyy-MM-dd")
}]
});
// {
// "list": [
// {
// "id": 74,
// "name": "但稱青氣",
// "date": "2004-10-31"
// },
// {
// "id": 32,
// "name": "三六屬集",
// "date": "2008-06-28"
// },
// {
// "id": 28,
// "name": "裝造始",
// "date": "1975-04-29"
// }
// ]
// }
複製程式碼這樣就符合王二的預期了。
七、參考文章
Mock官方網站 Mock官方示例程式碼 Mock官方文件 'think2011'的部落格