小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
本文同时参与 「掘力星计划」 ，赢取创作大礼包，挑战创作激励金
前言
不知道大家有没有发现越来越多的技术人员和非技术人员都在讨论这个低代码或者零代码来搭建一个平台。现在市场上也有很多这种可视化工具，有开源也有收费的，比如某班、某里、某易等等。我们公司也想做一个这样的平台，刚好也是我负责，之前我也没碰过这类的，也在探索中，所以我每完成一个阶段就写一篇博客，感兴趣的可以跟我一起来搭建。
什么叫低代码（Low Code Development）或零代码（No Code Development）呢？行业人员回复是：用少量的代码就能开发复杂的业务系统。然后更进一步，由此又催生出一个新的概念：零代码开发。我的理解就是把业务与项目工程分开，比如我把整个页面所有细节封装成组件库，然后搭建一个平台，通过拖拽或者动态配置页面对应的组件，组合成一个页面，无需重复开发多余的代码，只要维护好组件库即可。
前期的准备
我们公司基本上用的是Vue2.x框架来搭建项目的，所以使用react或者其他框架的，可以借鉴借鉴思路，搭一个react的可视化平台来分享给大家也行。
我一般做项目前都会先规划整个项目的开发方案以及项目规范、版本计划。所以我们第一篇讲的就是可视化平台方案
1、收集需求
我们公司是由多个技术部门组合起来的，每个部门都有自己业务需求以及观点，所以第一步需要收集所有人的意见，这样你开发出来的产品才有人用。我们收集到很多观点，我给大家罗列一些次数较多的：
- 支持个性化、多样化的功能
- 支持动态预览的功能
- 支持拖拉拽生成的功能
- 支持分享模版的功能
- 支持多种数据管理的功能
- 支持多种组件
- 支持个性化代码编辑器
- 支持多样自适应设备
- 独立性、权限划分 等等...
这次是我们收集的观点里面提到次数较多的一些看法，收集到观点之后，我们需要将观点进行划分归类，这才是我们的重头戏，也是头脑风暴的时刻
2、需求分类
我们先按照了大类进行划分，如下：
classDiagram
可视化工具 --|> 登录
可视化工具 --|> 控制台
可视化工具 --|> 编辑器内核
可视化工具 --|> 数据配置中心
class 登录{
权限划分
独立性
...
}
class 控制台{
项目管理
创建项目入口（区分移动端和pc端）
模版中心
项目分组
项目排序
项目预览
项目删除
...
}
class 编辑器内核{
工具栏
组件加载器
组件信息配置器
画布编辑器
发布
预览
回退
关联数据
}
class 数据配置中心 {
数据源管理
数据集管理
代码片段管理
}
上面是我们整体需求的大类，我们目前整理最这么多，接下来我们把大类分成小类，更加细化
3、细节分类
接下来这步也是比较重要的，如何把大类细化出更多小类，也是我们分析的一个难点，废话不多说，直接开干
3.1、控制台细节分类
classDiagram
控制台 --|> 项目分组
控制台 --|> 创建项目入口
控制台 --|> 项目预览
class 项目分组{
支持项目分组
互相移动组别
...
}
class 创建项目入口{
pc端创建入口
移动端创建入口
...
}
class 项目预览{
pc端预览界面
移动端预览界面
...
}
3.2、编辑器内核细节分类
classDiagram
编辑器内核 --|> 工具栏
编辑器内核 --|> 组件加载器
编辑器内核 --|> 画布编辑器
编辑器内核 --|> 组件信息配置器
class 工具栏{
返回控制台
控制图层栏显隐
控制组件栏显隐
控制右侧面板显隐
设置项目过滤器
查看组件更新
配置美化工具箱
切换画布迁移至移动端
配置蓝图编辑器
配置组件删除备份
发布
预览
帮助
报错
...
}
class 组件加载器{
分类、分组
多样化
合并成组合
辅助功能（控制层级、删除、锁定/解锁、收藏等等）
联动
...
}
class 组件信息配置器{
页面样式配置（屏幕大小、背景颜色、背景图、缩略图等）
组件尺寸
图表位置
旋转角度
透明度
数据接口
数据响应结果
交互事件
动态的css编辑器
动态的js编辑器
...
}
class 画布编辑器 {
支持设置多个参考线
支持元素/组拖拽
支持元素/组旋转
隐藏/展示参考线
面板快捷键
画布百分比
画布百分比进度条
全局缩放图观察图
...
}
当你把这些细节都划分好之后，还有一步更重要的事情等着你做。就是组件抽象化，组件都是代码开发出来，那如何把组件的配置信息抽象成操作form表单，让其用户可以直接通过配置来控制表单的信息。
这一篇的内容就到这里结束了，相信大家都有不同的观点，可以在评论区里面写下你的观点，好的观点我会纳入进来，后续也有可能将项目开源，让大家一起参与进来。
感谢大家的观看，这里是小小切图仔_可笑可笑，多多点赞、关注支持
