前端可視化開發（二）- 框架選擇

框架調研

爲了讓大家少走彎路，我總結了如下可借鑑的項目。若是大家願意，徹底能夠基於他們的基礎進行二次開發：

• 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

這些並不必定要會，可是若是能理解好這些，或許能幫助你更好的去理解這個編輯器的設計模型和框架。

下一期我將從最基礎的一個元素模型開始講解，一個最基礎的元素須要什麼？

上一篇 前端可視化開發（一）- 開篇
下一篇 前端可視化開發（三）- 基礎元素