做前后端分离开发，最容易卡住的地方就是接口还没好，页面没法往下写。列表里没数据，看不出排版对不对；分页、空状态、加载失败这些分支，也只能等真数据来了才能测。造数据这件事，手写几个数组只能应付一阵，字段一多、结构一深就不够用了，而且姓名、手机号、地址、金额这些还得看着像真的，不然连输入框的长度限制都测不出来。这次整理了 3 款开源免费、可商用的假数据生成库，风格不同，配合起来基本能覆盖所有造数据的场景。
Mock.js 能做的事最多
Mock.js 是国内前端用得最多的一款，它其实有两块能力。第一块是按模板生成随机数据，一个字段写好名字和类型就能自动造出结果，手机号、邮箱、身份证、图片地址、时间戳都能生成得像真的，字段的规则还可以自己定义。第二块更关键，它能直接拦截页面上发出的请求，按你写的规则返回模拟数据，业务代码一行都不用改就能把整个流程跑通。接口还没联调的时候，先用它把页面搭起来，等接口好了把拦截关掉就切回真实数据，效率差得非常明显。
另外两款各有侧重
Chance.js 的覆盖面非常广，姓名、地址、公司、电话、邮箱、颜色、经纬度、金额、日期、段落文字、头像链接都有对应的生成方法，还能指定语言地区，结果更贴近真实分布。它除了造假数据，也常被拿来做抽奖、随机文案、测试用例、生成随机种子这类用途，属于那种放着不占地方、想起来就很好用的工具。Faker.js 是老牌的假数据工厂，最大的特点是有几十种语言的数据集，能按不同地区生成对应的姓名、街道、城市、公司名和电话号码，中文场景也能生成像模像样的姓名和地址，造一条完整的用户、订单、商品数据很省事，适合做演示数据和压测数据。
造数据这件事的边界
第一，生成的数据千万不要混进生产环境。Mock.js 拦截请求的同时也会影响真实请求的调试，务必用环境变量做一层开关，构建生产包时把它整个剔掉，否则线上会出大问题。第二，随机生成的手机号、身份证号都是凑出来的，不要拿它们去替代真实性校验，更不要用这些数据去测试实名相关的接口。第三，演示数据要标注清楚是模拟数据，尤其是给别人看的原型和截图，避免误会。第四，团队里最好统一一份假数据的字段规范，不然每个人造的数据结构都不一样，页面还是测不准。
包内容和用法
压缩包里按库名分成了三个目录，每个目录里放了压缩版和未压缩版两种文件，正式项目引压缩版，调试的时候看未压缩版。三款库互相独立、不依赖任何框架，用 script 标签引入就能拿到全局对象，也支持模块化引入，不需要任何服务端配合。每个目录都附带了官方说明文档和许可文件，方便核对用法和授权。选型上，要拦截接口做完整模拟用 Mock.js，要大量随机字段用 Chance.js，要多语言多地区的结构化假数据用 Faker.js。
这类库的价值在于把等待的时间挤出来。接口没好就先按约定把数据结构定下来，用假数据把页面写完，接口一好直接换地址就能联调，中间几乎没有空转。团队里还可以把假数据规则沉淀成一份模板，下次新项目直接复用，省掉重新设计字段的功夫。三款全部可免费商用、修改和再分发，保留各自的许可文件即可。后面还会继续整理前端开发常用的组件和数据类合集，需要的可以先收藏。
暂无评论内容