閱讀目錄
- 玩轉前端之模擬數據
玩轉前端之模擬數據
?
博客園主頁：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.兼容性不夠強（這個不重要，因為我們只會在開發環境中用到）。
)
