返回 登录
0

玩转前端之模拟数据

阅读1517

是否还在为前端模拟数据头疼?

是否还在为后端返回数据格式较多内心烦躁?

是否还想吸一支烟压压精?

图片描述

看下去吧,这里比心理医生还管用。。。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个星也算不错了。

例子:

开发目录下创建一个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.兼容性不够强。

学习前端的同学注意了!!!
学习过程中遇到什么问题或者想获取学习资源的话,欢迎加入前端学习交流群,群号码:328058344

评论