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

{

“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文件

编写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”

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。**

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-g4nLWiBm-1715880921832)]

[外链图片转存中…(img-lNfeElkp-1715880921833)]

[外链图片转存中…(img-bBjtcL5h-1715880921833)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！