带你读《2022技术人的百宝黑皮书》——我在淘宝做弹窗，2022 年初的回顾与展望（9）

带你读《2022技术人的百宝黑皮书》——我在淘宝做弹窗，2022 年初的回顾与展望（8）https://developer.aliyun.com/article/1340416?groupCode=taobaotech

新增易用功能

除了为不同需求的用户提供恰到好处的功能之外，我们还新增了一些功能用来进一步提升用户的搭建效率，并将更多过去无法通过搭建形式创建的弹窗需求纳入新的搭建体系。在众多功能中，比较有代表性的是以下两个：

数据 MOCK 功能

当弹窗涉及与服务端的请求交互时，特别是弹窗的内容取决于服务端返回的字段时，以往的弹窗编辑器均不能很好的处理这样的情景，只能兜底返回 undefined 这样的字段，破坏所见即所得的使用体验。

而 xEditor 通过新增数据 mock 功能来解决这个问题，通过在配置接口时，允许用户填充与线上响应数据一致的mock 数据，即时显示对应的弹窗样式，从而避免反复扫码真机预览所带来的时间损耗。

基于数据 mock 功能，xEditor 还可以在搭建侧轻松实现「前后端分离」的生产效果，即当服务端接口尚在开发中时，只要双方约定一致的数据结构，运营或开发就可以按照该数据提前搭建好弹窗样式，待接口完毕后无缝衔接上线，下面是展示这一强大功能的实操录屏：

注意到了吗？用户甚至可以添加多份 mock 数据，并任意切换，视图会根据选择的 mock 数据即时更新！这在弹窗对不同响应数据响应不同样式时就会非常便利，并且用户也可以通过故意设置特殊的数据值，来测试检验弹窗的样式是否正常。

注意：所设置的 mock 数据仅在编辑器中生效。

复合条件判断功能

除了在弹窗上直接展示服务端返回的数据之外，在一些场景下，弹窗需要根据服务端返回的数据展示不一样的界面，并且对数据的判断逻辑也较为复杂。此时，就是 xEditor 复合条件判断功能登场的好时机了。

通过 xEditor 提供的多状态切换 + 状态曝光条件判断 + 数据 mock 功能，用户可以非常直观且方便的搭建包含复杂逻辑判断的弹窗，下面的视频展示了这样一个案例：弹窗包含 2 两个状态，当请求的返回结果满足状态 1 时，会展

示状态 1 样式，否则，展示状态 2 样式：

除此之外，状态的条件判断功能理论上支持无限嵌套，能够满足各类复合条件判断需求。

可无限延伸的数据判断面板

最终的复合条件将会表现为如下数据结构：

带你读《2022技术人的百宝黑皮书》——我在淘宝做弹窗，2022 年初的回顾与展望（10）https://developer.aliyun.com/article/1340413?groupCode=taobaotech