本文主要介绍如何设计一个高扩展的在线网页制作平台，会交代一些背景和最终的效果以及核心设计方案。
背景
2018 年 3 月份开始，随着运满满的快速发展，开始在频繁的迭代各种活动，那时最快的方式就是拷贝老的活动项目，然后按需求修改，接着上线，然而这种方式很快就遇到了瓶颈，迫使运营团队也会去寻找一些第三方平台去满足自己的运营要求，不过由于定制化弱和用户信息没打通导致没办法大量使用，还是只能等待前端资源排期，两个比较突出的问题。
产品每个活动都需要前端人员介入，甚至替换一个简单的图标和简单的布局，都需要排期等待，吃掉了 50% 的前端资源。
市面上可使用的一些在线制作推广平台制作的页面又不能很好地结合到自己的业务流程里面。
转盘抽奖，如果使用第三方平台需要在活动结束后把抽奖名单导出，然后导入自己的平台里面去做匹配，然后在筛选中奖名单，很不方便。
拉新送红包，使用第三方的平台如果用户提交了拉新的手机号。需要定期去同步数据然后送红包，不能对接自己的平台做到实时。
针对这些问题团队迫切需要一个平台来提供运营快速创建活动，开发也能在这平台做一些功能扩展。最好能满足已下几个要求：
丰富的组件提供运营能自主创建页面。
每个做好的页面都可以设置为模板页面，提供运营下次快速通过模板创建页面简单修改然后发布。
提供常用动画然运营能创建炫酷效果的活动。
提供每个活动完整的数据分析方便运营查看效果，常规的 pv，uv，以及自定义页面的元素点击打点和统计功能。
提供灵活的页面管理，方便运营按组按项目维度给其他同事分配权限统一管理。
开发人员可以为组件植入脚本灵活扩展该活动的功能，方便运营使用。
提供统一的组件开发规范，方便开发新的业务组件为运营提供更友好的使用方式。
针对这些要求我们做了码良平台，码良是一个在线 H5 编辑器，用于快速制作 H5 页面。用户无需掌握复杂的编程技术，通过简单拖拽、少量配置即可制作精美的页面，可用于营销场景下的页面制作。同时，也为开发者提供了完备的编程接入能力，通过脚本和组件的形式获得强大的组件行为和交互控制能力。
核心设计
下面会分享下我们的核心设计，这次主要重点说明下面几方面内容
我们会介绍整体的架构来了解一般的编辑产生页面的基本思路，基于数据编程。
我们会介绍核心的组件如何设计，确保可以自由扩展组件能力
我们会介绍如何设计编辑器达到可自定义属性的控制面板
备注（由于整体项目实现使用的 VUE，所以后面有部分介绍具体技术实现的时候会以 VUE 的使用角度说明。用其他框架的自行脑补）
整体架构
1. 整体架构
整体架构相对简单，核心就是定义一套标准的数据规范，提供一个编辑器去编辑这个数据，同时提供一个解析器去解析该数据，然后渲染出页面，流程如下。
2. 数据结构
通过上面的图看到每个页面是由很多节点组成（node）, 每个节点可以嵌套子节点。而每个节点包括的基本信息如下，备注文章后续提到的 nodeInfo 都是该节点对应的如下数据
上图右部分可以看到渲染流程。为了达到组件的高扩展性，每个组件的功能包含两个主要部分
组件代码 , 每个组件都是有特定参数和特定功能的脚本实现，比如 图片，富文本，分享，九宫格等组件，组件代码通过对于的 type 和 path 参数去加载对于的脚本获取对象。
组件通过编辑器添加的脚本 , 编辑器可以为每个组件动态添加脚本来增强对组件的操作能力。如下操作, 可以看到一个组件可以添加多个脚本。每个脚本其实就是一个的 vue 组件，终这里面的代码会创建对象 mixin 到最终的 vue 组件里面，所以你可以为组件扩展各种功能进行支持你的特殊业务。
一个节点的逻辑功能 = 组件逻辑 + 脚本 1+ 脚本 2+ 脚本 3…
每个组件在根据自己的类型加载对应 js 脚本后，会对该组件 nodeInfo.script 里面的 逻辑进行 mixin. 然后创建一个最终的组件注册到 Vue.component 里面方便后续使用, 核心代码如下
总结
为了提供一套对运营友好，并且高扩展的 h5 活动制作平台我们做了这个码良平台。现在码良的平台现在支撑着运满满每天新增 5-10 个的新活动页面的需求，已有活动模板的活动 95% 可以营销人员通过模板创建，做些样式或图片的修改，然后发布到线上，整个过程就几分钟。活动的模板和组件模板也在不断沉淀，相信沉淀一段时间后随着模板越来越全，对营销活动的快速制作和可选择性都会更强。
作者介绍：
王坤明，满帮集团运满满公司上海前端负责人。高级前端开发工程师，长期关注 web 前端,nodejs 等领域。善于利用工具和提出工具来提高协作效率。
还木有评论哦，快来抢沙发吧~