前言
本文参考了博文：玩转前端之模拟数据 ，但有大幅修改。
为什么要模拟数据
前端开发中，往往需要从后台获得数据，但是开发阶段这些实际数据接口并没有部署好，因此需要模拟数据，让我们能够进行具有完整交互流程的开发。我们期望在前后联调，转而使用真实接口时，代码的改动尽可能小。
我在github上开了一个数据模拟示例仓库，其中的demo实现了下面提到的各种数据模拟方式，欢迎star和fork。下面正式介绍几种数据模拟的方式。
使用（全局）变量
先上代码：
;(function(){
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"
};
$(init);
function init(){
$('#data-get').on('click', function(){
if(isDev){
showData(data);
}else{
$.ajax({
url: '/list',
type: 'GET',
dataType: 'json',
success: function (data) {
showData(data);
}
});
}
})
}
function showData(data){
$('#data-show').JSONView(data, {collapsed: false});
}
})();
可以看到，这段代码中定义了两个变量，data和isDev，在开发阶段，isDev设置为true，这时直接把本地变量data拿过来，传递给showData函数处理；转换到生产环境下，需要做的事情包括：删除data和isDev对象，删除关于代码环境的if判断，直接使用ajax。
其问题主要就是删除这些变量和调整代码结构的时候会非常麻烦，很容易出错，因为这些变量和if结构可能散落在各个代码文件的各个角落里。另外这种模拟本身没有使用ajax，和实际的数据请求过程有较大差异，而且数据是死的，不够灵活。
使用数据存储文件
存放在js代码里的数据变量确实很丑，为此可以把它存成一个数据文件，比如下图的data.json：
这样一来，数据和javascript代码就隔离开来了，获取数据时也使用真实的ajax方式获取。
下面是请求数据的代码：
;(function(){
$(init);
function init(){
$('#data-get').on('click', function(){
$.ajax({
url: './data.json',
type: 'GET',
dataType: 'json',
success: function (data) {
showData(data);
}
});
});
}
function showData(data){
$('#data-show').JSONView(data, {collapsed: false});
}
})();
转换为生产环境时，只需要修改 url以符合实际的接口，用于模拟数据的文件data.json不进行打包即可。然而这样也有一些缺点：数据不够灵活，是写死的，没有状态判断，返回的数据真实度不够高。
使用mockjs
使用一个javascript库mockjs，你可以访问它的github仓库 ，查看详细文档。文件目录如下，其中data/list.js用于数据模拟。
自然，我们需要在index.html引入这两个文件。
下图是list.js模拟对/list数据请求的代码。
使用了mockjs，再来看看我们在javascript文件中是如何请求数据的：
;(function(){
$(init);
function init(){
$('#data-get').on('click', function(){
$.ajax({
url: '/list',
type: 'GET',
dataType: 'json',
success: function (data) {
showData(data);
}
});
});
}
function showData(data){
$('#data-show').JSONView(data, {collapsed: false});
}
})();
可以看到，和使用本地数据存储文件的方式几乎是一样的，不过这次请求的url参数是/list，而不是data.json，这样在转换到生产环境时，我们甚至都不用修改这些ajax代码了，直接删除mockjs和list.js就好了。而且生成的数据也更真实、可定制。
然而这种方式对数据的模拟，是通过拦截ajax请求来实现的，所以在浏览器的控制台，我们是看不到数据请求的。
使用nodejs
nodejs作用一种后端语言，用它来模拟数据除了数据的内容真实性，其他方面可以说是最接近真实数据请求的。
let http = require('http'),
url = require('url'),
fs = require('fs');
http
.createServer(function(request, response){
let pathname = url.parse(request.url).pathname;
console.log('requesting ' + pathname);
switch(pathname){
case '/list':
provideData(response);
break;
case '/':
case '/index.html':
provideIndexPage(response);
break;
default:
provideStatic('.'+ pathname, response);
break;
}
})
.listen(4000);
console.log('The node server is listening 4000');
上面是server.js文件的部分代码，通过createServer方法创建了服务器，通过switch语句判断请求的路径，在请求/list时，我们就用provideData函数返回请求的数据，provideData中实际是用nodejs的fs模块读取了本地的./static/data.json文件，事实上和前面的在本地提供data.json文件直接请求的方法是一致的，不过现在我们可以控制服务器的行为，因此可以在ajax请求的url是/list的时候也能返回该文件，这样我们的前端代码在转换到生产环境的时候也不用修改了。
而真正使用nodejs搭建开发环境的话，数据模拟就可以看作只是路由的一部分，可以借用express、koa这样的框架。