85后程序员：独自一人，完成一个HTML5开源图形库
摘要：王鹤，09年毕业于南昌大学，独自一人开发了一个基于HTML5的开源图形库。王鹤说，我们有责任贡献个人薄弱的力量，弥补国内开源界与国外的差距。本文中，他为我们详述了JavaScript代码重构以及Canvas与SVG细节对比。
王鹤（英文名taylor），85后程序员，09年毕业于南昌大学软件工程专业。一直从事JavaEE的企业应用的研发和架构设计工作，初期从事过OA，CRM等企业项目研发。独自一人开发完成了基于HTML5的开源图形库：ichartjs。使用纯JavaScript语言, 利用HTML5的Canvas元素绘制各式图表，为Web App图表展示方面提供解决方案。ichartjs是基于Apache License 2.0协议的开源项目。
王鹤
王鹤拥有一个倔强的技术信仰：“技术这条道路虽然崎岖，但值得坚持”。近日，CSDN记者采访到了王鹤，他为我们详细解读了HTML5技术以及与HTML5技术有关的、方方面面的细节。
问：是什么原因（或理想）促使您开发一个基于HTML5的图形库呢？
王鹤：我认为主要有三点原因。第一，HTML5作为新一代的Web技术。引导着未来Web的走向。第二，没有任何一款产品是适合所有行业的，特别是一些不常见的图表类型或者个性化需求。比如：材料力学性能状况分析(非线性图表)、石化炼油综合分析(油罐图)等。展望未来，在专业领域，这样的需求会越来越多。ichartjs也是基于此应运而生的，它适用于这类需求的个性化开发。第三，国内开源软件的氛围与国外存在一定的差距，我们有义务、有责任贡献个人一点薄弱的力量，传播知识、传递理想。
问：如今HTML5技术被热炒，有人说至少两三年才能成熟。您认为现在是启动HTML5开发好的时机吗？有开发者表示，当前国内仍有许多用户使用的是落伍的IE6浏览器，HTML5技术的运用无法大面积普及，您如何看待这一问题？
王鹤：人类阻挡不了技术的变革前进的脚步。在这个信息全球化的时代里，技术更新周期越来越短，机遇稍瞬即逝。尽早掌握未来的主流技术，利于我们在激烈的市场中屹立不倒。由IT界领军公司来推动HTML5，有条件的公司和组织也应该尽早参与进来。开发者们则应该有敏锐的嗅觉，快速了解和掌握HTML5技术，为市场提供充足的人才保障。HTML5的大面积普及，IE6并不是主要原因，只能是其中一个次要原因，它的普及需要一个过程，需要市场的慢慢成熟。另外，HTML5还有一大领域就是移动互联网，移动互联平台上不存在IE6的问题。
问：Canvas是HTML5中一个非常灵活的元素，对于开发富媒体应用程序能够发挥巨大作用。此外，SVG也是HTML5一个重要的属性。请谈谈您对Canvas以及SVG的理解。
王鹤：不断进步的Web将需要更加丰富的表现形式来满足视觉需求，Canvas和SVG无疑在图形图像方面充当了非常重要的角色，也让我们除了Flash之外有了更多的选择。技术上的变革意味着更多的创新将要到来，随之改变我们的生活。目前，网络上有许多关于Canvas和SVG之间对比非常好的文章。在此，根据我在使用过程中的经验，提出自己的一点点拙见。首先，先来看一下这两种技术的关键特点的对比：
一般情况下，两者都可以实现相同的功能，只有在你的应用的复杂度高的时候，才能显示出某一个技术是否更胜一筹。利用一点时间把两种技术的了解一下，做一些基础的示例会帮助我们更好的理解它们的特性。实际应用中，则需要针对应用做一些场景测试。以发现由于渲染(重绘)频率、复杂度、尺寸等对整体性能带来的影响，另外，还有一个不可忽视的区别是只有主流浏览器才支持Canvas元素。
注：Hit regions是最新的HTML Canvas 2D Context标准中定义了一个新的概念。CanvasRenderingContext2D对象中包含了一个关联位图的命中区域列表，列表中的元素即Hit regions。 Hit regions中包含了区域像素点、周长、ID、鼠标样式、控制对象等等。不过目前主流浏览器还未实现这个功能。
问：前端框架方面，jQuery、Backbone、Sencha都是口碑良好的国外产品，国内也有不错的如百度的QWrap、腾讯的JX、阿里的KISSY等等。请谈谈前端框架技术选型方面的内容。
王鹤： 这些年一直做企业应用，接触的前端框架比较局限，项目中采用过的一些框架，像Extjs、EasyUI、Dojo、Dwr、jQuery UI、jQuery等等。对于企业应用的技术选型，技术的成熟度作为首要衡量标准，甚至会沿用一些”过时”的技术。一般有以下几种情况：
问：有开发者表示在使用HTML5技术开发时，JavaScript代码重构会遇到一些问题。您是否也曾遇到此类问题？能否提供一些解决方案呢？
王鹤：先来看一下重构的概念——重构就是在不改变软件现有功能的基础上，通过调整程序代码改善软件的质量、性能，使其程序的设计模式和架构更趋合理，提高软件的扩展性和维护性。
无论使用什么编程语言的软件都有可能有重构这个过程的发生，其目标是提供一个更能适应需求与环境的软件。采用了HTML5技术(API)的JavaScript也一样，在项目中，我们经常会遇到这样的场景：
1. 现有的JS库满足不了新项目的需求。缝缝补补虽能满足需求，但可维护性不强。项目组考虑重构代码来解决问题。
2. 项目间歇期，有一段相对比较空闲的时间，把产品库中在项目进行期时(可能由于项目工期比较紧，代码设计可能不是很理想)写的代码拿出来在”回回炉”(重构)。
3. 新技术的出现，想对现有库做一个升级。
我并没有特别针对HTML5技术进行过重构。不过我在进行JavaScript的代码重构的过程中遇到的问题也许会给出一些参考：
1. 了解重构目标。如果不知道为什么重构，那最好不要重构。
2. 是否需要向下兼容。包括接口的变化和浏览器兼容性问题。如果调整了接口(函数名)。可以需要采用适配器来对旧接口进行兼容。并且重构过程中，要保证开放接口的最小性。浏览器兼容性则鉴于产品策略。
3. 对新技术(API)采用的合理性。罗列出可以使用的API，并且要测试它在各个浏览器中表现的一致性。也许可能需要一些Hack来解决兼容问题。
4. 原代码的模块化程度和功能模糊不清。这是设计阶段工作量最大的地方，需要罗列出原代码的模块划分和功能列表。如果有类图则省不少的事情。重构后的代码一定要设计类图。这个阶段的工作类似邮局的packing。
5. 如何保证质量。重构阶段利用单元测试来保证质量。包括对应模块的组合测试。团队则定期进行交叉检查。
软件的复杂度在一定程度决定了重构的难度。不同软件重构过程中会遇到不同的问题，在重构设计上下功夫会给你带来很多好处。否则，盲目的重构会把你从一个深渊带到另一个深渊。
问：目前各浏览器没有统一的扩展规范，不同浏览器对于CSS的解析不相同，同一款App在不同平台上运行情况不同，可以说各浏览器兼容性比较差。对于这一问题您有何见解？
王鹤： 从CSS1到CSS2，在到现在的CSS3，标准更加规范，特性更加丰富。虽然目前不同浏览器对CSS某些语义解析不相同，但这些年来，浏览器的表现正趋于一致。而且，也已经有许多CSS的框架可以用于兼容开发。兼容性是个难题，但它不是一个问题。而且，你也不能要求在14寸电脑屏幕上播放出IMAX-3D的效果。
问：许多开发者之所以选用HTML5技术，很重要的原因在于它的跨平台性，您认为做跨平台开发的开发者应当注意哪些问题？
王鹤： 目前情况上看，HTML5离真正的跨平台可能还有一段距离。如果你做游戏，这个是你必须要考虑的事情。所以，选用一些中间工具来开发游戏是个不错的选择。
