编辑器实现思路

复杂项目

业务的复杂性：

• 交互的复杂性
• 数据结构和状态的复杂性，例如级联选择器需要遍历树结构，还有一些需要链表、栈、队列等
• 多项目依赖，工程的复杂性
• 性能优化

流程的复杂性

• git flow
• lint 工具
• 单元测试
• commit信息
• Code Review
• CI/CD

---

开发一个编辑器

例如低代码的编辑器

编辑器的整体状态
增加和删除
属性渲染成表单
实时的反馈
插件化
* 拖拽
* 快捷键
* 右键菜单

---

为什么要开发UI组件库？因为多个项目都会用到组件库。

---

开发一个UI组件库

开发一个编辑器

核心技术

• 玩的是一个大状态
  • 拖动到哪的状态
  • 当前选中的状态
• 代码生成

从上图可以看出，整个数据流是闭环的，是通过数据来驱动视图的。

1. 要有一个管理全局状态的store
2. 将store渲染到视图上
3. 对视图上的操作（比如选中某个组件，或者拖动某个组件），将该组件所对应的属性渲染成表单
4. 操作表单，发射统一的change事件，里面包含那个元素，哪个属性，新的值等信息，再更新store
5. store再次渲染视图，这样就形成了一个数据流的闭环

上面的属性渲染表单可以参考 : form-render：https://xrender.fun/form-render

对右侧属性面板属性分类

组件总属性分为两大类：

• 业务组件 - 独特属性
• 通用属性 size、border、shadow等

拖拽移动图层的实现

• 拖动改变位置，待实现
• 拖动改变大小，待实现
• 快捷键需求
• 撤销恢复需求 DOM tree 比较 链接

技术栈选型

根据业务需求选择技术
TS：

• 有入参、出参提示
• 自动补全
• 代码严谨，更少的错误
• 良好的包容性，大型项目基本都用ts重构，即使没有也会提供ts声明文件

Vue vs React

• React采用的immutable的形式
• Vue通过改变数据来改变视图

开源技术

1. 图片裁剪cropper.js: https://www.npmjs.com/package/cropperjs

2. 列表拖拽

   • Vue：https://sortablejs.github.io/vue.draggable.next/#/simple
   • React：https://clauderic.github.io/react-sortable-hoc/#/basic-configuration/basic-usage?_k=ldvmvm
   • mdn：https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API

3. 数组移动：array-move

4. 正则分析: https://regexr.com/

5. 好用的按键响应库：HotKeys.js

6. clipboard.js