手把手教你开发可视化搭建平台

作过一些可视化搭建相关的工做，心得思考，和你们分享。
复制代码

前端同窗的工做内容中，经常有不少时间在写页面。组件化的出现，很大程度的提升了这方面的效率，也解决了标准化的问题。

但这还远远不够。

咱们但愿能经过 low-code 的方式，WYSIWYG（所见即所得） 的方式，将网页开发这件事变得更加简单，更加普及。试想，若是产品或运营能直接经过平台拖拖拽拽生成一个页面，这件事是否是颇有价值？

不少大型项目都在尝试用组件化+可视化搭建的方式解决这个问题。但在这个过程当中，咱们总会遇到各类各样的阻碍。好比：用户端的产品老是很难找到共通点，运营类的业务面对的更是设计上没法复制的创意。商业端的产品还好说，对 UI 没有太多定制需求，另外也关注体验一致性。

所以商业端产品搭配一套 ant.design 就能够开始搞可视化搭建啦。可是用户端产品先要想清楚定位，若是是一个长线，大规模的业务，一开始定义好“组件化”的思路对后面的工做相当重要。若是是一个偏运营向的业务，也能够有2中解决思路：丰富的组件化+可视化搭建 vs 智能化生成代码（根据设计稿还原HTML）。

阿里内部有不少尝试，比较有表明性的开源项目（其实也有不少优秀的还未开源的）：

1. 飞冰 定义组件，拖拽生成页面
2. imgcook 根据设计稿生成可维护代码，在此基础上进行拖拽配置编辑等二次操做

分别表明了2种思路，一种是先定义好组件——可拖拽的物料，一种是没有预先设定，直接根据算法识别对应到最基础的 HTML 标签。各有各的优点和试用场景，对于一个长期发展，迭代的项目来讲，前者更具备维护性。毕竟搭建物料（组件）的设计紧紧掌握在开发者的手中。

那么，接下来咱们经过一系列文章，来动手搞一个可视化搭建平台。

首先先介绍一些概念：

1. 核心功能：组件的定义和导入，拖拽，字段配置，数据绑定，事件交互。
2. 操做流程：经过拖拽组件生成页面，对组件进行一些配置操做，而后导入数据源，进行字段绑定，添加自定义交互（代码），最终导出页面。
3. 功能分区：物料区，搭建区，配置区，平台操做面板（可扩展）。

物料区

物料区组件的设计包含2部分：

1. 组件的内部实现
2. 组件可配置选项的描述(组件描述协议)

搭建区

1. 布局方式
   • 绝对定位
   • 基于组件树的结构化布局方式（可维护性强）
2. 渲染方式
   • iframe：渲染结果和平台无关，iframe 与外层通讯或者在 iframe 之上覆盖一个操做区
   • 包裹法：在组件外层包裹一层 DOM，封装一些拖拽操做（平台与组件同语言则最佳）

配置区

1. 设置器（setter）的实现（表单）
2. 结果变动从新触发渲染

以上，咱们采用结构化布局，包裹的渲染方式，加上一些设置器。就是一个特别简单的可视化搭建啦。下次，我来贴上代码实现哦。