纯代码为WordPress添加,宁波谷歌优化,在线拼接图片,永春网站设计阅读目录
玩转前端之模拟数据
回到目录
玩转前端之模拟数据 博客园主页#xff1a;http://www.cnblogs.com/handoing/
是否还在为前端模拟数据头疼#xff1f;
是否还在为后端返回数据格式较多内心烦躁#xff1f;
是否还想吸一支烟压压精#xff1f; 看下去吧#x…阅读目录
玩转前端之模拟数据
回到目录
玩转前端之模拟数据 博客园主页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个星也算不错了。
githubhttps://github.com/nuysoft/Mock
主页: http://mockjs.com/
中文的文档通俗易懂自己去看吧。。。
例子
开发目录下创建一个js文件存放mock代码 html引入mock.js和data/list.js文件 !DOCTYPE html
html langen
headmeta charsetUTF-8title/titlescript typetext/javascript src./jquery.js/scriptscript typetext/javascript src./mock.js/scriptscript typetext/javascript src./data/list.js/scriptscript typetext/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.兼容性不够强这个不重要因为我们只会在开发环境中用到。
