低代码前端原理图
2019-11-21 10:46:29 196 举报AI智能生成
登录查看完整内容
react源码思维导图
作者其他创作
大纲/内容
本端是是实现低代码项目的难点所在，重点在于数据的管理、组件的管理。
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+/-
快捷键事件的实现
其它功能
编辑器（B端）
因为本端面向用户，因此用体验非常重要，优化手段是实现的一个重点，也是面试时候的一个常见考点和拓展方向。
Reac+TS+SSR+SSG
1. 根据组件类别直接在前端渲染，缺点是一旦遇到复杂页面，如大量图片、地图等，可能会导致非常慢，
优化手段：进度条、懒加载。
2. SSR，适合复杂页面，加快前端响应速度。
3. SSR虽然可以提高页面的响应，但是还是在用户进入页面之前就渲染的，因此可以使用SS，这样就可以在用户发布之后，就提前生成HTML。
渲染方式
影响加载速度的主要是服务端数据获取、组件渲染、图片加载、地图资源加载等
这个是最简单的处理手段，不应该重点依赖，重点参考下面其它手段
1. 进度条
这个是重要优化手段，当然也比较考验你的技术。
2. 参考渲染方式
主要为了长页面和多页面，即先加载用户看到的，用户看不到或者晚点才能看到的可以晚一会儿加载。
3. 动态加载
优化手段
这意味着页面元素可能会非常多，一次性加载会很慢，这个时候要考虑优化，参考上面的渲染方式和动态加载。
复杂页面
生成器（C端）
vercel
部署
低代码前端原理图
0 条评论
回复 删除
下一页
