摘要：為了使得前端減輕對(duì)后端的依賴，在后端功能尚未實(shí)現(xiàn)的情況下保證前端進(jìn)度的開發(fā)，我們一般會(huì)手動(dòng)進(jìn)行一些數(shù)據(jù)模擬，即假數(shù)據(jù)。覆蓋攔截請(qǐng)求，目前內(nèi)置支持。

有時(shí)候我們開發(fā)一般會(huì)分為前后端，前端負(fù)責(zé)數(shù)據(jù)顯示和UI交互，后端負(fù)責(zé)數(shù)據(jù)IO等等。因此造成前端對(duì)后端有嚴(yán)重依賴，使得前端的開發(fā)進(jìn)度普遍滯后于后端。

為了使得前端減輕對(duì)后端的依賴，在后端功能尚未實(shí)現(xiàn)的情況下保證前端進(jìn)度的開發(fā)，我們一般會(huì)手動(dòng)進(jìn)行一些數(shù)據(jù)模擬，即假數(shù)據(jù)。然而編寫這些假數(shù)據(jù)又是一個(gè)及其消耗時(shí)間、精力的工作；在測(cè)試中，由于假數(shù)據(jù)是手工編寫的，測(cè)試用例覆蓋率低，難以真正進(jìn)行有效測(cè)試。

以上問題的痛點(diǎn)是：

前端依賴后端，工作難以開展

假數(shù)據(jù)編寫工作量大、覆蓋率低

針對(duì)以上痛點(diǎn)，Mock的需求和解決方案是：

不依賴后端：模擬后端，接受前端請(qǐng)求

自動(dòng)生成假數(shù)據(jù)：數(shù)據(jù)類型多樣、覆蓋率高

系統(tǒng)耦合：低耦合，當(dāng)后端真正上線，可以立即替換

引用Mock.js文檔的一段話：

Mock.js 是一款模擬數(shù)據(jù)生成器，旨在幫助前端攻城師獨(dú)立于后端進(jìn)行開發(fā)，幫助編寫單元測(cè)試。提供了以下模擬功能：

根據(jù)數(shù)據(jù)模板生成模擬數(shù)據(jù)
模擬 Ajax 請(qǐng)求，生成并返回模擬數(shù)據(jù)
基于 HTML 模板生成模擬數(shù)據(jù)

Mock這種想法在大部分語言都有具體實(shí)現(xiàn)的工具包，此處只介紹JavaScript上的使用。一下例子大部分是從Mock.js中來，請(qǐng)查看具體文檔。

HTML中：
Node.js中：npm install mockjs

