共计 3132 个字符，预计需要花费 8 分钟才能阅读完成。
导读
Mock 是一个接口编辑模仿工具，能够疾速手动或者基于 YAPI 创立 Mock 接口模仿数据调试，同时反对场景，场景组的疾速切换，不便在开发期和测试阶段试验不同数据返回的 UI 性能逻辑。
Mooncake 数据模仿平台是得物对立的针对端侧（包含前端，客户端），与服务侧联调 Mock 的一款工具产品，在平台外部能够疾速的创立各个我的项目产品的 Mock 多场景数据。本文次要聚焦 Mooncake 数据模仿平台的摸索和实际。
0. 前言
在技术研发过程中，常常会遇到端侧前置开发，UI 链路自测，非凡问题复现等场景，此时往往服务端侧数据未筹备好，或者难以提供特定场景数据，以及多场景的切换等。而针对服务端造数，存在老本高，链路长不稳固等问题，此时 UI 端侧的数据模仿，则会作为开发调试的必备伎俩。
现今，在得物技术部，借助 Mooncake 数据模仿平台，曾经能够疾速地实现接口 Mock 数据的创立，基于类型定义生成，基于抓包创立，基于自定义函数等形式，同时反对前端，客户端同学，疾速模仿数据测试，验证页面，业务链路，同时也能疾速生成二维码不便测试和产品同学，前置做产品 UI 测试和验收。
Mooncake 数据模仿平台从立项之初，到最终落地，在过程中咱们总结了一些摸索和实际总结。明天在此，次要介绍包含三个局部：
- 产品简略介绍，以及为什么要做？
- 平台产品是如何设计的，有哪些技术点？
- 技术产品的推广策略是什么样的，如何落地？
1. Mooncake 数据模仿平台
Mooncake 数据模仿平台是得物对立的针对端侧（包含前端，客户端），与服务侧联调 Mock 的一款工具产品，如下所示，在平台能够疾速的创立各个我的项目产品的 Mock 多场景数据。
2. 解决了什么问题？
在 Mooncake 平台之前，前端个别应用批改本地代码填充 Mock 数据，或者应用接口门路转换形式替换申请门路来实现 Mock，进行测试，这种往往须要对前端代码有革新老本，针对一个接口存在多个场景，往往须要进行来回切换验证，如果一个场景链路中，往往须要多个接口返回固定的数据，须要一个个接口替换验证，没有线上存档，难以共享，数据切换，链路验证繁琐。
基于如上问题，Mooncake 平台着力实现了如下性能，来升高 UI 侧与服务侧联调的造数老本，以及验收侧的沟通老本。次要包含，基于插件的 Mock 代理性能，以及视觉验收流程。
- 借用 Mock 的多端代理插件，无侵入进行 Mock 需要，随时开启敞开
- 借用线上平台，能够不便多人共享，开启和切换 Mock 数据的应用场景
- 应用场景链路性能，能够不便测试一整条链路
3. 产品整体设计
Mock 产品整体，包含线上配置平台，Mock 代理层，Mock 代理注入（仅 H5 有注入）三个板块。
- 底层线上平台提供空间信息，接口，场景，场景链路等，并在线上平台中反对包含超时限流的能力，数据缓存能力，以及依据申请门路，空间，申请办法名返回 Mock 数据的能力等
- Mock 代理层，包含外围申请劫持逻辑，依照不同端，劫持不同局部，如 H5 个别劫持浏览器中的 XHR 和 Fetch 对象，SSR 端劫持的 HTTPClient，Android，IOS，Flutter 等劫持了外围的 HTTP 申请模块
- 产品性能用处上反对 YAPI 数据生成，主动匹配生成 Mock，Mock 抓包性能，接口变更告诉，链路配置验收等性能
- 最终能够反对如产品 UI 验收，测试回归，问题场景复现，Mock 数据研发等一系列性能
4. Mooncake 平台技术点介绍
Mooncake 平台自身技术并不简单，但绝对于个别的 Mock 工具，在实现思路上，可能有所差别。在此就 Mock 插件代理的次要流程，以及线上平台中的抓包流程做简略介绍。
4.1 Chrome 插件 Mock 代理流程
首先 Chrome 插件开启后将 MockProxy.js 注入到页面的 Header 中，而后 Proxy 改写页面中全局的 Fetch 和 XHR 对象，将页面发动的申请替换成申请 Mooncake 平台的 getMockData 申请，并带上申请门路，申请办法，空间 Code，和申请参数等信息，如果查问不到数据申请，会再去申请实在接口。
如果能够查问到 Mock 数据，Proxy 插件会对返回的配置数据进行解决（包含执行动静 JS 等），并将最终经用户配置的预期返回，返回给 Fetch 和 XHR 的 response，那么用户间接拿到的数据即为配置的数据局部。
4.2 H5 页面 Mock 抓包性能实现
如下图所示，点击开启抓包面板后，再去操作业务页面（已注入 MockProxy 脚本），抓包面板会相似 Charles 那样，实时更新以后申请的数据，并用以用户勾选所须要的接口进行 Mock 场景的生成。
具体实现如下：
- 首先页面点击抓包按钮，关上抓包面板，会调用后盾服务，设置以后空间抓取开关标记位开启
- 业务页面在注入劫持脚本后，申请逻辑会通过 Mock 服务，Mock 服务返回的申请数据外面，带有标记位信息 auto 为 true
- 则会在业务页面进行实在申请的数据上报到 Mock 服务进行落长期库
- 而后抓包面板会去申请 Mock 服务端最新的抓包数据信息
- Mock 服务端会轮询如果有更新的申请数据，进行返回，否则异步期待
- 如果超时工夫过后，没有数据更新，则会中断轮询，进行抓包
整体流程如下所示：
至此，无需配置网络端口代理，就能相似 Charles 那样，实现接口的抓包申请。
5. 技术产品推广经营策略
除了上述产品整体设计，技术计划点的设计开发外，技术产品在上线后，才是次要工作的刚刚开始。往往须要进行长期的用户宣发，产品迭代欠缺，直至产品打磨残缺，用户能有肯定规模。在此简略介绍下，Mooncake 平台在推广的迭代过程中的一些策略形式。
5.1 产品宣发 & 欠缺
首先，后期 Mooncake 平台通过与各团队进行沟通，约会组织产品和技术分享，先后组织分享 20 次以上，从首期性能上线，到大的产品迭代变更，给及时同步到大前端外部的各团队同学，次要用以收集用户体验问题，并排期进行产品功能完善。
这个阶段还是以健全性能，欠缺产品体验为主，可能会有比拟多的答疑工作，须要保护好答疑群，做好用户文档编写工作，其中用户文档，须要能做到以下几点。
- 分用户和场景写文档，而不是分产品菜单写
- 及时更新，对新上线需要及时更新应用
- 足够易用，录制操作视频等
5.2 扩充产品影响力
中期时，次要扩宽产品的用户面，Mooncake 平台从服务大前端外部，辐射到效率前端，客户端，测试同学等，在产品性能上进行大的降级，而后期间依旧会通过会议分享、外部宣发，发现潜在用户。
同时，针对产品应用开始制作数据报表，观测双周应用数据状况。同时开始发放产品应用问卷，理解进一步的产品体验晋升点，以及后续的产品发力方向。
5.3 基于数据经营
前期在产品推到肯定阶段后，开始 By 天，By 人，制作报表，理解具体产品数据状况，包含用户应用异样，用户粘性状况，用户散布状况等。
- 比方新增了场景，然而没调用的异常情况，须要人为跟进，是否产品应用存在问题；
- 比方双周沉闷用户散失了，跟进具体同学，理解最近迭代未应用的起因，是最近无 Mock 需要，做技术迭代了等天然起因，还是其余起因，在此须要尽量避免产品应用层面的惋惜散失；
- 比方按板块关注不同端侧的人数与应用数的占比状况，判断是否须要在某个用户组加大推广力度等。
6. 我的项目总结 & 瞻望
目前 Mooncake 平台在外部曾经累计几百用户，近万个数据场景，双周沉闷用户百 +，后续产品将通过自动化测试来进一步升高产品 UI 链路验收人工成本，让测试提供外围用例，开发同学自动化进行链路回归；而后与数据服务平台进行深度交融，缩小从接口定义，到 Mock 数据生成中的产品割裂。
将来的 Mooncake 平台会将演变成联合接口文档、服务市场、数据 Mock、自动化测试等为一体的综合研发测试工具平台。
文 / 凌瑶
关注得物技术，做最潮技术人！