### 什么是Mock.js
Mock.js 是一款模擬數(shù)據(jù)生成器，旨在幫助前端攻城師獨立于后端進行開發(fā)，幫助編寫單元測試。
### Mock.js能做什么
- 根據(jù)數(shù)據(jù)模板生成模擬數(shù)據(jù)
- 基于 HTML 模板生成模擬數(shù)據(jù)
- 模擬 Ajax 請求，生成并返回模擬數(shù)據(jù)
### 為什么要用Mock.js
- 數(shù)據(jù)太長了，將數(shù)據(jù)寫在一個個json文件里，完成后挨個改url，接口多了表示很累
- 某些邏輯復(fù)雜的代碼，加入或去除模擬數(shù)據(jù)時得小心翼翼
- 處理數(shù)組數(shù)據(jù)的js代碼老是出現(xiàn)初始化的時候沒有清空數(shù)組，當數(shù)據(jù)更新了的時候就發(fā)現(xiàn)bug了，如果在開發(fā)時就能實現(xiàn)數(shù)據(jù)更新，這個問題或許會早點發(fā)現(xiàn)
- 想要盡可能還原真實的數(shù)據(jù)，要么編寫更多代碼，要么手動修改模擬數(shù)據(jù)
- 特殊的格式，例如IP,隨機數(shù)，圖片，地址，需要去收集。
- 分頁顯示、涉及請求傳參的數(shù)據(jù)和**部署版本與本地版本**的切換是個很痛的痛點。
### 如何正確使用Mock.js
#### 開始使用：
支持Node、bower、RequireJS、Sea.js
#### 核心方法 Mock.mock()
- 根據(jù)數(shù)據(jù)模板生成模擬數(shù)據(jù);
- 記錄數(shù)據(jù)模板;當攔截到匹配 rurl 的 Ajax 請求時，將根據(jù)數(shù)據(jù)模板 template 生成模擬數(shù)據(jù)，并作為響應(yīng)數(shù)據(jù)返回。
#### 語法規(guī)范：
- 數(shù)據(jù)模版定義規(guī)范：屬性名|生成規(guī)則：屬性值，如：‘value|10-100’ : 10
- 數(shù)據(jù)占位符定義規(guī)范:@占位符 或者 @占位符(參數(shù) [, 參數(shù)])，如：‘value’ : ‘@cname’
### 數(shù)據(jù)模版
定義了屬性值是String、Number、Boolean、Object、Array、Function和RegExp類型數(shù)據(jù)的數(shù)據(jù)格式
- 屬性名 和 生成規(guī)則 之間用豎線 | 分隔
- 生成規(guī)則 的 含義 需要依賴 屬性值的類型 才能確定
- 屬性值 中可以含有 @占位符
- 屬性值 還指定了最終值的初始值和類型
- 共有七種規(guī)則
1. 'name|min-max': value
2. 'name|count': value
3. 'name|min-max.dmin-dmax': value
4. 'name|min-max.dcount': value
5. 'name|count.dmin-dmax': value
6. 'name|count.dcount': value
7. 'name|+step': value
#### 數(shù)據(jù)占位符 Mock.random()
Mock.Random 是一個工具類，用于生成各種隨機數(shù)據(jù)，有如下十種，還可以自行擴展
#### 擴展方法：
~~~
Mock.Random.extend({
hyStaff:function(data) {
var hy = ['zhanning','banghui','xiaoqiao','shuman','decai','xieyang','yuheng','liwei']
return this.pick(hy)
}
})
var data = Mock.mock({
'hyfe|1-8':[{'name':'@hystaff'}]
})
console.log(JSON.stringify(data,null,2))
~~~
下面是基本方法
#### Basic
~~~
var data = Mock.mock({
'range':Mock.Random.range(10,20,2),//返回一個整型數(shù)組
'boolean':'@boolean',//返回一個隨機的布爾值
'natural':'@natural',//返回一個隨機的自然數(shù)（大于等于 0 的整數(shù)）
'integer':'@integer',//返回一個隨機的整數(shù)
'float':'@float',//返回一個隨機的浮點數(shù)
'character':'@character',//返回一個隨機字符,未傳參默認3-7位
'string':'@string'//返回一個隨機字符串
})
console.log(JSON.stringify(data,null,2))
~~~
#### Date
~~~
var data = Mock.mock({
'date':'@date',//返回一個隨機的日期字符串 默認值為 yyyy-MM-dd
'time':'@time',//指示生成的時間字符串的格式,默認值為 HH:mm:ss
'datetime':'@datetime',//返回一個隨機的日期和時間字符串,默認值為 yyyy-MM-dd HH:mm:ss
'now':'@now'//返回當前的日期和時間字符串
})
console.log(JSON.stringify(data,null,2))
~~~
#### Image
~~~
var data = Mock.mock({
'image':'@image',//生成一個隨機的圖片地址 --- 高度自定義
'dataImage':'@dataImage',//生成一段隨機的 Base64 圖片編碼 -- 更簡潔
'testImage':Mock.Random.dataImage('250x250','hydata')
})
console.log(JSON.stringify(data,null,2))
~~~
#### Color
~~~
var data = Mock.mock({
'color':'@color',
'hex':'@hex',
'rgb':'@rgb',
'rgba':'@rgba',
'hsl':'@hsl'
})
console.log(JSON.stringify(data,null,2))
~~~
#### Text
var data = Mock.mock({
'paragraph':'@paragraph',//隨機生成一段文本
'cparagraph':'@cparagraph',//隨機生成一段中文文本
'sentence':'@sentence',//隨機生成一個句子，第一個單詞的首字母大寫
'csentence':'@csentence',//隨機生成一段中文文本
'word':'@word',//隨機生成一個單詞
'cword':'@cword',//隨機生成一個漢字
'title':'@title',//隨機生成一句標題，其中每個單詞的首字母大寫
'ctitle':'@ctitle'//隨機生成一句中文標題
})
console.log(JSON.stringify(data,null,2))
#### Name
~~~
var data = Mock.mock({
'first':'@first',//隨機生成一個常見的英文名
'last':'@last',//隨機生成一個常見的英文姓
'name':'@name',//隨機生成一個常見的英文姓名
'cfirst':'@cfirst',//隨機生成一個常見的中文名
'clast':'@clast',//隨機生成一個常見的中文姓
'cname':'@cname'//隨機生成一個常見的中文姓名
})
console.log(JSON.stringify(data,null,2))
~~~
#### Web
~~~
var data = Mock.mock({
'url':'@url',//隨機生成一個 URL
'protocol':'@protocol',//URL協(xié)議：'http'、'ftp'、'gopher'、'mailto'、'mid'、'cid'、'news'、'nntp'、'prospero'、'telnet'、'rlogin'、'tn3270'、'wais'
'domain':'@domain',//隨機生成一個域名
'tld':'@tld',//隨機生成一個頂級域名
'email':'@email',//隨機生成一個郵件地址
'ip':'@ip'//隨機生成一個IP
})
console.log(JSON.stringify(data,null,2))
~~~
#### Address
~~~
var data = Mock.mock({
'region':'@region',//隨機生成一個（中國）大區(qū)
'province':'@province',//隨機生成一個（中國）省（或直轄市、自治區(qū)、特別行政區(qū)）
'city':'@city',//隨機生成一個（中國）市
'county':'@county',//隨機生成一個（中國）縣
'zip':'@zip'//隨機生成一個郵政編碼（六位數(shù)字）
})
console.log(JSON.stringify(data,null,2))
~~~
#### Helper
~~~
var data = Mock.mock({
'capitalize':Mock.Random.capitalize('hyfe'),//把字符串的第一個字母轉(zhuǎn)換為大寫
'upper':Mock.Random.upper('hyfe'),//把字符串轉(zhuǎn)換為大寫
'lower':Mock.Random.lower('hyfe'),//把字符串轉(zhuǎn)換為小寫
'pick':Mock.Random.pick([1,2,3,4,5,6]),//從數(shù)組中隨機選取一個元素，并返回
'shuffle':Mock.Random.shuffle([1,2,3,4,5,6])//打亂數(shù)組中元素的順序，并返回
})
console.log(JSON.stringify(data,null,2))
~~~
#### Miscellaneous
~~~
var data = Mock.mock({
'guid':'@guid',//隨機生成一個 GUID,啊？GUID?
'id':'@id',//隨機生成一個 18 位身份證
'increment':'@increment'//生成一個全局的自增整數(shù)
})
console.log(JSON.stringify(data,null,2))
~~~
### Mock.valid()
校驗真實數(shù)據(jù) data 是否與數(shù)據(jù)模板 template 匹配
~~~
var template = {
'value|2-4':[
{
'name':'@cname'
}
]
}
var data = {
value:[
{
name:'周杰倫'
}
]
}
console.log(JSON.stringify(Mock.valid(template,data),null,2))
~~~
### 經(jīng)驗總結(jié)
總結(jié)使用中遇到的問題和解決方案
- 解決模擬websocket實時推送數(shù)據(jù)，采用定時器發(fā)ajax請求，但是出現(xiàn)了每次請求返回的數(shù)據(jù)都是一樣的的問題，具體問題及解決辦法直接上代碼：
~~~
//API接口部分
var isOnline = false
// http host
var onlineApiHost = isOnline ? 'http://111.111.1.11:8080/' : 'http://test.com/'
// websokcet host
var onlineWsHost = isOnline ? 'ws://111.111.1.11:8080/': 'http://test.com/' //本地還是用的http，不是ws，因為采用定時器發(fā)ajax請求
//websocket請求數(shù)據(jù)方法
sendWebSocket: function(url, callback) {
var protocol = url.split(':')[0]
if(protocol == 'ws') { //線上版本
window.WS = new WebSocket(url)
WS.onmessage = function(response) {
if (response) {
var data = response.data
callback && callback(data)
}
}
WS.onclose = function() {
WS.close()
}
window.onunload = function() {
WS.close()
}
} else { //本地版本，采用定時器發(fā)ajax請求
request.sendAjax(url,callback)
setInterval(function() {
request.sendAjax(url,callback) //ajax方法代碼不再展示
},5000)
}
}
//Mock數(shù)部分
//正確寫法1
Mock.mock(util.urlReg('timewebsocket/time'), {
'code': 1,
'msg': 'success',
'result': '@datetime("yyyy-MM-dd HH:mm")'
})
//正確寫法2
Mock.mock(util.urlReg('timewebsocket/time'), {
'code': 1,
'msg': 'success',
'result': function() {
return Mock.Random.datetime("yyyy-MM-dd HH:mm")
}
})
//錯誤寫法
Mock.mock(util.urlReg('timewebsocket/time'), {
'code': 1,
'msg': 'success',
'result': Mock.Random.datetime("yyyy-MM-dd HH:mm")
})
~~~
- 1.Mock.js
- 2.conic-gradient 圓錐漸變
- 3.ES6 Module學習筆記
- 4.ES6函數(shù)擴展學習筆記
- 5.導(dǎo)入topojson模塊的坑
- 6.git 內(nèi)部分享
- 7.npm install --save
- 8.nvm和nrm
- 9.刪除node_modules文件夾
- 10.es6 symbol
- 11.Set和Map數(shù)據(jù)結(jié)構(gòu)
- 12.chrome控制臺的$0
- 13.d3-ordinal
- 14.Object.assign() 和lodash的merge()
- 15.echarts x軸坐標文字顯示不全
- 16.echarts地圖配置項--中文
- 17.webpack自動瀏覽器打開插件
- 18.D3線條和面積動畫--未采用
- 19.投影濾鏡
- 20.文本擋住觸發(fā)事件
- 21圖表用法
- 22.大膽的表現(xiàn)自己把
- 23.裁剪clip-path
- 24svg線條動畫的反向和時間誤差
- 25.visibility和display的區(qū)別
- 26.SVG濾鏡
- 27windo命令行的坑
- 28.textContent與innerText的不同
- 29.CSS3炫酷文本
- 30.更改webpack配置文件路徑
- 31.大胖給我做的css codereivew
- 32.定義接口不要限定死
- 33.不使用浮動，用inline-block平分出現(xiàn)換行問題
- 34.輸入框的校驗
- 35.handlbars的registerHelper
- 36.animation-fill-mode
- 37.svg嵌套HTML，實現(xiàn)文本換行
- 38.SVN出現(xiàn)黃色感嘆號
- 39.typeof與instanceof
- 40.SVG里面謹慎設(shè)置font-family
- 41.新腳手架里的相對路徑問題