[JS] ：如何用Raphael.js构建复杂Web页面应用

0.前言

最近一个项目是为FCA菲亚特工厂实现生产线上托盘的流动和逻辑结构的Web页面，业务挺复杂的，Web技术方面选择了jQuery和Raphael.js，这整个项目我独立完成了前后端数据库，前端Raphael.js更是从0开始学习，到最后完成，走了很多弯路。因为业务和需求不一样，这篇博客不一定对所有人都有帮助，但是我希望写这篇博客是给相同需求的人提供一点点我个人的经验。

1.SVG和Raphael.js简介

2.相关链接

• Raphael.js Github
  https://github.com/DmitryBaranovskiy/raphael
• Raphael.js 官方文档
  https://dmitrybaranovskiy.github.io/raphael/
• Raphael.js 在线例子
  https://jsfiddle.net/cops/4p8vdhab/
  这是一个在线编译器，里面已经有一个Raphael应用的例子，你可以参考并且修改并尝试自己的代码。
• SVG自定义复杂图形在线构建
  https://editor.method.ac/#move_front
  这是一个在线的SVG元素构建的编译器，我当时需要用到箭头和循环图标等一些较复杂的SVG元素，用这个以后省了很多功夫。这里生成的代码你可以直接转成Raphael.js里面的path，然后给定坐标就行。
• Raphael.js 中文博客
  1.https://blog.zfanw.com/raphael-js-tutorial/#%E5%8A%A8%E7%94%BB%E6%95%88%E6%9E%9C
  2.https://www.cnblogs.com/stephenykk/p/3553690.html
  3.https://www.cnblogs.com/idealer3d/p/LearningRaphaelJSVectorGraphics.html

3.实际应用和技巧

• 1.给页面的元素创建JS object，然后赋予属性和方法，而不是直接给Raphael.js里面的elements加上很多的attr。实际上这是JS的使用技巧，因为这样做可以构建复杂的页面元素，然后复用，可拓展性也非常高。
• 2.官方文档一定要比较熟，不熟就多看，因为这样才能合理使用官方提供的api
• 3.为页面元素赋予用户操作时（）
• 4.合适的采用动画animate，可以使页面交互性更好。

4.少走弯路的经验

• 业务复杂时，一定不要急着开始敲代码，要把逻辑想清楚了再实际开始
• 学会借鉴别人的经验和逻辑，特别是借鉴经验丰富的人，虽然需求不一样，但是有些地方可以让我们少走弯路