玩轉前端之模擬數據
博客園主頁：http://www.cnblogs.com/handoing/
是否還在為前端模擬數據頭疼？
是否還在為后端返回數據格式較多內心煩躁？
是否還想吸一支煙壓壓精？
看下去吧，這里比心理醫生還管用。。。
1.滿地拉屎版
function fetchUserList() {
}
var isDev = true;
var data = {
"status": 3,
"message": "hello world",
"string": "★★★",
"number": 69,
"boolean": true,
"object": {
"110000": "北京市",
"120000": "天津市",
"130000": "黑龍江省"
},
"array": [
{
"name": "Hello"
},
{
"name": "Mock.js"
},
{
"name": "!"
},
{
"name": "Hello"
},
{
"name": "Mock.js"
},
{
"name": "!"
}
],
"regexp": "6288712123-",
"time": "2014-01-16 21:21:22",
"color": "rgba(121, 242, 135, 0.94)",
"word": "jztuqwmur",
"text": "而風氣究及。",
"name": "崔傑",
"url": "news://imkpjsnq.ev/dhthtrgqy"
};
if (isDev) {
fetchUserList(data);
} else {
$.ajax({
url: '/list',
type: 'GET',
dataType: 'json',
success: function(data) {
fetchUserList(data);
}
});
}
這段代碼很好理解，如果你看不懂就不要往下看了，洗個澡睡覺休息吧！
有人會問了，看似很有條理的代碼為什么叫滿地拉屎呢？
讓我告訴你這個data變量就是一坨屎。。。
在開發的時候我們會定義一個data來模擬后端返回的數據來進行下一步操作，如果這個data很長占滿了整個屏幕，那你敲代碼的時候上下翻來翻去是不是覺得很累。
這是其次，再一個就是當你聯調把isDev改成了false的時候，有沒有想到這個data有多孤單，自己在內存里游離，占着茅坑不拉屎。。。
那么你會說干脆把data和多余的判斷代碼刪掉吧，我覺得這倒是可以，但是如果開發的程序前后端交互較多，你會覺得刪起來挺不爽的，萬一腦血栓犯了把有用的代碼刪掉了怎么辦。。。
2.擦屁股高階版
開發目錄下創建一個json文件
添加json數據
{
"status": 3,
"message": "hello world",
"string": "★★★",
"number": 69,
"boolean": true,
"object": {
"110000": "北京市",
"120000": "天津市",
"130000": "黑龍江省"
},
"array": [
{
"name": "Hello"
},
{
"name": "Mock.js"
},
{
"name": "!"
},
{
"name": "Hello"
},
{
"name": "Mock.js"
},
{
"name": "!"
}
],
"regexp": "6288712123-",
"time": "2014-01-16 21:21:22",
"color": "rgba(121, 242, 135, 0.94)",
"word": "jztuqwmur",
"text": "而風氣究及。",
"name": "崔傑",
"url": "news://imkpjsnq.ev/dhthtrgqy"
}
ajax請求路徑填寫該文件地址
$.ajax({
url: 'data/list.json',
type: 'GET',
dataType: 'json',
success: function(data) {
console.log(data);
}
});
這樣聯調的時候只要把url改掉即可，看似很不錯了，但是這個與滿地拉屎版有一個共同點，數據不夠靈活。
當你獲取的數據有狀態判斷的話，怎么辦，例如status這個key，你每次都得改這個value來對狀態進行區分，好煩啊word哥！
3.強行裝逼版
使用mock.js吧！一個模擬數據和編寫自動化測試的庫，目前github上1684個星也算不錯了。
github：https://github.com/nuysoft/Mock
主頁: http://mockjs.com/
中文的，文檔通俗易懂，自己去看吧。。。
例子：
開發目錄下創建一個js文件存放mock代碼
html引入mock.js和data/list.js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript" src="./mock.js"></script>
<script type="text/javascript" src="./data/list.js"></script>
<script type="text/javascript" src="./main.js"></script>
</head>
<body>
</body>
</html>
編寫main.js
$.ajax({
url: '/list',
type: 'GET',
dataType: 'json',
success: function(data) {
fetchUserList(data);
}
});
編寫data/list.js，模擬數據都寫在這里，便於維護。
Mock.mock('/list', {
"status|0-5": 0,
"message": "hello world",
"string|1-10": "★",
"number|1-100": 100,
"boolean|1-2": true,
"object|2-4": {
"110000": "北京市",
"120000": "天津市",
"130000": "黑龍江省",
"140000": "四川省"
},
"array|1-10": [
{
"name|+1": [
"Hello",
"Mock.js",
"!"
]
}
],
"regexp|1-5": /\d{5,10}\-/,
"time": '@datetime',
"color": '@rgba',
"word": '@word',
"text": '@csentence(5)',
"name": '@cname',
"url": '@url'
});
當前后端聯調的時候只需要把mock.js和data/list.js刪掉就好了，main.js里的代碼一點都不用動噢兄弟們！這他媽多爽啊！！！
來讓我們秀秀數據吧
{
"status": 4,
"message": "hello world",
"string": "★",
"number": 98,
"boolean": false,
"object": {
"110000": "北京市",
"120000": "天津市",
"130000": "黑龍江省"
},
"array": [
{
"name": "Hello"
},
{
"name": "Mock.js"
},
{
"name": "!"
},
{
"name": "Hello"
},
{
"name": "Mock.js"
},
{
"name": "!"
},
{
"name": "Hello"
},
{
"name": "Mock.js"
},
{
"name": "!"
}
],
"regexp": "241330-30881228-2632266897-",
"time": "2009-06-19 01:55:07",
"color": "rgba(242, 121, 165, 0.96)",
"word": "bry",
"text": "接看九統利。",
"name": "謝傑",
"url": "news://vykj.ag/frvlwkf"
}
{
"status": 1,
"message": "hello world",
"string": "★★★★★★★★★★",
"number": 86,
"boolean": true,
"object": {
"120000": "天津市",
"130000": "黑龍江省"
},
"array": [
{
"name": "Hello"
},
{
"name": "Mock.js"
}
],
"regexp": "083728849-3321101-067657-",
"time": "2013-02-24 17:29:08",
"color": "rgba(158, 242, 121, 0.83)",
"word": "smutjy",
"text": "中往列軍部。",
"name": "田勇",
"url": "rlogin://mmpooew.bw/kcuijlnk"
}
注：mock的第一個參數必須要與ajax請求的路徑相同，並且get和post請求都可以進行匹配，數據足夠靈活，應該能模擬99.9999%的情況了。
不過在我看來這個mock.js還不夠完美，其有兩個缺陷：
1.無法匹配帶參數的ajax請求。
2.兼容性不夠強（這個不重要，因為我們只會在開發環境中用到）。