我在闲鱼做搭建——魔鱼搭投编辑器介绍

背景

魔鱼搭投编辑器是一个前端页面可视化搭建工具，运营借助编辑器可以调用搭投的底层能力，在无需开发介入的情况下，自主修改页面内容；简单举几个需求场景增强一下体感：

结合上回《闲鱼前端技术体系的背后——魔鱼》的介绍，我们回顾建设魔鱼平台的目标：

1. 1. 提升前端研发效率，收敛工程研发管理流程；

2. 2. 动态数据源可配置投放，从而在网关层优化页面首屏性能；

3. 3. 运营自主高效准确的干预投放数据；

这些目标在搭投编辑器中设计中都有涉及，本文结合需求来介绍背后的思考和技术细节，希望给对搭建感兴趣的同学一些启发。

架构

魔鱼页面编辑器链接了搭投系统的多个链路：研发编写页面提供配置表单，对接底层系统使运营能可视化搭建页面和修改投放数据，对接网关补全动态数据，对接渲染引擎渲染最终页面等，功能涉及面很广。另外，阿里前端作为电商领域研究多年的技术团队，内部自然对页面搭建技术有大量基础建设，从图上可以看到，魔鱼页面编辑器的建设依赖很多外部系统的支持，结合闲鱼需求场景和对已有技术的选型，魔鱼团队得以在2个月的时间完成一套搭建方案的上线。

实现

搭建领域模型

魔鱼的底层搭建能力基于集团(天马)搭建底层技术设计的PMT模型
P：即Page，指搭建系统中创建的页面；
M：指Module，指搭建系统所创建的页面中的模块；
T：TAG，指搭建系统中，页面中模块的每一个可用来投放数据的单位（资源位）；
在此之上，我们提供出排期策略模型Strategy，魔鱼设计一个模块只有一个TAG，因此每个模块都只有一个资源位，以魔鱼源码搭建为例图示一下模型间的关系：

天马基于PMT设计规范提供了串联操作页面，模块，资源位之间关系的底层能力，魔鱼依赖于此开发可视化搭建的功能，并通过设计资源位和排期系统的交互，提供