北京50天项目收获
作者:admin 日期:2020-09-17这次赴北京，参与中科院某院组织项目，历时近一个半月。整个项目组由8个不同的单位派员组成，前端人员十多人。
项目采用前后端分离，前端框架VUE+element ui。也使用了原生SVG做一些控件的开发。
我担任前端工作：
1、负责搭建整个项目的前端框架和主体逻辑。撰写主干代码和路由表，做模块化的总体规划与示例。子单位只能在他们固定的目录，写固定名称的组件（我们称之为“槽位”），所以我们统筹组需要在原型设计的基础上，提前定出槽位。这个提前做的工作有时间要求，否则子单位不好开展工作。另外前期槽位如定得不合理的话，后期代码编写会有麻烦。我们统筹组总体还是达标了。
2、为各单位提供前端解释与咨询。各单位进场时间有前后，对项目理解也不一致。因此统筹组要帮助他们理解进场逻辑，并写出合格的组件。
3、以下主要是我们内部工作。安排人员开发几个重点组件（拖拽树、甘特图、圆形导航），这几个重点组件涵盖近二分之一的应用场景，非常重要。我做为前端组长，安排了专人来开发，追进度、规划要暴露的接口、做压力测试。（后文详细阐述）
4、使用element组件构建约20个页面。中间含有大量的列表、表单、弹窗。在element基础上也另外封装了一些组件。比如封了一个可拖动的el-dailog。
5、对全局scss的定义：使用了内置的element-variables变量文件，统一颜色及组件外观。
6、使用vuex进行跨组件通讯。
7、大量的api请求和前后端联调工作。（后文详细阐述）
三个组件的功能描述：
1、树组件：
这个树组件我们内部命名为gtree（类似脑图），节点上要通过拖拽行为增加子节点。树图与数据双向交互，节点可增、删、改。
我们使用了go.js（破解版）构建。
这个树的核心代码由黄工写的，外部事件由我进行定义和调试。
2、甘特图：
这个组件先后开发了两版。之前版本由赵工写的，性能方面有些问题。后面这一版由黄工写，外部接口由小周进行调试。
这一版避免了数据条数较多时的卡顿问题，在上下连续拖拽和展开时做了逐步加载，这是一个重大的升级。
“时间条”从头开始就是黄工写的，可以拖动移动，也可以拖动改变大小。
3、圆形导航：
这个圆形导航黄工写了SVG的环状实现。这个组件我全文reivew了代码，已经基本掌握。
环状实现用的SVG的原生PATH对象，这部分体现出黄工的算法功底。
以下谈谈我的收获：
1、前后端联调涉及大量的数据处理，要熟练地使用ES6语法和lodash库。对我本人来说，以前这方面实战得较少，这次跟小周、小任学了不少语法和技巧。
2、图形算法方面，黄工表现出非常高的开发效率。他对算法很熟，比如将四个数组转化成四个同心圆，并进行均分切割，再得到PATH对象。他对DOM模型很熟，比如手写了可拖拽变换宽度的长方形。文档阅读能力也很强，他读了gojs的英文版的官方文档，才完成了gtree的所有功能。我除了学习他的构建思路，还跟他学到了算法、控制台debugger的一些技巧。
3、对于VUE工程化、同步协作方面，有了一次完整的实践。比如模块化、路由、组件定义的粒度、VUEX、env环境变量的使用。
4、对后端接口调试有了比较完整的认识。比如HOST切换、数据异常时的一般呈现、数据前端加密、axios的封装等。
接下来的研发想法：
1、重点研发一下SVG图形写法（简单的用原生，复杂的用框架）。争取能自如地实现SVG图形化。
2、总结一下lodash的各种用法，尤其是跟日常工作相关的技法。
3、建议使用postman用到开发中，后端测试完样例，再交给前端，可较大提升前后端协同能力。
项目采用前后端分离，前端框架VUE+element ui。也使用了原生SVG做一些控件的开发。
我担任前端工作：
1、负责搭建整个项目的前端框架和主体逻辑。撰写主干代码和路由表，做模块化的总体规划与示例。子单位只能在他们固定的目录，写固定名称的组件（我们称之为“槽位”），所以我们统筹组需要在原型设计的基础上，提前定出槽位。这个提前做的工作有时间要求，否则子单位不好开展工作。另外前期槽位如定得不合理的话，后期代码编写会有麻烦。我们统筹组总体还是达标了。
2、为各单位提供前端解释与咨询。各单位进场时间有前后，对项目理解也不一致。因此统筹组要帮助他们理解进场逻辑，并写出合格的组件。
3、以下主要是我们内部工作。安排人员开发几个重点组件（拖拽树、甘特图、圆形导航），这几个重点组件涵盖近二分之一的应用场景，非常重要。我做为前端组长，安排了专人来开发，追进度、规划要暴露的接口、做压力测试。（后文详细阐述）
4、使用element组件构建约20个页面。中间含有大量的列表、表单、弹窗。在element基础上也另外封装了一些组件。比如封了一个可拖动的el-dailog。
5、对全局scss的定义：使用了内置的element-variables变量文件，统一颜色及组件外观。
6、使用vuex进行跨组件通讯。
7、大量的api请求和前后端联调工作。（后文详细阐述）
三个组件的功能描述：
1、树组件：
这个树组件我们内部命名为gtree（类似脑图），节点上要通过拖拽行为增加子节点。树图与数据双向交互，节点可增、删、改。
我们使用了go.js（破解版）构建。
这个树的核心代码由黄工写的，外部事件由我进行定义和调试。
2、甘特图：
这个组件先后开发了两版。之前版本由赵工写的，性能方面有些问题。后面这一版由黄工写，外部接口由小周进行调试。
这一版避免了数据条数较多时的卡顿问题，在上下连续拖拽和展开时做了逐步加载，这是一个重大的升级。
“时间条”从头开始就是黄工写的，可以拖动移动，也可以拖动改变大小。
3、圆形导航：
这个圆形导航黄工写了SVG的环状实现。这个组件我全文reivew了代码，已经基本掌握。
环状实现用的SVG的原生PATH对象，这部分体现出黄工的算法功底。
以下谈谈我的收获：
1、前后端联调涉及大量的数据处理，要熟练地使用ES6语法和lodash库。对我本人来说，以前这方面实战得较少，这次跟小周、小任学了不少语法和技巧。
2、图形算法方面，黄工表现出非常高的开发效率。他对算法很熟，比如将四个数组转化成四个同心圆，并进行均分切割，再得到PATH对象。他对DOM模型很熟，比如手写了可拖拽变换宽度的长方形。文档阅读能力也很强，他读了gojs的英文版的官方文档，才完成了gtree的所有功能。我除了学习他的构建思路，还跟他学到了算法、控制台debugger的一些技巧。
3、对于VUE工程化、同步协作方面，有了一次完整的实践。比如模块化、路由、组件定义的粒度、VUEX、env环境变量的使用。
4、对后端接口调试有了比较完整的认识。比如HOST切换、数据异常时的一般呈现、数据前端加密、axios的封装等。
接下来的研发想法：
1、重点研发一下SVG图形写法（简单的用原生，复杂的用框架）。争取能自如地实现SVG图形化。
2、总结一下lodash的各种用法，尤其是跟日常工作相关的技法。
3、建议使用postman用到开发中，后端测试完样例，再交给前端，可较大提升前后端协同能力。
