带你读《2022技术人的百宝黑皮书》——我在淘宝做弹窗，2022 年初的回顾与展望（6）https://developer.aliyun.com/article/1340418?groupCode=taobaotech
数据层设计
数据层主要包含编辑器内部状态的管理以及对外的数据交互。由于编辑器的功能在于产出满足 DSL 规范的数据，因此对外的数据交互较为简单，核心应关注内部状态的管理。
为了保障状态变更的有序性和可维护性，我通过 immutable.js 将用户的每一次操作结果保存为一个「数据快照」， 并压入栈中。由于每一个快照都是一份不可变的满足 DSL 规范的数据，因此快照的每一次更新都可以促使预览模块即时渲染出最新的弹窗样式。从而通过严格的数据驱动渲染使整个应用的状态井然有序。并且由于预览模块采用了和线上一致的渲染引擎，因此还可以真正实现「所见即所得」的效果。
基于不可变数据结构的状态管理
同时，由于用户的每次操作结构都被保存下来，因此整个应用还可以轻松实现用户行为记录，回退功能，进一步提升用户体验。
逻辑层设计
在逻辑层要解决的核心问题是让应用具备灵活的扩展能力，为此，我将整个用户界面按照功能模块拆分成一个个有标准化接口的组件，并通过在底层实现一个有标准化「插槽」的 Layout 基座，使得每个功能模块都能以类似插件的方式，通过插拔形式拼装出一个具备完整功能的应用界面。
插件模块用于灵活插拔功能面板
通过这样的设计，使得每个功能区块均彼此独立，且可根据需求迅速扩展或移除，开发者不必担心会影响其他模块功能，并且应用还可以根据不同用户区分所要对外暴露的功能（稍后我们还会看到关于这项特性的一个实例）。
工程层设计
在工程层上，整个应用采用 TypeScript 约束变量类型并为开发者提供接口提示，并对核心工具类函数进行单元测试。通过集成集团 AppLint 规范，使代码在风格和使用上对齐淘宝最佳实践，从而最大限度减缓应用代码在多次迭代后的腐烂速率。
除了代码上的种种约束外，撰写清晰的产品，技术文档，并持续保持文档的新鲜程度，也是保障应用始终维持在可维护可扩展水平的重要因素。
下方展示了 PopLayer 整体方案的相关产品，技术文档目录，包含了用户，开发者所需了解的几乎所有内容。
PopLayer 4.0 官方文档
以上便是弹窗搭建平台 xEditor 在技术架构上的一些思考和设计，正是基于这些设计，xEditor 在能在业务快速迭代的过程中，始终保持敏捷，将弹窗搭建能力赋能给越来越多的业务。
带你读《2022技术人的百宝黑皮书》——我在淘宝做弹窗，2022 年初的回顾与展望（8）https://developer.aliyun.com/article/1340416?groupCode=taobaotech
