前端可视化开发(二)- 框架选择

框架调研

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

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

  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

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

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

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

阅读 1.4k

推荐阅读
可视化开发之路
用户专栏

打造一个具备行业解决方案的可视化编辑器

10 人关注
6 篇文章
专栏主页