可视化开发的心酸路-之-框架选择

框架调研

为了让你们少走弯路，我总结了以下可借鉴的项目。如果你们愿意，完全可以基于他们的基础进行二次开发：

• draw.io 原型图设计编辑器 [https://github.com/jgraph/drawio]
• method draw svg 绘制编辑器 [https://github.com/methodofac…]
• Fabric.js canvas 图形编辑器 [https://github.com/fabricjs/f…]

为什么我不在此基础上进行二次开发？
大家都知道在已有的项目上进行二次开发难度有时也是很大的，你需要去阅读源码，去理解源码作者的思路，在此基础上进行重构工作。
我也读过这些源码（时间允许，我也可以将读过的源码写成博客），但是我个人还是倾向于自己重头开始去写一个编辑器，原因有以下几点：

1. 很多的开源项目其实并不能达到你要的期望，他们更局限于 svg 或 canvas 的其中一种（性能会更好），我可能更需要都能支持，因为我们并没有太多时间去写插件，我们用的可能是开源的项目去集成，类似 antV，echarts，handsometable，D3，three.js，fabric 等等，即要能支持 svg，又要能支持 canvas 和 dom。
2. 二次开发的工作不亚于从头开始设计框架，你去阅读源码，你就会明白了
3. 采用流行的框架，类型 vue，react，可以节省你更多的时间去做 dom 交互，让更多的心思放在模型的设计上

框架的选择

为什么是 vue?
项目中我用到了 vue，可为什么是 vue，不是 jquery，不是 react?
jquery 插件给我带来了浏览器兼容的便利性，简化了 js 与 dom 的操作，其实我们要实现的编辑器已经不需要考虑过多的浏览器兼容了，因为像这些图形类的对浏览器的性能要求比较高，具体其实可以看阿里的 dataV，已经不考虑 IE 的兼容了，要求用户最好使用最新的 chrome 浏览器。

不选 react 的原因是取决于我当时没有用过 react，我对 vue 比较熟悉，其实当我经过遇到一些难题之后，我会更推荐大家使用 react，不要问为什么，问就是不告诉你 …

技术储备

我前端技术感觉不是很精湛，也能做这样的项目么？
万事开端难，只要你勇于坚持，勇于解决难题，没有什么做不了的。但是这里我推荐你必备的一些前端基础知识：

1. canvas
2. svg
3. 设计模式
4. 数据结构
5. 面向对象编程
6. 内存泄漏
7. vue 或 react
8. typescript

这些并不一定要会，但是如果能理解好这些，或许能帮助你更好的去理解这个编辑器的设计模型和框架。

下一期我将从最基础的一个元素模型开始讲解，一个最基础的元素需要什么？