Mock.js 版本演进全解析：从 CHANGELOG 读懂模拟数据生成器的功能与架构变迁

• 测试

Mock.js 是一个用于前端开发与原型阶段的模拟数据生成器，核心能力是"生成随机数据"与"拦截 Ajax 请求"。本文以仓库根目录的 CHANGELOG.md 为主线，完整梳理该项目从 2013 年 7 月到 2015 年 12 月的全部版本记录，并结合当前仓库源码（src/mock.js、src/mock/ 各模块）逐条印证每一项能力演进。读完本文，你将掌握 Mock.js 的完整功能清单（数据模板语法、占位符体系、XHR 拦截、校验与 Schema 转换等）及其背后的模块化架构，也能理解一条 2013 年的随机数据工具是如何一步步成长为结构清晰、可测试、可打包的前端工程化组件。

上图由gulp madge任务（见 gulpfile.js）生成，直观展示了当前版本 src/mock.js 之下 Handler、Random、Parser、XHR、Schema、Valid 等核心模块的依赖关系，是历次"重构代码"的最终成果写照。

一、演进总览：一条从"模板生成器"到"工程化组件"的时间线

CHANGELOG.md 记录了 18 个时间节点，可以归纳为四个阶段：

注意 CHANGELOG.md 中版本号写法并不完全规范（如 V0.2.0 出现两次、部分节点没有版本号），本文按时间顺序逐一解读，不再额外修正原文写法。

二、雏形期：基于客户端模板生成模拟数据（2013.7 ~ 2013.8）

2013 年 7 月至 8 月，Mock.js 的定位是"基于客户端模板生成模拟数据"，能力逐周递增：

• 2013.7.12：Mock.mock(rurl, template)的参数rurl支持字符串或正则；把产生随机元数据的接口封装进Mock.Random；增加日期格式化；新增占位符@IMG、@PARAGRAPH、@SENTENCE、@WORD、@FIRST、@LAST、@NAME、@DOMAIN、@EMAIL、@IP、@ID；支持嵌套占位符（如@IMG(@AD_SIZE)）；支持把普通属性当作占位符使用（如@IMG(@size)）。
• 2013.7.18：增加占位符@COLOR；完善占位符解析，过滤掉#%&()?/.等干扰字符；对"支持的占位符"分组。
• 2013.7.31：基于客户端模板生成模拟数据的能力达到 50%。
• 2013.8.2：达到 60%，并新增测试用例test/mock4tpl-node.js（该文件在后来的重构中已移除，当前仓库的测试位于 test/ 目录）。
• 2013.8.7：达到 75%；重构文件和目录结构，把代码模块化；参考 Handlebars.js 引入 Jison 生成模板解析器。
• 2013.8.11：达到 80%；完善test/mock4tpl-node.js；Mock4Tpl支持 Partials；Mock 支持转义@；更新 README，增加对 Mock4Tpl 的说明；减少 Mock、Mock4Tpl 暴露的 API。
• 2013.8.21：达到100% 基于客户端模板生成模拟数据，支持 KISSY XTemplate；调整文件结构。

这些早期占位符（@EMAIL、@NAME、@IMG等）延续至今。当前仓库中占位符的解析逻辑位于 src/mock/handler.js：placeholder()会先解析参数、优先引用数据模板中的属性、再递归解析参数中的占位符（对应 2013.7.12 的"嵌套占位符"特性），最终把占位符交给Mock.Random对应方法执行。占位符数据源分散在 src/mock/random/ 下的 basic、date、image、color、text、name、web、address、helper、misc 十个模块中，由 src/mock/random/index.js 统一extend合并。

三、模块规范期：CMD/AMD 支持与 SourceMap（2013.9）

• 2013.9.3：文档增加 Sea.js（CMD）、RequireJS（AMD）用法示例；增加对 CMD 规范的支持；生成 SourceMap 文件dist/mock-min.map。
• 2013.9.6：增加占位符@DATAIMAGE；解析占位符时完全忽略大小写。

"忽略大小写"这一行为在当前源码中依然可验证：handler.placeholder()中会同时计算key、lkey = key.toLowerCase()与okey（_all()将 Random 全部方法名转为小写索引），再从中查找处理方法，见 src/mock/handler.js。也就是说，@EMAIL、@email、@Email均能命中。

四、功能爆发期：V0.1.2 ~ V0.1.5（2014.5 ~ 2014.6）

2014 年 5 月起，Mock.js 进入带版本号的正式迭代，核心 API 快速成型。

2014.5.9 V0.1.2：数据模板语法正式确立

• 支持Mock.mock(rurl, rtype, template)，即同时按 URL 与请求类型拦截；
• 支持'name|min-max': {}、'name|count': {}对象生成规则；
• 支持'name': function(){}函数属性；
• 新增占位符@NOW。

