玩转前端之模拟数据

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

前端之模拟数据 - HackerVirus - 博客园相关推荐

Splinter学习－－模拟攥写博客园随笔
为了验证Splinter的多种动作,这里将使用Splinter模拟博客园里面新增随笔的操作. 第一步:登录博客园,方法同Splinter学习--初探2,模拟博客园登录第二步:跳转到"添加随 ...
import json java_JAVA的JSON数据包装-博客园老牛大讲
标签: 一.什么是json呢? { "id":"1", "username":"老牛大讲堂", "passwo ...
前端“智能”静态资源管理 - Onebox - 博客园
前端"智能"静态资源管理模块化/组件化开发,仅仅描述了一种开发理念,也可以认为是一种开发规范,倘若你认可这规范,对它的分治策略产生了共鸣,那我们就可以继续聊聊它的具体实现了. 很 ...
mysql是大端小端_大端和小端 - HackerVirus - 博客园
在计算机中是以字节为单位,每个地址对应一个字节,一个字节8bit.在C中,除了8bit的char以外,还有16bit的short,32位的int,64位long,当然具体要由编译器决定,可以通过siz ...
『Python开发实战菜鸟教程』实战篇：爬虫快速入门——统计分析CSDN与博客园博客阅读数据
文章目录 0x01:引子首先介绍一下网络爬虫是什么,可以用来做什么? 这里简单探讨一下网络爬虫的合法性正式进入爬虫实战前,需要我们了解下网页结构 HTML CSS JScript 写一个简单的 H ...
iOS_CNBlog项目开发 (基于博客园api开发) 上篇
按照惯例, 先上效果图前言做这个项目是因为刚好在逛博客园的时候看到一篇文章博客园第三方客户端-i博客园正式发布App Store, 这里就帮忙贴下链接吧. 整个项目做下来大概做了半个月, 今天算 ...
java 模拟登陆exe_Java简单模拟登陆和爬虫实例---博客园老牛大讲堂
鉴于有人说讲的不清楚,我这里再详细补充一下:更新日期:2017-11-23 本片文章适合初学者,只简单说了一下爬虫怎么用,和一个简单的小实例.不适合你的就可以不看了.----博客园老牛大讲堂 1.什么 ...
【转】使用C#发送Http 请求实现模拟登陆（以博客园为例）
[转]使用C#发送Http 请求实现模拟登陆(以博客园为例) 模拟登陆的原理很简单,就是发送一个Http 请求服务器获得响应,然后客户端获取到cookie即可实现模拟登陆,比如一些抢票软件的原理无非也 ...
python爬虫：两种方法模拟登录博客园
第一方法用第三方库(requests):参考http://www.mamicode.com/info-detail-1839685.html 源代码分析博客园的登录页面非常简单,查看网页源代码,可以 ...

前端之模拟数据 - HackerVirus - 博客园

玩转前端之模拟数据

前端之模拟数据 - HackerVirus - 博客园相关推荐

最新文章

热门文章