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