这三类规则构成了 Mock.js 数据模板语法（DTD）的骨架，在当前 src/mock/handler.js 中分别由array、object、number、boolean、string、function、regexp处理器实现，属性名中的规则由 src/mock/parser.js 解析（min、max、count、dcount等字段），正则常量定义在 src/mock/constant.js：

// src/mock/constant.js RE_KEY: /(.+)\|(?:\+(\d+)|([\+\-]?\d+-?[\+\-]?\d*)?(?:\.(\d+-?\d*))?)/, RE_RANGE: /([\+\-]?\d+)-?([\+\-]?\d+)?/, RE_PLACEHOLDER: /\\*@([^@#%&()\?\s]+)(?:\((.*?)\))?/g

函数属性在handler.js的'function'处理器中以options.template.call(options.context.currentContext, options)方式执行，即函数this指向当前生成的数据上下文——这正是"根据已有数据计算新字段"的实现机制。

2014.5.26 V0.1.2：mockjax 重构与演示材料

• 重构Mock.mockjax()；
• 更新package.json的 devDependencies；
• 增加"懒懒交流会"PPT。

需要说明：Mock.mockjax()属于早期基于 jQuery 的拦截方案，在下一节可见它在 V0.2.0 中被正式废弃，当前仓库已无该 API。

2014.5.26 V0.1.3：修复 issue #21

该版本仅修复了一个 issue（#21），CHANGELOG 未给出细节，从仓库现状无法还原具体内容。

2014.6.18 V0.1.4：兼容性与生成规则修复

• 修复 #14：jQuery 1.11 下$.ajax拦截无反应（0.1.1 版本在 jQuery 1.10 可用）；
• 修复 #22：异步加载 JS 文件时发现问题；
• 修复 #23：Mock.mockjax导致$.getScript不执行回调；
• 修复 #24：Firefox 30.0 下引用占位符抛错（window.eval执行上下文差异）；
• 修复 #25：改变了非函数属性的顺序，查找不方便；
• 修复 #26：生成规则支持负数，例如number|-100-+100；
• 修复 #27：数据模板编辑器（Tidy）格式化时丢掉函数属性；
• 数据模板编辑器增加编辑区与生成结果区的同步滚动；
• test/nodeuinit更正为test/nodeunit。

其中两条修复至今仍能在源码中找到痕迹：

• #26 负数规则：RE_KEY正则中的[\+\-]?\d+-?[\+\-]?\d*允许正负号，constant.js 注释明确标注"#26 生成规则 支持 负数，例如 number|-100-100"。
• #25 属性顺序：object()处理器把模板属性拆成普通keys与fnKeys两组，先输出普通属性再输出函数属性，并注释"#25 改变了非函数属性的顺序，查找起来不方便"，见 src/mock/handler.js。
• #24 占位符参数解析：placeholder()先用eval尝试保持参数类型，失败则退化为字符串分割，并保留了对 Firefox 30.0 该 BUG 的注释说明（src/mock/handler.js）。

2014.6.23 V0.1.5：jQuery Ajax 拦截兼容性攻坚

该版本专门修复 #28、#29：因 jQuery 各版本在 Ajax 实现上的差异，拦截 Ajax 请求时出现兼容性问题（例如xhr.onload()方法访问不到）。CHANGELOG 记录已通过验证的 jQuery 版本包括：

CHANGELOG 同时预告了根本解决方案：后续版本通过拦截XMLHttpRequest对象"一劳永逸"地解决 Ajax 拦截的兼容与适配问题——这正是 V0.2.0 中"复写 XHR"的前奏。

五、架构重构期：V0.2.0 系列（2014.6 ~ 2015.12）

2014.6.24 V0.2.0：脱胎换骨的大版本

这是 CHANGELOG 中信息量最大的一个版本，标志着 Mock.js 从 jQuery 依赖走向独立完整的拦截方案：

1. 支持 UMD：未打包前的代码与打包后的代码均支持 UMD 规范。当前 gulpfile.js 中的 webpack 任务即配置libraryTarget: 'umd'。
2. random CLI：--help增加方法和参数说明。对应的 CLI 入口定义在 package.json 的"bin": { "random": "bin/random" }，依赖commander。
3. 重构文档站：增加《入门》、单列《文档》（文档站由 @萝素 完成，在线站点已不在仓库内）。
4. 测试用例重写：同时支持 nodeunit 与 qunit；同时支持 jQuery、KISSY、Zepto 三种库；同时支持 KMD、AMD、CMD 三种模块规范。当前 test/ 目录下的test.mock.html、test.mock.mock.js、test.mock.random.js等即由 mocha + PhantomJS 驱动（见 gulpfile.js 的mocha任务）。
5. 复写 XHR（@行列 @霍庸）：这是 V0.1.5 预告的"一劳永逸"方案落地。当前实现为 src/mock/xhr/xhr.js 中的MockXMLHttpRequest：
   • 备份原生window.XMLHttpRequest与window.ActiveXObject；
   • 构造时无法确定是否拦截，open()时取到 URL 后调用find()匹配注册的模板，匹配则走虚拟响应流程，不匹配则透传给原生 XHR；
   • send()中异步请求通过setTimeout(done, timeout)模拟延迟，timeout支持'10-100'这样的区间写法（MockXMLHttpRequest.setup()可配置）；
   • 响应阶段按HEADERS_RECEIVED → LOADING → DONE派发readystatechange、load、loadend事件，status固定为 200；
   • 事件系统、setRequestHeader/getResponseHeader/getAllResponseHeaders、abort均做了拦截/透传双分支。
