前端可视化开发（二）- 框架选择

框架调研

为了让大家少走弯路，我总结了如下可借鉴的项目。若是大家愿意，彻底能够基于他们的基础进行二次开发：

• 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

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

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

上一篇 前端可视化开发（一）- 开篇
下一篇 前端可视化开发（三）- 基础元素