玩转前端之模拟数据

博客园主页：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.兼容性不够强（这个不重要，因为我们只会在开发环境中用到）。

延伸阅读

游戏论坛模拟-Java培训,做最负责任的教育,学习改变命运,软件学习,再就业,大学生如何就业,帮大学生找到好工作,lphotoshop培训,电脑培训,电脑维修培训,移动软件开发培训,网站设计培训,网站建设培训游戏论坛模拟