人员关系图技术拆解

这是给 Boss 用的查看部门组织结构的人员关系图，是基于 vis.js 进行的二次开发。

可以在入口加个 debugger，按照程序流程先跑一遍，有个大致了解。

思考：能否用关系图来展示程序设计？

用到的技术

vis.js：用于关系图的作图

Vue：左侧编辑区域的表单

babel：转换代码

webpack：打包

ivew：样式

程序设计

文件结构

src/index.js 已经没有用到了，现在把原来的单文件拆分成了多个模块，放入了 src/module 目录下，目前程序入口是 src/module/index.js

index 入口，里面包含了页面的 HTML 结构
Config 学校的配色
AddFieldLabel
CreateForm 左侧表单
Data 数据操作
docs 操作说明
Event 事件，比如左侧各个按钮的点击、显示右侧的提示框等
Layout 布局，和布局相关的计算都在这里，这个模块太大了，1000 多行，感觉可以拆分下。这个是整个项目最难的地方，需要摸透才行，否则一旦有需求变更，很难修改。
Render 渲染，这个类也比较大，包含了一些布局的配置项、一些事件监听；可以重构下
Searchbar 搜索，包括搜索框、自动补全框等
Util 工具，放了几个函数
Var 变量，定义了全局常量和变量

技术难点

螺旋布局

核心函数是 Event.js 中的 toggleRadial()，具体逻辑实现是 Layout.js 中的 circleLayout()。

这涉及很多三角函数的计算，比如角度、边长、旋转等等。

详细的内容可以看一下项目下的文档，之前的同事有画几何图形来进行讲解。

三角函数+平移+旋转，这是可视化布局中很好用的套路。

force 相关的调参

目前是手动调参，效率低下。后面考虑接入机器学习，自动计算最优参数。

不过这条路还很长，短期内是没时间精力做了。

布局-按层级显示所有

这个是在 Layout.js 的 hierarchy()这个方法中实现的，通过该方法递归计算出每一个节点的位置，然后进行绘图。

这个布局其实相对比较容易，因为层级是有严格规律的。我们将每一个节点及其子节点当成一个矩形，这样就可以保证节点与节点之间不会重叠。

这种抽象思维在解决布局中的重叠问题时非常有效。

发布

先压缩代码：

1	`npm run prod`

然后用 dist 目录下的 index.js，替换掉资源服务器上的这个文件即可(替换前最好资源服务器上的文件备个份)：

https://s.thsi.cn/js/company/person/0.3/index.js

一些技巧

定位代码

根据事件来定位是比较快的，事件一般都定义在 Render.js 中，根据事件名称找到对应的绑定代码，然后跟下去即可。

自定义事件

自定义事件，可以通过 network.on()来实现，比如这样：

1
2
3

network.on('savePositions', function (nodes) {
  // TODO
});

然后使用 network.emit()触发

1	`network.emit('savePositions', nodes);`

总结

怎么良好的划分模块？

将数据操作、视图渲染、事件完全分离开，就已经是很不错的设计了。

牢记前端是数据驱动的结果，如果这个理念没有深植人心，到后面随着代码和业务的增加，程序绝对会越来越烂，谨记。

优化

程序=数据结构+算法，因此我们理清楚这两部分内容就可以了。

优化需要一步步来，切记一上来就大面积重构大改。

第零步先搞一个 Vue 项目结构，把现有程序迁移进去

第一步先引入编码规范(ESLint 和 Husky)。

第二步先让代码看起来干净一些，删除无用的注释代码，整理第三方包的路径、样式文件的路径。

第三步让代码位于合适的文件夹中。

第四步抽取组件和抽象出类的概念，融入继承，设计生命周期。

第五步采用 Vue 进行操作栏的组件化开发。

最好的方法是设计一套和屎代码隔离的开发方式，让未来的功能更好维护和可测试，用旁路的思想把一些无法重构的功能做监控和功能测试，用删减或者更换功能来做代码量优化，再具体点，可以尝试引入 PAS 的项目维护方式，把垃圾代码独立，提取公共代码到独立模块，而不更改垃圾代码，改的只是垃圾代码的入口组织形式，建议好好读读重构相关的书，你甚至可以用优化一波变量名和注释的方式让大便上开出一道亮丽的风景线啊…

作者：小爝
链接：https://www.zhihu.com/question/347422660/answer/903140913
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

流程图

很遗憾，JS 因为是解释性语言，无法像 Java 这样，可以直接生成程序调用的流程图，只能我们自己手动调试编写流程图。