可视化组件的分层设计思路

最近让一个同事将项目开发中的功能抽取为组件，他遇到了一个问题，就是不知道该怎么抽取。因此我跟他讨论了好几次，这里将最终的一个组件抽取的分层思路记录一下。

绘图层

这一层做基础的绘图元素的封装，比如画节点、连线、箭头、文本标签，以及一些通用交互，比如连线跟随节点的移动而移动。

然后暴露通用的事件处理。

本层面向的用户是我们可视化内部的开发人员，目的是降低我们自己的开发成本。

插件层

这一层主要用于实现业务方的个性化需求，比如节点的个性化内容和样式、事件交互；个性化的布局等等。

这一层可以叠加多个插件。

这里其实已经带有业务属性了，算是定制层了。

本层面向的用户是我们可视化内部的开发人员，目的是降低我们自己的开发成本和扩展我们组件的能力范围。

业务层

这一层就是完全的业务定制了，基本不具备通用性。但是我们可以通过标准化设计，让其应用在所有该类业务中。

比如移动端的股权关系图，就可以跟产品、设计师讨论后，定制一个标准的数据、视觉、交互效果，供业务方开箱即用。

当然，这一层也可以适当暴露一些无需学习成本的配置项给业务方，比如节点的点击回调事件、样式配色等等。

本层面向的用户是业务方的开发人员，目的是降低业务方的开发成本，并形成标准化的产品设计。