85后程序员：独自一人-完成一个HTML5开源图形库

85后程序员：独自一人，完成一个HTML5开源图形库 摘要：王鹤，09年毕业于南昌大学，独自一人开发了一个基于HTML5的开源图形库。王鹤说，我们有责任贡献个人薄弱的力量，弥补国内开源界与国外的差距。本文中，他为我们详述了JavaScript代码重构以及Canvas与SVG细节对比。 王鹤，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、jQueryUI、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的框架可以用于兼容开发。兼容性是个难题，但它不是一个问题。而且，你也不能要求在14寸电脑屏幕上播放出IMAX-3D的效果。CSDN：许多开发者之所以选用HTML5技术，很重要的原因在于它的跨平台性，您认为做跨平台开发的开发者应当注意哪些问题？目前情况上看，HTML5离真正的跨平台可能还有一段距离。如果你做游戏，这个是你必须要考虑的事情。所以，选用一些中间工具来开发游戏是个不错的选择。 聚玖爱HYTW 摘要：王鶴，09年畢業於南昌大學，獨自一人開發瞭一個基於HTML5的開源圖形庫。王鶴說，我們有責任貢獻個人薄弱的力量，彌補國內開源界與國外的差距。本文中，他為我們詳述瞭JavaScript代碼重構以及Canvas與SVG細節對比。 王鶴，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、jQueryUI、jQuery等等。對於企業應用的技術選型，技術的成熟度作為首要衡量標準，甚至會沿用一些”過時”的技術。一般有以下幾種情況：CSDN：有開發者表示在使用HTML5技術開發時，JavaScript代碼重構會遇到一些問題。您是否也曾遇到此類問題？能否提供一些解決方案呢？王鶴：先來看一下重構的概念重構就是在不改變軟件現有功能的基礎上，通過調整程序代碼改善軟件的質量、性能，使其程序的設計模式和架構更趨合理，提高軟件的擴展性和維護性。無論使用什麼編程語言的軟件都有可能有重構這個過程的發生，其目標是提供一個更能適應需求與環境的軟件。采用瞭HTML5技術(API)的JavaScript也一樣，在項目中，我們經常會遇到這樣的場景：1. 現有的JS庫滿足不瞭新項目的需求。縫縫補補雖能滿足需求，但可維護性不強。項目組考慮重構代碼來解決問題。2. 項目間歇期，有一段相對比較空閑的時間，把產品庫中在項目進行期時(可能由於項目工期比較緊，代碼設計可能不是很理想)寫的代碼拿出來在”回回爐”(重構)。3. 新技術的出現，想對現有庫做一個升級。我並沒有特別針對HTML5技術進行過重構。不過我在進行JavaScript的代碼重構的過程中遇到的問題也許會給出一些參考：1. 瞭解重構目標。如果不知道為什麼重構，那最好不要重構。2. 是否需要向下兼容。包括接口的變化和瀏覽器兼容性問題。如果調整瞭接口(函數名)。可以需要采用適配器來對舊接口進行兼容。並且重構過程中，要保證開放接口的最小性。瀏覽器兼容性則鑒於產品策略。3. 對新技術(API)采用的合理性。羅列出可以使用的API，並且要測試它在各個