題目：前后端分離－獨(dú)立于后端的前端開(kāi)發(fā)
簡(jiǎn)介：如何構(gòu)建 Web 前端 Mock Server
前后端分離
真實(shí)數(shù)據(jù)模擬
接口測(cè)試
前后端分離
讓前端攻城師獨(dú)立于后端進(jìn)行開(kāi)發(fā)。 增加單元測(cè)試的真實(shí)性
通過(guò)隨機(jī)數(shù)據(jù)，模擬各種場(chǎng)景。 開(kāi)發(fā)無(wú)侵入
不需要修改既有代碼，就可以攔截 Ajax 請(qǐng)求坐昙，返回模擬的響應(yīng)數(shù)據(jù)杭棵。 用法簡(jiǎn)單
符合直覺(jué)的接口客年。 數(shù)據(jù)類型豐富
支持生成隨機(jī)的文本坊罢、數(shù)字烤黍、布爾值知市、日期傻盟、郵箱、鏈接嫂丙、圖片娘赴、顏色等。 方便擴(kuò)展
- 相對(duì)于其他同類的框架的實(shí)現(xiàn)跟啤，mock.js超出了我的意料诽表。
- 基于 數(shù)據(jù)模板 生成模擬數(shù)據(jù)。
- 基于 HTML模板 生成模擬數(shù)據(jù)隅肥。
- 攔截并模擬 ajax 請(qǐng)求竿奏。
- 是的，mock.js只做上述的幾件事腥放，但做的足夠出色泛啸。
解決的問(wèn)題
開(kāi)發(fā)時(shí)，后端還沒(méi)完成數(shù)據(jù)輸出秃症，前端只好寫靜態(tài)模擬數(shù)據(jù)。 - 數(shù)據(jù)太長(zhǎng)了种柑，將數(shù)據(jù)寫在js文件里，完成后挨個(gè)改url赔蒲。
- 某些邏輯復(fù)雜的代碼，加入或去除模擬數(shù)據(jù)時(shí)得小心翼翼良漱。
- 想要盡可能還原真實(shí)的數(shù)據(jù)舞虱，要么編寫更多代碼母市，要么手動(dòng)修改模擬數(shù)據(jù)矾兜。
- 特殊的格式患久，例如IP,隨機(jī)數(shù)椅寺，圖片，地址蒋失，需要去收集返帕。
- 超爛的破網(wǎng)速…
- …
配置模擬數(shù)據(jù)：
Mock.mock('http://g.cn', {
'name' : '@name',
'age|1-100': 100,
'color' : '@color'
});
發(fā)送Ajax請(qǐng)求：
$.ajax({
url: 'http://g.cn',
dataType:'json'
}).done(function(data, status, xhr){
console.log(
JSON.stringify(data, null, 4)
)
})篙挽；
返回?cái)?shù)據(jù)：
// 結(jié)果1
{
"name": "Elizabeth Hall",
"age": 91,
"color": "#0e64ea"
}
// 結(jié)果2
{
"name": "Michael Taylor",
"age": 61,
"color": "#081086"
}
語(yǔ)法
Mock.js 的語(yǔ)法規(guī)范包括兩部分：
- 數(shù)據(jù)模板定義（Data Temaplte Definition，DTD）
- 數(shù)據(jù)占位符定義（Data Placeholder Definition链韭，DPD）
數(shù)據(jù)模板定義 DTD
數(shù)據(jù)模板中的每個(gè)屬性由 3 部分構(gòu)成：屬性名、生成規(guī)則敞峭、屬性值：
// 屬性名 name
// 生成規(guī)則 rule
// 屬性值 value
'name|rule': value
注意：
屬性名 和 生成規(guī)則 之間用 | 分隔。
生成規(guī)則 是可選的旋讹。
-
生成規(guī)則 有 7 種格式：
- 'name|min-max': value
- 'name|count': value
- 'name|min-max.dmin-dmax': value
- 'name|min-max.dcount': value
- 'name|count.dmin-dmax': value
- 'name|count.dcount': value
- 'name|+step': value
生成規(guī)則 的 含義 需要依賴 屬性值 才能確定。
屬性值 中可以含有 @占位符沉迹。
屬性值 還指定了最終值的初始值和類型。
生成規(guī)則和示例：
屬性值是字符串 String
'name|min-max': 'value' 通過(guò)重復(fù) 'value' 生成一個(gè)字符串胚股，重復(fù)次數(shù)大于等于 min，小于等于 max缨伊。
'name|count': 'value' 通過(guò)重復(fù) 'value' 生成一個(gè)字符串进宝，重復(fù)次數(shù)等于 count。
屬性值是數(shù)字 Number
'name|+1': 100 屬性值自動(dòng)加 1党晋，初始值為 100
'name|1-100': 100 生成一個(gè)大于等于 1、小于等于 100 的整數(shù)灾而，屬性值 100 只用來(lái)確定類型扳剿。
'name|1-100.1-10': 100 生成一個(gè)浮點(diǎn)數(shù)旁趟，整數(shù)部分大于等于 1庇绽、小于等于 100，小數(shù)部分保留 1 到 10 位耕餐。
{'number1|1-100.1-10': 1,'number2|123.1-10': 1,'number3|123.3': 1,'number4|123.10': 1.123}// =>{"number1": 12.92,"number2": 123.51,"number3": 123.777,"number4": 123.1231091814}屬性值是布爾型 Boolean
'name|1': value 隨機(jī)生成一個(gè)布爾值辟狈，值為 true 的概率是 1/2，值為 false 的概率是 1/2。
'name|min-max': value 隨機(jī)生成一個(gè)布爾值桩砰，值為 value 的概率是 min / (min + max)释簿，值為 !value 的概率是 max / (min + max)。
屬性值是對(duì)象 Object
'name|min-max': {} 從屬性值 {} 中隨機(jī)選取 min 到 max 個(gè)屬性煮纵。
'name|count': {} 從屬性值 {} 中隨機(jī)選取 count 個(gè)屬性偏螺。
屬性值是數(shù)組 Array
'name|1': [{}, {} ...] 從屬性值 [{}, {} ...] 中隨機(jī)選取 1 個(gè)元素，作為最終值套像。
'name|min-max': [{}, {} ...] 通過(guò)重復(fù)屬性值 [{}, {} ...] 生成一個(gè)新數(shù)組酿联，重復(fù)次數(shù)大于等于 min夺巩，小于等于 max。
'name|count': [{}, {} ...] 通過(guò)重復(fù)屬性值 [{}, {} ...] 生成一個(gè)新數(shù)組喳张，重復(fù)次數(shù)為 count美澳。
屬性值是數(shù)組 Function
'name': function(){} 執(zhí)行函數(shù) function(){}，取其返回值作為最終的屬性值制跟，上下文為 'name' 所在的對(duì)象舅桩。
數(shù)據(jù)占位符定義 DPD
占位符 只是在屬性值字符串中占個(gè)位置雨膨，并不出現(xiàn)在最終的屬性值中。占位符 的格式為：
@占位符
@占位符(參數(shù) [, 參數(shù)])
注意：用 @ 來(lái)標(biāo)識(shí)其后的字符串是 占位符歼指。
占位符 引用的是 Mock.Random 中的方法甥雕。
通過(guò) Mock.Random.extend() 來(lái)擴(kuò)展自定義占位符。
占位符 也可以引用 數(shù)據(jù)模板 中的屬性社露。
占位符 會(huì)優(yōu)先引用 數(shù)據(jù)模板 中的屬性
{name: {
first: '@FIRST',
middle: '@FIRST',
last: '@LAST',
full: '@first @middle @last'
}}
// =>
{
"name": {
"first": "Charles",
"middle": "Brenda",
"last": "Lopez",
"full": "Charles Brenda Lopez"
}}
常用方法
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寇钉。
Mock.Random
Mock.Random 是一個(gè)工具類，用于生成各種隨機(jī)數(shù)據(jù)扫倡。Mock.Random 的方法在數(shù)據(jù)模板中稱為“占位符”，引用格式為 @占位符(參數(shù) [, 參數(shù)]) 油够。
Mock.tpl(input, options, helpers, partials)
基于 Handlebars征懈、Mustache 的 HTML 模板生成模擬數(shù)據(jù)揩悄。