6. 废弃的功能：Mock.mockjax()、Mock.tpl()、Mock.xtpl()。这也解释了当前 src/ 目录下为什么没有 tpl 模块——2013 年的 Mock4Tpl/KISSY XTemplate 时代彻底结束，仓库 Features 列表（README.md）中对应能力已被划线标注。
7. Random.dateImage()支持 node-canvas：图片占位符在 Node 环境下可真正生成图片数据，实现位于 src/mock/random/image.js。
8. 新增Mock.valid(tpl, data)：校验生成数据是否符合模板，实现位于 src/mock/valid/valid.js。
9. 新增Mock.toJSONSchema()：把 Mock.js 风格的数据模板转换为 JSON Schema，实现位于 src/mock/schema/schema.js——它递归处理数组items与对象properties，并保留name、template、rule、path等元信息。
10. 新增Mock.mock(regexp)：用正则表达式作为模板直接生成匹配的随机字符串，实现位于 src/mock/regexp/（parser 解析正则、handler 生成字符）。
11. 完善地支持 Node：代码中的window、document、XMLHttpRequest均做了环境判断。当前 src/mock.js 中if (typeof window !== 'undefined') XHR = require('./mock/xhr')即是这一策略的直接体现，因此 Node 下Mock.mock(template)依然可用。
12. 支持相对路径：占位符与模板属性之间可通过相对/绝对路径互相引用，实现为 src/mock/handler.js 的getValueByKeyPath()，支持/绝对路径、../、.归一化（normalizePath()）。

2014.12.23 V0.2.0：打包与测试工程化

• 改用gulp打包；
• 改用mocha重写测试用例；
• 改用requirejs重构代码。

当前仓库的 gulpfile.js 完整体现了这套工程化：jshint静态检查 →webpack打包（生成dist/mock.js与压缩版dist/mock-min.js+ sourcemap）→mochaPhantomJS浏览器测试 →istanbul覆盖率 →coveralls上报，另有watch监听src/**、test/*增量执行。

2014.3.20 V0.2.0-alpha1：增加网站

该节点新增官方网站，为开发者提供在线文档与示例。注意其日期（2014.3.20）早于上一节点，CHANGELOG 的书写顺序与实际时间线存在交错，阅读时以日期为准。

2015.12.03 V0.2.0-alpha2：改用 webpack 打包

最后一条记录：构建工具从 gulp 直接产物进一步统一为webpack 打包。当前 gulpfile.js 同时保留了 gulp 任务编排与 webpack 构建内核，package.json 中devDependencies同时声明gulp系列与webpack ^1.12.9，且"main": "./dist/mock.js"——打包产物是发布入口。

六、当前仓库与 CHANGELOG 的最终对照

把 CHANGELOG 的能力清单映射到当前源码，可以得到一份"遗产地图"：

七、结语：从 CHANGELOG 读出的工程演进方法论

回看 CHANGELOG.md，可以看到一条清晰的演进主线：功能先行（2013 年用模板+占位符解决"造数据"）→ 兼容修补（2014 上半年跟随 jQuery 生态打补丁）→ 架构换血（2014 年中复写 XHR、废弃 jQuery 依赖、标准化 API）→ 工程化收尾（gulp/mocha/requirejs/webpack/UMD/测试矩阵）。其中最有借鉴价值的两点：

1. "补丁问题用架构解决"：jQuery 各版本 Ajax 实现差异导致 mockjax 不断打补丁（V0.1.4、V0.1.5），最终选择直接复写XMLHttpRequest（V0.2.0），从根上消除了对特定库的依赖，同时赢得 Node 环境支持；
2. "废弃要果断"：mockjax/tpl/xtpl在 V0.2.0 一次性废弃，旧能力从源码移除、新 API（valid/toJSONSchema/regexp）补齐，仓库 src/ 目录结构因此保持干净，与依赖图（见文首图片）完全一致。

对希望深入学习模拟数据方案的读者，建议按"数据模板语法（handler.js）→ 占位符体系（random/）→ XHR 拦截（xhr.js）→ 校验与 Schema（valid/、schema/）"的顺序阅读源码，再对照 test/ 目录下的测试用例验证行为，即可完整复现 CHANGELOG 所记录的每一项能力。

• 测试