Long long ago，前端在项目开发中都是作为辅助的角色，在.NET、Java尤为明显，.NET有其自己的一套MVC开发架构，Java有JSP支持前端开发，但是这样开发代码冗余量大，不利于软件开发“高内聚、低耦合”的原则，项目升级维护起来困难，因此出现类型前端MVC开发框架，前后端分离成为常态，既相互独立，又有一定的联系，这种联系仅体现在数据交互方面。前端开发时模拟后台返回的数据，开发时相互独立，生产时以数据为纽带紧密联系在一起。下文聊聊前端开发数据模拟的常见类型：

1. 懵逼版

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function randerList(){
    //...
}

var isDev = true;

var data = {
  "code": 1,
  "count": 1,
  "data": {
      "userid": 1,
      "username": "lina",
      "age": 25,
      "sex": 0
  }
};

if(isDev){
    randerList(data);
}else{
    $.get("/userlist",function(json){
        randerList(json.data);
    })
}

这段代码我看的懵逼了一下，其实就是通过一个boolean标识，来判断到底是执行传入了静态数据的函数还是执行传入动态数据的函数，如果整个项目一直这样下去，相信大佬的你到后面也会懵逼。

2. 入门版

在项目下新建一个json文件，此处叫data.json。

1
2
3
4
5
6
7
8
9
10
11
//data.json
{
  "code": 1,
  "count": 1,
  "data": {
      "userid": 1,
      "username": "lina",
      "age": 25,
      "sex": 0
  }
}

ajax请求获取json文件。

1
2
3
4
5
6
7
8
$.ajax({
    url: 'data.json',
    type: 'GET',
    dataType: 'json',
    success: function(json) {
        console.log(json);
    }
});

这种比上面那种看起来更加清晰，对接时修改url即可，但是和上面的有个共同点，数据不够灵活，如果需要判断状态码status|code时，弊端显而易见。

3. 升级版

使用Mock.js，一个模拟数据和编写自动化测试的库，生成随机数据，拦截Ajax请求。

引入工具库和模拟js文件。

1
2
3
4
<!--引入工具库和模拟js文件-->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/Mock.js/1.0.0/mock.js"></script>
<script type="text/javascript" src="devData.js" ></script>

配置mock数据，mock语法规范自行参考官方文档。

1
2
//配置mock
Mock.mock('/api/getName', { name: 'Jack', 'age|10-20': 10 });

ajax请求数据

1
2
3
4
5
6
7
8
9
10
$.ajax({
    type: 'GET',
    url: '/api/getName',
    dataType: 'json',
    success: function(data) {
      console.log(data);
    }
});

//打印数据：{name: "Jack", age: 13}

当我们对接后台时只需要把引入mock.js和devData.js删除即可，贼带劲！