// 使用 Mock，根據(jù)數(shù)據(jù)模板生成模擬數(shù)據(jù)。
var data = Mock.mock({
    "list|1-10": [{
        "id|+1": 1
    }]
});
$("
").text(JSON.stringify(data, null, 4))
    .appendTo("body")
結(jié)果
{
"list": [
    {
        "id": 1
    },
    {
        "id": 2
    },
    {
        "id": 3
    }
    ]
}

Mock.js 的語法規(guī)范（可參考使用Mock.js進(jìn)行獨(dú)立于后端的前端開發(fā)，我覺得他總結(jié)的挺好的）包括兩部分：
數(shù)據(jù)模板定義（Data Temaplte Definition，DTD）
數(shù)據(jù)占位符定義（Data Placeholder Definition，DPD）
數(shù)據(jù)模板定義參數(shù)的含義和默認(rèn)值如下所示：
數(shù)據(jù)模板中的每個(gè)屬性由 3 部分構(gòu)成，以 "data|1-10":[{}] 為例：

屬性名：例如 data。
參數(shù)：指示生成數(shù)據(jù)的規(guī)則。例如 |1-10，指示生成的數(shù)組中含有 1 至 10 個(gè)元素。
屬性值：表示初始值、占位符、類型。例如 [{}]，表示屬性值一個(gè)數(shù)組，數(shù)組中的元素是 {}。屬性值中含有占位符時(shí)，將被替換為對(duì)應(yīng)的隨機(jī)數(shù)據(jù)，例如 "email": "@EMAIL"，"@EMAIL"將被替換為隨機(jī)生成的郵件地址。

參數(shù)和屬性值部分的語法規(guī)范和示例如下所示：
"data|1-10":[{}] 構(gòu)造一個(gè)數(shù)組，含有 1-10 個(gè)元素
"data|1":[item, item, item] 從數(shù)組中隨機(jī)挑選一個(gè)元素做為屬性值
"id|+1": 1 屬性 id 值自動(dòng)加一，初始值為 1
"grade|1-100": 1 生成一個(gè) 1-100 之間的整數(shù)
"float|1-10.1-10": 1 生成一個(gè)浮點(diǎn)數(shù)，整數(shù)部分的范圍是 1-10，保留小數(shù)點(diǎn)后 1-10 位小數(shù)
"star|1-10": "★" 生成一個(gè)字符串，重復(fù) 1-10 次 "★"
"repeat|10": "A" 生成一個(gè)字符串，重復(fù) 10 次 "A"
"published|1": false 隨機(jī)生成一個(gè)布爾值
"email": "@EMAIL" 隨即生成一個(gè) Email
"date": "@DATE" 隨即生成一段日期字符串，默認(rèn)格式為 yyyy-MM-dd
"time": "@TIME" 隨機(jī)生成一段時(shí)間字符串，默認(rèn)格式為 HH:mm:ss
"datetime": "@DATETIME" 隨機(jī)生成一段時(shí)間字符串，默認(rèn)格式為 yyyy-MM-dd HH:mm:ss
處理請(qǐng)求
Mock.mock( rurl?, rtype?, template|function(options) )
根據(jù)數(shù)據(jù)模板生成模擬數(shù)據(jù)。
參數(shù)的含義和默認(rèn)值如下所示：

參數(shù) rurl：可選。表示需要攔截的 URL，可以是 URL 字符串或 URL 正則。例如 //domain/list.json/、"/domian/list.json"。
參數(shù) rtype：可選。表示需要攔截的 Ajax 請(qǐng)求類型。例如 GET、POST、PUT、DELETE 等。
參數(shù) template：可選。表示數(shù)據(jù)模板，可以是對(duì)象或字符串。例如 { "data|1-10":[{}] }、"@EMAIL"。
參數(shù) function(options)：可選。表示用于生成響應(yīng)數(shù)據(jù)的函數(shù)。
參數(shù) options：指向本次請(qǐng)求的 Ajax 選項(xiàng)集。

Mock.mockjax(library)
覆蓋（攔截） Ajax 請(qǐng)求，目前內(nèi)置支持 jQuery、Zepto、KISSY。
對(duì) jQuery Ajax 請(qǐng)求的攔截和響應(yīng)，通過覆蓋前置過濾器、選項(xiàng) dataFilter 以及數(shù)據(jù)轉(zhuǎn)換器實(shí)現(xiàn)，實(shí)現(xiàn)代碼請(qǐng)問這里。
對(duì) KISSY Ajax 請(qǐng)求的攔截和響應(yīng)，則通過粗魯?shù)馗采w KISSY.io(options) 實(shí)現(xiàn)，實(shí)現(xiàn)代碼請(qǐng)問這里。
因?yàn)榈谌龓?Ajax 的實(shí)現(xiàn)方式不盡相同，故目前只內(nèi)置支持了實(shí)際開發(fā)中（本人和所服務(wù)的阿里） 常用的 jQuery 、Zepto KISSY。如果需要攔截其他第三方庫的 Ajax 請(qǐng)求，可參考對(duì) jQuery 、Zepto、 KISSY 的實(shí)現(xiàn)，覆蓋 Mock.mockjax(library)。
例子
// Mock.mock(rurl, template)
Mock.mock(/.json/, {
    "list|1-10": [{
            "id|+1": 1,
            "email": "@EMAIL"
        }
    ]
})
$.ajax({
    url: "data.json",
    dataType: "json"
}).done(function(data, status, jqXHR){
    $("
").text(JSON.stringify(data, null, 4))
        .appendTo("body")
})
參考資料
github文檔
Mock.js
使用Mock.js進(jìn)行獨(dú)立于后端的前端開發(fā)