前端开发的过程中,我们免不了和后端进行联调,这时候就会出现以下的尴尬场景:
- 接口没写好,没法做接下来的功能
- 功能写好了,接口没写好,没法测这个功能
- 联调了,出了BUG,不知道锅在谁身上,只得陪后端耗时间
要解决这个问题,可以使用功能强大的mockjs,它能拦截AJAX请求并返回规定好的假数据。但是这需要学习mockjs的语法,且由于我之前不知道这个强大的东西的存在,只好自己摸索出了一种让前端开发不再依赖于后端的方法:
需要的工具:jQuery, tomcat(http-server也可以,但要注意http-server请求本地数据时不能用post方法,只能get), webstorm(可选)
这个方法的关键在于,jQuery的ajax函数可以请求本地的json数据,于是我们可以这么做。
var whatMode = 'dev' // 指明使用开发模式还是生产模式的变量,可选值'dev'/'prod'
// obj对象有以下属性fake, url, succ, fail,在下方调用makeAction函数时会说明各个参数。实际的ajax请求还包括许多附加参数,比如type, data,由于和此方法的核心无关,请大家视自己的实际情况进行改造。
var makeAction = function(obj) {
if (whatMode === 'dev') {
$.ajax({
url: obj.fake,
dataType: 'json',
success: function (data) {
obj.succ(data)
},
error: function() {
obj.fail()
}
})
} else if (whatMode === 'prod') {
$.ajax({
url: obj.url,
dataType: 'json',
success: function (data) {
obj.succ(data)
},
error: function() {
obj.fail()
}
})
}
}
var option = {
fake: 'data.json', // 自己编的假数据的本地文件的路径地址
url: 'api', //接口
succ: function (result) { // success回调函数
console.log(result)
},
fail: function () { // error回调函数
console.log('请求失败')
}
}
makeAction(option)
这样,当whatMode
变量为'dev'时,就会自动去请求编好并存放在本地的假数据,为'prod'时,就会去请求接口的数据。这个whatMode
变量,可以放在public.js中。如果是iframe嵌套的页面结构,也可以放在最上层的页面中,只要取top.whatMode
就可以取到最上层窗口的变量值了,借助这种方法,就实现了不依赖后端写页面,只要在控制台的"network"中看自己的请求头中发送的参数是否正确,并验证自己返回的自己所编写的假数据符合不符合预期功能就好了。
以上,就是这个方法的主要部分,剩下要介绍的是如何部署本地的静态服务器,和以上方法无关了,网上也有大量的教程,时间太晚了,白天还要上班,我先睡了,明天上班再把利用tomcat部署本地静态服务器的方法补上了!
(说明:不使用tomcat,使用node.js的http-server也是不错的选择)
接下来补上用tomcat部署本地静态服务器的方法。