svgRingButton(简单的模块封装)

因为目前工作相对紧张且有相对较为复杂的算法在啃（关于D3力学图向3维引申的算法问题，在时间复杂度优化上遇到了些困难，D3本身的四叉树封装相对于常见的四叉树更为个性化、在向八叉树引申时遇到了困难），进展不是十分顺利。同时圈子里搞程序的工程师在svg的环状按钮组上尝试了很久，并且在自己的找工作的面试过程中也经常被问到一些关于模块封装的问题。在大问题进展不顺利的情境下，这里尝试实现一个简单的svg环状按钮组模块。

svgRingButton

闲话不多说

演示地址 Github地址源码及使用说明见这里，本篇文章不再涉及使用说明及案例展示仅介绍实现过程中遇到的一些坑以及一些收获。

关于一个模块要能用，好用必须对其易用性、健壮性、性能以及代码质量有一定的要求。这里通过对svgRingButton模块的实现及封装对上述要点做个简单阐述。

易用性

作为一个非个人临时使用的模块，易用性代表了其可复用的程度。关于易用性这点我个人非常推崇百度的设计理念，无论是百度地图还是Echart，都是高度封装的，用一个接口将大块的功能做封装，同时使用配置项的方式对图表和地图的数据或样式做修改，避免了通过大量的API函数对一些内部对象的操作。这样的模式辅以成套的教程及Demo真正的可以做到低龄化、傻瓜化编程。同时我个人也认为这将会是未来“全民编程时代”面向大量非专业程序开发者的一种模式。

扯回svgRingButton这里采用了Echarts的配置方式。在引入代码之后直接使用

1	new svgRingButton({target: '# triangle'})

即可为一个svg元素创建一个环状按钮组。通过对按钮的触发方式、触发事件、环状按钮组的样式维度进行赋值即实现创建对按钮组的个性化定制，例如

new svgRingButton({
  target: '# triangle',
  event: 'mouseover',
  buttonsEvent: 'mouseover',
  animation: true
})

就代表了为’# triangle’元素创建了个环状按钮组，按钮组的触发方式为’mouseover‘，按钮的触发方式为’mouseover‘，并且开启了动画。

健壮性

健壮性要求在用户不输入或者在输入错误的情况下模块仍能有良好的表现。要求强大的自适应能力以及意外情况处理（也算是易用性要求的一部分）。

自适应

对于可以从目标svg元素可以获取、或者可以大致推导出的选项应提供默认选项和自适应选项。在应用中除了target选项之外的所有选项配置了默认值。并且一部分选项提供了自适应选项，例如这里对按钮的大小和名称的大小都做了自适应操作。

new svgRingButton({
  target: '# rect',
  buttonsNameSize: 'auto',
  innerRadius: 'auto',
  outerRadius: 'auto',
  strockWidth: 'auto'
})

意外情况处理

这部分没得讲对于一些传入的配置项、例如大小、颜色、回调函数等要做好良好的判断，isNumber、颜色正则(“^# ([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$”;)、instanceof Function 等等方法提供了很多的解决方案

性能

如果对于一个js模块存在行多次调用且调用次数比较大，则一定会对页面的整体性能造成影响。应该尽量采用低开销的方式来实现该模块的功能。

为一个或者一类的svg元素创建环状按钮组，这里有两种方案。

1、为svg元素创建“创建环状按钮组”事件，通过事件的触发对其创建环状按钮组。

2、为svg创建好环状按钮组并隐藏，通过事件的触发来显现环状按钮组。

由于html时代、jq时代对于通过js创建dom并绑定进dom树操作相对困难，创建好Dom结构并隐藏它，通过一定的事件来修改其display方式成为前端的一种常见的hack方式。但在当下如果对大量的svg元素同时创建dom结构并绑定进dom树开销无疑很大。这里采用为绑定事件的方式让其在需要的时候在创建Dom以增加其性能。

代码质量

模块肯定需要一定的迭代和升级，这就要求代码质量够好设计足够完善不至于给以后新功能的添加留太大的坑。代码质量总结起来也没多少网上类似的也一大堆，但这也是真真正正考验编程的能力了。坑踩的多了，下次自然就不跳了。

参要&&引用

http://www.zhangxinxu.com/wordpress/2015/08/semi-package-web-component-development-for-design/
http://www.ruanyifeng.com/blog/2012/10/javascript_module.html