資訊專欄INFORMATION COLUMN
摘要：為了使得前端減輕對后端的依賴，在后端功能尚未實現(xiàn)的情況下保證前端進度的開發(fā)，我們一般會手動進行一些數據模擬，即假數據。覆蓋攔截請求，目前內置支持。
序
有時候我們開發(fā)一般會分為前后端，前端負責數據顯示和UI交互，后端負責數據IO等等。因此造成前端對后端有嚴重依賴，使得前端的開發(fā)進度普遍滯后于后端。
為了使得前端減輕對后端的依賴，在后端功能尚未實現(xiàn)的情況下保證前端進度的開發(fā)，我們一般會手動進行一些數據模擬，即假數據。然而編寫這些假數據又是一個及其消耗時間、精力的工作；在測試中，由于假數據是手工編寫的，測試用例覆蓋率低，難以真正進行有效測試。
Mock以上問題的痛點是：
前端依賴后端，工作難以開展
假數據編寫工作量大、覆蓋率低
針對以上痛點，Mock的需求和解決方案是：
不依賴后端：模擬后端，接受前端請求
自動生成假數據：數據類型多樣、覆蓋率高
系統(tǒng)耦合：低耦合，當后端真正上線，可以立即替換
引用Mock.js文檔的一段話：
具體使用Mock.js 是一款模擬數據生成器，旨在幫助前端攻城師獨立于后端進行開發(fā)，幫助編寫單元測試。提供了以下模擬功能：
根據數據模板生成模擬數據
模擬 Ajax 請求，生成并返回模擬數據
基于 HTML 模板生成模擬數據
Mock這種想法在大部分語言都有具體實現(xiàn)的工具包，此處只介紹JavaScript上的使用。一下例子大部分是從Mock.js中來，請查看具體文檔。
HTML中：
Node.js中：npm install mockjs
// 使用 Mock，根據數據模板生成模擬數據。
var data = Mock.mock({
"list|1-10": [{
"id|+1": 1
}]
});
$("").text(JSON.stringify(data, null, 4))
.appendTo("body")
結果
{
"list": [
{
"id": 1
},
{
"id": 2
},
{
"id": 3
}
]
}
Mock.js 的語法規(guī)范（可參考使用Mock.js進行獨立于后端的前端開發(fā)，我覺得他總結的挺好的）包括兩部分：
數據模板定義（Data Temaplte Definition，DTD）
數據占位符定義（Data Placeholder Definition，DPD）
數據模板定義參數的含義和默認值如下所示：
數據模板中的每個屬性由 3 部分構成，以 "data|1-10":[{}] 為例：
屬性名：例如 data。
參數：指示生成數據的規(guī)則。例如 |1-10，指示生成的數組中含有 1 至 10 個元素。
屬性值：表示初始值、占位符、類型。例如 [{}]，表示屬性值一個數組，數組中的元素是 {}。屬性值中含有占位符時，將被替換為對應的隨機數據，例如 "email": "@EMAIL"，"@EMAIL"將被替換為隨機生成的郵件地址。
參數和屬性值部分的語法規(guī)范和示例如下所示：
"data|1-10":[{}] 構造一個數組，含有 1-10 個元素
"data|1":[item, item, item] 從數組中隨機挑選一個元素做為屬性值
"id|+1": 1 屬性 id 值自動加一，初始值為 1
"grade|1-100": 1 生成一個 1-100 之間的整數
"float|1-10.1-10": 1 生成一個浮點數，整數部分的范圍是 1-10，保留小數點后 1-10 位小數
"star|1-10": "★" 生成一個字符串，重復 1-10 次 "★"
"repeat|10": "A" 生成一個字符串，重復 10 次 "A"
"published|1": false 隨機生成一個布爾值
"email": "@EMAIL" 隨即生成一個 Email
"date": "@DATE" 隨即生成一段日期字符串，默認格式為 yyyy-MM-dd
"time": "@TIME" 隨機生成一段時間字符串，默認格式為 HH:mm:ss
"datetime": "@DATETIME" 隨機生成一段時間字符串，默認格式為 yyyy-MM-dd HH:mm:ss
處理請求
Mock.mock( rurl?, rtype?, template|function(options) )
根據數據模板生成模擬數據。
參數的含義和默認值如下所示：
參數 rurl：可選。表示需要攔截的 URL，可以是 URL 字符串或 URL 正則。例如 //domain/list.json/、"/domian/list.json"。
參數 rtype：可選。表示需要攔截的 Ajax 請求類型。例如 GET、POST、PUT、DELETE 等。
參數 template：可選。表示數據模板，可以是對象或字符串。例如 { "data|1-10":[{}] }、"@EMAIL"。
參數 function(options)：可選。表示用于生成響應數據的函數。
參數 options：指向本次請求的 Ajax 選項集。
Mock.mockjax(library)
覆蓋（攔截） Ajax 請求，目前內置支持 jQuery、Zepto、KISSY。
對 jQuery Ajax 請求的攔截和響應，通過覆蓋前置過濾器、選項 dataFilter 以及數據轉換器實現(xiàn)，實現(xiàn)代碼請問這里。
對 KISSY Ajax 請求的攔截和響應，則通過粗魯地覆蓋 KISSY.io(options) 實現(xiàn)，實現(xiàn)代碼請問這里。
因為第三庫 Ajax 的實現(xiàn)方式不盡相同，故目前只內置支持了實際開發(fā)中（本人和所服務的阿里） 常用的 jQuery 、Zepto KISSY。如果需要攔截其他第三方庫的 Ajax 請求，可參考對 jQuery 、Zepto、 KISSY 的實現(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進行獨立于后端的前端開發(fā)
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://m.hztianpu.com/yun/8793.html
摘要：為了使得前端減輕對后端的依賴，在后端功能尚未實現(xiàn)的情況下保證前端進度的開發(fā)，我們一般會手動進行一些數據模擬，即假數據。覆蓋攔截請求，目前內置支持。 序 有時候我們開發(fā)一般會分為前后端，前端負責數據顯示和UI交互，后端負責數據IO等等。因此造成前端對后端有嚴重依賴，使得前端的開發(fā)進度普遍滯后于后端。 為了使得前端減輕對后端的依賴，在后端功能尚未實現(xiàn)的情況下保證前端進度的開發(fā)，我們一般會手...
摘要：前后端的界限是按照瀏覽器和服務器的劃分。前后端彼此互不關聯(lián)。關于作者本文部分圖片段落參考文章實踐中的前后端分離。淘寶前后端分離實踐本文源碼詳見服務端代碼。 一、起源 （故事純屬虛構，如有雷同，純屬巧合）傳說在很久很久以前，我們有志之士有了個創(chuàng)業(yè)的想法，于是乎開始了自己的創(chuàng)業(yè)之夢，但是人手不足啊，于是乎所有角色老子一個人全包了： Roles: PM, DBA, RD, FED, Des...
摘要：前后端的界限是按照瀏覽器和服務器的劃分。前后端彼此互不關聯(lián)。關于作者本文部分圖片段落參考文章實踐中的前后端分離。淘寶前后端分離實踐本文源碼詳見服務端代碼。 一、起源 （故事純屬虛構，如有雷同，純屬巧合）傳說在很久很久以前，我們有志之士有了個創(chuàng)業(yè)的想法，于是乎開始了自己的創(chuàng)業(yè)之夢，但是人手不足啊，于是乎所有角色老子一個人全包了： Roles: PM, DBA, RD, FED, Des...
摘要：注意廣告警告廣告警告廣告警告在一個應用的開發(fā)周期中一般前端與后端都是并行開發(fā)的各自完成自己的開發(fā)工作后進行聯(lián)調聯(lián)調通過再進行提測發(fā)布開發(fā)過程中前端都會以后端提供的文檔作為標準模擬返回數據以確保在開發(fā)中就保證功能的完整性而關于如何更好的進行業(yè) 注意! 廣告警告! 廣告警告! 廣告警告! 在一個web應用的開發(fā)周期中, 一般前端與后端都是并行開發(fā)的, 各自完成自己的開發(fā)工作后進行聯(lián)調, 聯(lián)...
閱讀 5559·2021-09-22 15:50
閱讀 2080·2021-09-02 15:15
閱讀 1331·2019-08-29 12:49
閱讀 2687·2019-08-26 13:31
閱讀 3597·2019-08-26 12:09
閱讀 1355·2019-08-23 18:17
閱讀 2879·2019-08-23 17:56
閱讀 3081·2019-08-23 16:02
