简单利用jQuery，让前端开发不再依赖于后端的接口

前端开发的过程中，我们免不了和后端进行联调，这时候就会出现以下的尴尬场景：

1. 接口没写好，没法做接下来的功能
2. 功能写好了，接口没写好，没法测这个功能
3. 联调了，出了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部署本地静态服务器的方法。

1. 先在tomcat官网上下载tomcat
2. 解压到一个本地文件夹。把项目部署到tomcat中，部署的方法可参考这篇文章
3. 点击bin目录下的startup.bat就启动项目了。接下来访问http://localhost:8080/item（item为项目名称）就可以了
4. 补充一点利用webstorm的方法，当我们在开发过程中更改了代码以后，可以使用webstorm更新部署的代码，比手动覆盖要方便。具体的使用方法在这里