伴鱼运营活动前端配置化实践

基于上述的描述总结一下问题：

• 代码仓库庞大，长期代码冗余加剧，维护成本高，导致代码质量、研发效率降低。

• 对运营的支撑不灵活，小的发版对整体项目造成安全隐患。

因此基于质量、效率、安全的纬度，我将 h5 可视化平台划分为三个模块

• 组件开发脚手架：

我们提供了脚手架让开发高效、规范化的进行组的开发与发布

• 可视化编辑器：

提供将组件拼装成页面的能力。

• 管理后台：

人员、组件、页面等纬度的权限与版本管理能力。

组件开发

该模块我们要从代码源头把握研发的质量与效率，因此脚手架提供了统一的组件开发模版，且每个组件在发布时候都需要关联到 git 源代码管理的仓库，这样就将原有庞大的代码仓库，以研发组件纬度进行了仓库解耦，到这里你可能会有疑问，解耦之后我的通用模块如何调用？比如桥功能，接口调用，这里我们结合 webpack 的生态能力，在研发模式下，我们将通用能力的以 externals 的形式在组件中调用，同时在打包发布阶段只发布组件本身的内容，从而减少了组件代码体积。当然影响研发效率的问题还有很多，比如 h5 开发通常用到桥的能力，本地预览的能力，属性编辑的能力等这里我们都研发对应的模拟桥工具，动态表单，iframe 等模式来解决上面的问题。

除了去研发模式的思考，基于业务我们也将组件进行了划分，方便对业务进行有力的支撑，以下是我们的组件模块划分。

• 业务组件：

顾名思义就是我们之前整理好各种常用业务规则所开发的组件，为特定业务所服务，比如我在业务规则服务划分的时候有拼团、签到等服务模块，对应的展示层我们一些通用的组件方便类似业务的直接使用。

• 基础组件：

基础组件是我们常用的基本 ui 组件，比如按钮，文本、图片等，达到基础的视图要求。

• 功能组件（待讨论）

这个是我们比较特殊的一个组件类型，业务组件与基础组件都有一些通用的行为，比如我点击按钮弹出桥分享的能力以及对组件统计曝光的能力，此类的组件没有 ui 的作用，仅提为组件注入通用的交互行为。

下面以图文的形式大家作下展示

avatar

这是我们组件开发的界面，为了可以更好的给开发者提供开发环境，我们集成了编辑器的所有功能，从而保证展示效果是一致的。

功能

组件作为整个波塞冬重要的部分，在设计的时候我们考虑集成了以下大功能：

配置数据

对页面的可编辑部分，需要准确描述可编辑部分所需的配置数据; 配置数据是异构的，不同页面、不同区块的配置数据各不相同。所以需要对不同页面、不同区块定义各自配置数据的数据结构和字段类型。

最理想的配置数据格式为 JSON，因为其格式灵活，前端友好; 最理想的配置数据描述是 JSON Schema，因为其支持表单动态生成和数据校验。

组件交互

上面我们有讲到，将所有的组件代码解耦分布在不同的仓库，看下图描述的场景。

avatar

我们最终要解决的是不同组件的通信问题，跨组件通信大家都不陌生，比如EventBus等，结合到业务我们需要解决将组件的内部的方法暴露给其他组件，并且在指定的绑定事件（点击、焦点等）中触发方法。在实践中划分两部分解决这个问题：

1）组件开发阶段，在组件描述的中定义方法名字，比如我们约定描述属性名称为editorMethods，需要对外暴露的方法为goShare，这样组件就对外提供了方法。

2）组件编辑阶段，编辑器内部维护了一个存放当前组件中所有对外方法的数组，以及可以交互的事件，当选中具体组件的时候，可以指定绑定组件的事件方法。下图为在编辑器中的使用展示。

avatar

数据总线

数据总线主要解决了组件之间数据共享问题。同样结合下面图的场景理解，后端接口的数据多个组件都会使用到，每个组件中都调用一次接口会造成性能问题。vuex可以很好的解决这个问题，在编辑器内部定义约定Store的对象，不同的接口数据设置不同的Store对象属性，既可实现数据共享的能力。

avatar

页面模板

模板是带有默认数据的页面; 对于组件化的页面，模板是从组件库中选取部分组件，并带有各个组件的默认数据。采用模板生成页面，只需对模板进行少量编辑即可实现页面快速生成，比如项目中沉淀了许多海报模版，素材库模版，直播模版等

页面编辑器

原有的方式中都是一个代码仓库中代码形式的组件复用，编辑器让组件的复用也可视化的方式，简单的页面组装让非研发同学也可以做页面。

avatar

这是我们波塞冬编辑器的编辑页面，总共五个部分。顶部主要是我们的页面设置部分，提供了页面的保存发布预览等功能。下部分从左往右依次是：

• 组件列表：

这里展示我们通过组件工具发布的所有组件。

• 页面组件树：

页面组件树是页面的骨架，由内置的各个组件组成。

• 展示编辑区域：

这里主要是进行组件的位置操作，拖拽组件的位置，进行页面编辑。

• 属性模块：

因为每个组件都有可配置的属性，这里主要是根据选中的组件进行配置，比如按钮组件的颜色大小等，取决于这个组件有什么属性。

管理后台

---

管理后台是整个可视化的控制枢纽，重点在于对业务场景应用的管控。做为一个平台组件可以随心所欲的发布，但不可发布的组件并不能都生效，因此平台要对发布组件做质量检查，通过审核后才能在可视化编辑区使用；同样页面可以随意的创建，但是不能让别人轻易动我创建的页面，比如 a 业务的同学，编辑并发布了 b 业务的页面，因此在页面上层我们划分了项目团队的概念，只有项目中的成员可以修改归属于项目的页面。现在我们发布页面方便了，原有代码部署的方式发现错误我们可以快速回滚，这里我们同样提供了页面回滚的能力，每次的编辑器内发布的内容都会有一条 content 内容发布记录，方便回滚历史提交，以上就是对后台的介绍。

展望

–

目前波塞冬平台体系还处于建设的初级阶段，可视化部分承载了目前业务内的所有海报生成工作以及部分活动页面，在互联网已经进入下半场舆论下，用户运营已经成为各大公司的重中之重，能够对用户做到精细化的运营，对公司成本、效率越来越重要，做为技术人员我们以技术驱动产生平台，用平台支撑业务发展，从而使公司变得更大更强，未来我们期待波塞冬体系能够成为建设完成，成为真正的海神。

参考文献

---

• 页面可视化搭建工具前生今世

• 美团乐高

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！