【JS】Mock制作假数据

背景

前后端分离的模式下，前端可以完全单独开发，这时需要假数据来呈现页面。通过Mock可以制作随机数据，数据类型包括：

• 基本数据类型
• 引用数据类型
• 英文单词、英文段落、汉字、汉字段落、名字（中英文）
• ID、GUID
• 省份、电话、邮箱、IP、日期、颜色
• 图片

另外，通过Mock可以拦截ajax请求，提供虚拟的后台服务，供前端交互使用。

---

API指导

GitHub地址，这里有完整的API介绍及使用。
Mock.js下载地址。

---

源码导读

// Mock的入口
Mock.mock = function(rurl, rtype, template) {
	    // Mock.mock(template)
	    if (arguments.length === 1) {
	        return Handler.gen(rurl)
	    }
	    // Mock.mock(rurl, template)
	    if (arguments.length === 2) {
	        template = rtype
	        rtype = undefined
	    }
	    // 拦截 XHR
	    if (XHR) window.XMLHttpRequest = XHR
	    Mock._mocked[rurl + (rtype || '')] = {
	        rurl: rurl,
	        rtype: rtype,
	        template: template
	    }
	    return Mock
	}

这里可以看到Mock.mock最多接受三个参数：

• rurl：ajax请求的路径
• rtype：方法类型，get、post、put、delete等
• template：数据模板