低代码前端原理图
2019-11-21 10:46:29 198 举报AI智能生成
react源码思维导图
作者其他创作
大纲/内容
编辑器（B端）
本端是是实现低代码项目的难点所在，重点在于数据的管理、组件的管理。
技术选择
Vite+React+TS+ReactRouter+Zustand+Immer+loadash
技术实现
1. 注册登录
2. 状态管理与逻辑复用
3. 组件的增删改查以及数据存储
4. 建立参考线
last. 部署发布
数据存储
数据存储方式
JSON存储
画布数据
页面ID
记录页面的唯一标识
不可修改
页面标题
页面的title
可修改
画布属性
背景色、背景图片、画布宽高等
组件属性
普通属性，font、color、border等
宽、高、绝对位置
旋转角度
模板选择
用户可以把自己的页面设置为模板，方便自己或者其它人复用
组件
组件列表
文本
子主题
图片
图形
四边形(空心、实心)
线(横|竖)
Form
地图
组合
子组件对齐
水平、垂直对齐
移动
添加组件
1. 点击组件列表里的组件
把组件放到用户刚刚鼠标活跃的地方或者是页面的左上角
2. 拖拽组件列表里的组件
此时需要计算出来画布中的位置
3. 在画布上通过复制其它组件
此时新组件可以在原先的基础上拷贝一份，但是可以为了让用户看出位置而稍微向右下方偏移一下
删除组件
选中组件并右键，可以根据菜单直接删除即可
编辑组件
通过右侧属性栏，此时注意不同组件的属性也会不同
一般属性，如font、color等
旋转
border
跳转事件
选中组件
1. 因为组件有上下层级关系，所以一旦组件被其它组件覆盖或者组件太小，这个时候很难选中，所以这个时候需要查找附近附件
2. 为了兼容多个组件的选中，在这里我把所有选择组件的下标存到了Set中。
移动组件
拖拽移动
边界情况
1. 移出画布范围，此时应该只显示画布内的部分，可以使用clip属性
对齐其它组件
参考PS，当和其它组件横向或者竖向接近的时候，此时与其它组件
画布
画布设置的大小就是呈现给用户的页面的参考大小，实际呈现在C端的时候需要再适配。
属性修改
画布整体属性
选中组件的属性
参考编辑组件里
允许用户自定义代码来修改属性
其它功能
撤销/回退
可以把历史记录在数组中，但是为了内存考虑，我限制了历史的最大长度是100，超出则删除最早的。
在撤销回退过程中，此时历史下标为currentIndex，如果此时用户又去修改画布或者组件属性，重新插入了新的历史进来，那么把currentIndex之后的记录全部删除，再把新的画布数据插入进来。
这条需要再测试下
需要设置canvasChangeHistoryIndex，记录当前用户处于哪个历史阶段
页面状态
保存
只是存到了服务端一份数据，但是并没有发布上线，C端用户并不能访问。
发布
发布到C端用户可以访问。
画布的放大/缩小
当前网页有限，可以适当放大/缩小，方便B端用户编辑。
快捷键事件的实现
保存
CTR+S
撤销/回退
CTR+Z/CTR+shift+Z
画布的放大/缩小
CTR+/-
生成器（C端）
因为本端面向用户，因此用体验非常重要，优化手段是实现的一个重点，也是面试时候的一个常见考点和拓展方向。
技术选择
Reac+TS+SSR+SSG
渲染方式
1. 根据组件类别直接在前端渲染，缺点是一旦遇到复杂页面，如大量图片、地图等，可能会导致非常慢，
2. SSR，适合复杂页面，加快前端响应速度。
优化手段：进度条、懒加载。
3. SSR虽然可以提高页面的响应，但是还是在用户进入页面之前就渲染的，因此可以使用SS，这样就可以在用户发布之后，就提前生成HTML。
优化手段
影响加载速度的主要是服务端数据获取、组件渲染、图片加载、地图资源加载等
1. 进度条
这个是最简单的处理手段，不应该重点依赖，重点参考下面其它手段
2. 参考渲染方式
这个是重要优化手段，当然也比较考验你的技术。
3. 动态加载
主要为了长页面和多页面，即先加载用户看到的，用户看不到或者晚点才能看到的可以晚一会儿加载。
复杂页面
这意味着页面元素可能会非常多，一次性加载会很慢，这个时候要考虑优化，参考上面的渲染方式和动态加载。
部署
vercel
收藏
收藏
0 条评论
下一页
