而在前端开发流程中，我们说的Mock通常是指模拟数据或俗称假数据，以及生成和使用模拟数据的工具和流程。
那么，为什么要使用模拟数据呢？
是因为在实际中，我们经常会遇到以下令人困扰的问题。比如在一个前后端分离的项目开发过程中，项目的开发时间通常我们可以分为3部分：
- 前端开发时间
- 后端开发时间
- 前后端联调时间。
理想情况下，整个项目开发时间应该是小于等于前端开发时间,后端开发时间，中的这个更大的那个数值加上联调时间。
也就是就是说前后端同时开发，两端都开发完成后就进入到联调，甚至再进一步为了提高联调效率，也可以将整个开发流程按照功能点来进行更细的拆分，即在开发时间内也可以将部分功能开发完成后立即进入这部链条，希望利用碎片化的时间来减少后期完整链条的时间。
但在现实里，随着项目前后交互流程的日益复杂化，在开发流程中，前端往往需要依赖一定的数据模型来组织页面和片中的交互流程，数据模型又依赖后端提供的API接口。
也就是说，在新项目新功能开发流程时，前端开发时间多少不只取决于自身开发时间的部分的耗时，还依赖于后端开发完成时间。
那么，如何实现前端的无依赖的独立开发以提升效率呢？
假设在后端接口功能完成之前，我们就能够获得对应的模拟数据，作为接口的返回值来处理前端交互中的数据模型，然后在开发完成后，再将假数据的部分切换到真实的后端服务接口数据，这样开发阶段的这个阻碍问题就解决了。
所以，使用mock数据已经成为前端开发流程中必不可少的一环，对于在前端开发过程中使用某个数据的需求，其实现路径有很多。
常见的有四种形式：
- 直接在代码中书写静态返回数据来调试相关逻辑
- 使用后端开发服务来作为某服务将没有实现的功能，在后端先返回假数据。
- 本地化的Mock工具，使用项目本地化的某个规则文件来生成某个数据。
- 接入接口管理工具来提供独立的Mock能力。
书写静态返回值的数据和开发服务端返回小数据的方式，是前端同学从直接上最容易理解和实践的。但是对于书写静态返回值的数据，代码的维护成本、复杂接口的数据的实现规则和处理，以及特殊字段的额外处理等因素，都导致了在实际开发过程中的使用场景非常局限。
而而使用后端开发服务仍然依赖于后端提供相应的服务的独立性、稳定性和灵活性等方面，也很难达到前端独立开发的需求。
而剩下两种实现方案则各自有其适用场景或局限性，例如在后端已经提供这个文档，而团队内未使用这个管理工具的情况下，第三种本地化的某个工具的使用成本要更低，而最后一种则有一定的前期搭建成本和维护成本，但在前后端达成一致，使用业务管理工具的情况下的整体效率是更高的。
那么，我们应该怎样选择MOCK方法呢？
有以下几个指标可以进行考量：
- 仿真度。
Mock数据作为实际前后端调用时的数据模拟，需要在接口定义上尽可能的与后端实际提供接口的各方面都保持一致。从接口名称、方法、请求头信息到返回头的信息和范回值字段一致性越高，在后期切换到联调实际接口时所花费时间就越短。
因此，在使用Mock数据前，我们需要是前后端事先对结果定义上达成一致。数据定义的仿真度是决定实际模拟过程效率和质量的首要因素，这个工作通常在开发初期通过接口文档的方式来提供，或者是提供类似功能的包括工具来提供。
- 易用性。
在定义完接口文档后，那下一步是生成Mock数据，通常需要有工具将接口文档自动转换为某接口的能力。
接口文档作为前后端联调的一致性保证，当接口发生任何变化时，都首先更新到文档中，并自动反应到提供的某个术语中。
这种自动输出Mock数据以及自动测试接口能力，也是整个Mock方案应用性的考量标准之一。
- 灵活性。
实际的接口中，可能会根据不同接口调用方式与传入参数等条件来输出不同范返回值，前端根据不同条件下访问值差异做不同交互处理。
因此在选择Mock工具时，对于不同条件下返回不同数据的能力，也是我们选择Mock方案的考虑点之一。
常见的 mock 工具：
- Mock.js
这个是我们都比较熟悉的工具，它的核心能力是定义了两类生成模拟数据规范。一是数据模板定义规范，二是数据占位服务定义规范。
数据模板定义规范，约定了可以通过属性名生成规则，冒号属性值的这样的格式来生成模拟数据。如：
Mock.mock({
"number|1-1000":1
})
// 结果：1-1000 内的随机数 ，{number:35}
Mock.mock({
"boo|1-1000":true
})
// 结果：boo为true或 false ，true概率为1‰
Mock.mock({
"str|1-255":'1'
})
// 结果：str为1-255长度的随机字符串
Mockjs中定义了7种生成规则，根据这七种规则，再结合不同数据类型的属性值，就可以定义出任意我们所需要的随机数据生成逻辑。
数据占位服务定义规范，是对随机数据的一系列常用类型的预设，它的书写格式是@占位符。
Mock.mock( "@email")
// 随机单词拼接成的 email 数据
占位符既可以用于单独返回指定类型的随机数据，也能结合数据类型模板作为模板中属性值的部分来生成更复杂的数据类型。
在MockJS中共定义了9大类共42种占位符，有兴趣的可以研究研究官网。
除了提供生成模拟数据的规范和方法之外，MockJS还提供了一些辅助方法，包括Ajax请求拦截、数据验证和模板导出等。
- Faker.js
和 mockjs 相比，Faker.js主要提供的是指定类型的随机数据，使用起来比较直观，如：
let name = faker.name.findName()
let email = faker.internet.email()
faker.fake("{{name}}")
虽然没有 mockjs 那么灵活，但是对于常见的一般需求来说，它也能满足日常需求。
当然，在开发调试阶段，我们需要用到的工具很多，mock工具，接口调试工具都需要用到，而想要真正能够提升开发效率，就需要我们对这个工具的功能、特性、使用方式了如指掌。
了如指掌只是前提，我们还需要能够讲这些东西融入到我们的开发流程当中来，最终根据自身的情况，来使用这些工具，才能进一步提升开发效率和质量。
（完）
没有关注公众号的朋友，觉得文章对您有启发的话，记得点赞、关注、评论、转发一下。
