海豚系统自定义布局 京东全球购提效探索 （上篇）

海豚是京东国际频道业务研发支撑系统，主要负责京东国际频道在原生、M站以及小程序等多端需求。频道主页及下属三级分类页主要是以楼层的形式呈现各业务模块，包括商品展示、用户拉新、广告推送和运营活动等，随着京东国际频道品牌升级，个性化的业务需求爆发式增长，原有固化模板式的楼层开发已渐渐不能满足业务快速迭代的要求，针对这一痛点，海豚系统开始了楼层化自定义布局模式的探索。

为满足个性化业务需求快速迭代，实现少编码甚至零开发支撑功能上线，海豚系统从配置平台到服务端和前台做了一次全方位的架构升级，目标是通过本次升级后业务人员只需在配置平台按照需求，拖拽式的搭建出个性化自定义楼层，并关联系统内部或投放平台素材，完成一键发布，最后通过后台服务将楼层数据下发到前台展示，整个过程无需研发人员参与。

要满足这样的目标，数据协议的制定格外重要，海豚系统将页面数据分为了两部分，一部分是描述页面架构及楼层结构的布局数据，另一部分是展示到页面及楼层中的内容数据，内容与布局数据的解耦实现了单一模块数据更新，前台能够以微小的代价刷新页面。结合京东国际频道页楼层特点，自定义模块也遵循了布局与内容数据解耦的形式。海豚将自定义元素划分为楼层、容器与视图，楼层由容器和视图组合而成，容器是展示视图集合的场所，它划分为水平、垂直、绝对及网格布局，为使用较少的基础组件搭建出较复杂的界面功能，海豚初期决定只使用图片和文本这两个基础视图加容器嵌套的模式来实现自定义布局，界面结构使用JSON作为数据介质，支持简单的点击和横滑事件交互，这样的设计，大致已能满足80%以上需求搭建。

海豚自定义布局主要由三个模块构成，分别是界面配置平台、动态化服务和前台展示。界面配置平台是自定义布局界面的可视化编辑场所，主要完成布局配置和内容配置，然后通过控件id将布局和内容数据进行关联绑定。动态化服务提供两种数据服务，布局数据服务和内容数据服务，它将配置平台发布的布局信息和内容信息分别进行格式化处理，最终通过布局接口和内容接口以JSON格式下发到前台。前台是展示自定义布局的最终场所，从服务端的布局接口获取到布局数据后，内嵌在前台的自定义动态化SDK进行数据解析，然后从外到内逐步完成容器及其子容器和视图的初始化渲染工作，最后将内容接口获取到的内容数据更新到刚刚初始化的视图上，完成整个自定义界面的展示。

海豚系统有一套完整的配置平台，用于对京东国际频道主页进行业务配置，包括页面结构配置、楼层化业务模块配置以及各种运营活动入口配置等。通过配置平台，业务方能灵活上下线各种功能，目前已沉淀各类型固化模板楼层30多个，自定义楼层作为支撑个性化需求的特殊模板，也纳入到了配置平台中。与固化模板不同，除了数据绑定，自定义楼层还需要事先通过拖拽的方式把楼层结构搭建出来，这里我们使用容器嵌套的形式，最外层使用一个容器作为根容器，根据业务需求，它可以设置成水平、垂直、绝对或网格中的任意一种布局类型，然后向这个根容器中添加子容器和视图，子容器同样也可设置为上述四种布局类型中的任意一种，视图则是其父容器的叶子节点，这样，从结构上看自定义楼层是个标准的树。

业务人员可以使用界面配置平台通过图三中的自定义配置控件完成如图四中的自定义布局界面的编辑，这里仅列举了两种最常用的容器：垂直、水平容器，以及两种基本视图：图片、文本视图。页面配置人员可以随意组合以上容器和视图，容器不仅可以嵌套子视图，也可以嵌套子容器，以达到编辑出样式丰富的自定义界面。上图四中的示例布局就是一个最外层垂直容器1嵌套了两个水平子容器2和3，水平容器3中又嵌套了两个垂直子容器4和5，这些叶子节点子容器都分别嵌入了一个图片视图和一个文本视图。最终，图五所示的就是图四呈现的自定义布局树形结构。

完成自定义布局容器嵌套关系、位置、大小属性配置后，还可以根据需求设置容器和视图的圆角、颜色、尺寸及内外边距等布局属性，这些属性将在发布时一起上传到动态化服务进行布局数据处理。

接下来是内容数据配置，这一步相对简单，主要是对上述自定义界面中的图片视图和文本视图进行赋值，为图片视图设置图片地址，为文本视图设置文本内容。

由于自定义布局数据与内容数据是解耦的，两者之间通过控件id建立起对应关系，在配置平台完成界面配置后点击发布，布局数据和内容数据上传到服务端。服务端将上传过来的布局数据和内容数据分别进行格式化处理，并保持两者相同的嵌套关系，如下图六所示，最终生成标准的JSON数据下发给前台。

海豚系统前台主要由客户端（Android、iOS、Flutter）、M站以及小程序组成，它们都分别在各自框架中实现了对自定义数据的解析、渲染以及更新逻辑，使得自定义楼层在页面中的展示跟普通固化楼层没有区别。

到此，我们完成了海豚系统提效探索过程中在自定义布局方面的前半部分介绍，这部分里我们从背景和提效目标出发，介绍了自定义布局在海豚中的系统架构，以及三大构成模块，重点描述了自定义配置和服务数据结构，针对在前台的展示过程，我们将在下篇文章中详细介绍。