数据模拟-mock.js

mock.js 数据模拟

工作中，前端免不了需要和各种后台数据打交道。如果后端接口迟迟没提供，而又需要数据做展示或测试。而这时候，前端往往需要自己手动去模拟数据。

例如，有页面:

<div>
    <p>{{name}}</p>
    <p>年龄: {{age}}</p>
</div>

正常情况，前端通过 ajax 获取数据，并填充页面:

$.get("data.php", function(data){
    // data = {name: "da宗熊", age: 26}
    // 将数据填充进模板
});

但，如果后端并没写好 data.php 接口，而我们有着急想看效果，于是，在代码上进行改进:

var isDebug = true;
if(isDebug){
    var data = {name: "da宗熊", age: 26};
    // 将数据填充进模板
}else{
    $.get("data.php", function(data){
        // data = {name: "da宗熊", age: 26}
        // 将数据填充进模板
    });
}

起初看着还挺不错的，有变量 isDebug 控制是否进入调试。但深思，缺点却不少:

1. 带来了额外的判断逻辑
2. 模拟的数据呆板，不能很好的模拟各种情况
3. 容易忽略异步数据，带来的一些问题

于是，前端s，就开始寻找各种数据模拟的工具，像 fiddler, node 等。

而今天介绍的mock.js，也是一款数据模拟的工具，但不需安装[一个脚本文件]，跟jQuery友好的集成，而且纯前端配置，功能总体还不赖。

---

简单数据模拟

只需一段简单的json文件，就能模拟比较友好的动态数据

var data = Mock.mock({
    "age|20-30": 30,
    "email|1": ["1@qq.com", "2@sina.com", "3@163.com"]
});
// ====>
{age: 29, email: "3@163.com"}

每次执行 Mock.mock，data的值，都会动态更变。

---

拦截ajax请求

它内置拦截了 jQuery 的ajax请求，但要注意咯，一定要先引入 jQuery，再引入 Mock.js。不然拦截会失败。

拦截支持 正则，也支持路径:

Mock.mock(/\.json/, {
    "code|1": [200, 300],
    "data": {
        "name": "@CNAME",
        "age|20-30": 30
    }
});

它拦截了所有后缀为 “.json” 的请求

$.get("x.json", function(data){
    console.log(data)
}, "json");

// ===> {code: 200, data:{age: 28, name: "袁青之"}}

其中 “@CNAME”是mock.js内置的数据占位符，能生成 中文名字。

PS：如果不是正则，而是字符串，那配置的字符串，需要和请求的链接，完全一致！！

---

最后

Mock.js 内置了强大的数据占位符，跟 jQuery, Zepto, KISSY 友好【已实现了这3者的数据拦截】。其中，更为强大的模拟、拓展方法，这里就不细说了。

参考资料：

官方网站： http://mockjs.com/

Angular社区: http://www.angularjs.cn/A0I4

github: https://github.com/nuysoft/Mock