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

《85后程序员：独自一人,完成一个HTML5开源图形库》由会员分享，可在线阅读，更多相关《85后程序员：独自一人,完成一个HTML5开源图形库（8页珍藏版）》请在金锄头文库上搜索。

1、 85 后程序员：独自一人，完成一个后程序员：独自一人，完成一个 HTML5 开源图形库开源图形库摘要：王鹤，09 年毕业于南昌大学，独自一人开发了一个基于 HTML5 的开源图形库。王 鹤说，我们有责任贡献个人薄弱的力量，弥补国内开源界与国外的差距。本文中，他为我 们详述了 JavaScript 代码重构以及 Canvas 与 SVG 细节对比。 王鹤，85后程序员，09 年毕业于南昌大学软件工程专业。一直从事 JavaEE 的企业应用 的研发和架构设计工作，初期从事过 OA，CRM 等企业项目研发。独自一人开发完成了基 于 HTML5 的开源图形库：ichartjs。使用纯 JavaScr

2、ipt 语言, 利用 HTML5 的 Canvas 元素绘制 各式图表，为 Web App 图表展示方面提供解决方案。ichartjs 是基于 Apache License 2.0 协 议的开源项目。王鹤王鹤拥有一个倔强的技术信仰：“技术这条道路虽然崎岖，但值得坚持” 。近日，CSDN 记者采访到了王鹤，他为我们详细解读了 HTML5 技术以及与 HTML5 技术有关的、方方面 面的细节。CSDN：是什么原因促使您开发一个基于HTML5 的图形库呢？王鹤：我认为主要有三点原因。第一，HTML5作为新一代的 Web 技术。引导着未来 Web 的走向。第二，没有任何一款产品是适合所有行业的，特别是

3、一些不常见的图表类型 或者个性化需求。比如：材料力学性能状况分析(非线性图表)、石化炼油综合分析(油罐图) 等。展望未来，在专业领域，这样的需求会越来越多。ichartjs 也是基于此应运而生的，它 适用于这类需求的个性化开发。第三，国内开源软件的氛围与国外存在一定的差距，我们 有义务、有责任贡献个人一点薄弱的力量，传播知识、传递理想。ichartjs 2D 饼图CSDN：如今HTML5 技术被热炒，有人说至少两三年才能成熟。您认为现在是启动 HTML5 开发好的时机吗？有开发者表示，当前国内仍有许多用户使用的是落伍的 IE6 浏览 器，HTML5 技术的运用无法大面积普及，您如何看待这一问题

4、？王鹤：人类阻挡不了技术的变革前进的脚步。在这个信息全球化的时代里，技术更新周 期越来越短，机遇稍瞬即逝。尽早掌握未来的主流技术，利于我们在激烈的市场中屹立不 倒。由 IT 界领军公司来推动 HTML5，有条件的公司和组织也应该尽早参与进来。开发者们 则应该有敏锐的嗅觉，快速了解和掌握 HTML5 技术，为市场提供充足的人才保障。HTML5 的大面积普及，IE6 并不是主要原因，只能是其中一个次要原因，它的普及需要一个过程， 需要市场的慢慢成熟。另外，HTML5 还有一大领域就是移动互联网，移动互联平台上不存在 IE6 的问题。CSDN：Canvas是 HTML5 中一个非常灵活的元素，对于开

5、发富媒体应用程序能够发挥巨 大作用。此外，SVG 也是 HTML5 一个重要的属性。请谈谈您对 Canvas 以及 SVG 的理解。王鹤：不断进步的Web 将需要更加丰富的表现形式来满足视觉需求，Canvas 和 SVG 无 疑在图形图像方面充当了非常重要的角色，也让我们除了 Flash 之外有了更多的选择。技 术上的变革意味着更多的创新将要到来，随之改变我们的生活。目前，网络上有许多关于 Canvas 和 SVG 之间对比非常好的文章。在此，根据我在使用过程中的经验，提出自己的一 点点拙见。首先，先来看一下这两种技术的关键特点的对比：一般情况下，两者都可以实现相同的功能，只有在你的应用的复杂

6、度高的时候，才能显 示出某一个技术是否更胜一筹。利用一点时间把两种技术的了解一下，做一些基础的示例 会帮助我们更好的理解它们的特性。实际应用中，则需要针对应用做一些场景测试。以发 现由于渲染(重绘)频率、复杂度、尺寸等对整体性能带来的影响，另外，还有一个不可忽 视的区别是只有主流浏览器才支持 Canvas 元素。注：Hit regions 是最新的 HTML Canvas 2D Context 标准中定义了一个新的概念。 CanvasRenderingContext2D 对象中包含了一个关联位图的命中区域列表，列表中的元素即 Hit regions。 Hit regions 中包含了区域像素点

7、、周长、ID、鼠标样式、控制对象等等。不过 目前主流浏览器还未实现这个功能。CSDN：前端框架方面，jQuery、Backbone、Sencha都是口碑良好的国外产品，国内也有不错的 如百度的 QWrap、腾讯的 JX、阿里的 KISSY 等等。请谈谈前端框架技术选型方面的内容。王鹤：这些年一直做企业应用，接触的前端框架比较局限，项目中采用过的一些框架，像 Extjs、EasyUI、Dojo、Dwr、jQueryUI、jQuery 等等。对于企业应用的技术选型，技术的成熟度作为首要衡量标准，甚至会 沿用一些”过时”的技术。一般有以下几种情况：CSDN：有开发者表示在使用HTML5 技术开发时，

8、JavaScript 代码重构会遇到一些问题。 您是否也曾遇到此类问题？能否提供一些解决方案呢？王鹤：先来看一下重构的概念重构就是在不改变软件现有功能的基础上，通过调整 程序代码改善软件的质量、性能，使其程序的设计模式和架构更趋合理，提高软件的扩展 性和维护性。无论使用什么编程语言的软件都有可能有重构这个过程的发生，其目标是提供一个更能 适应需求与环境的软件。采用了 HTML5 技术(API)的 JavaScript 也一样，在项目中，我们经 常会遇到这样的场景：1. 现有的 JS 库满足不了新项目的需求。缝缝补补虽能满足需求，但可维护性不强。项目 组考虑重构代码来解决问题。2.项目间歇期，有

9、一段相对比较空闲的时间，把产品库中在项目进行期时(可能由于项目 工期比较紧，代码设计可能不是很理想)写的代码拿出来在”回回炉”(重构)。3.新技术的出现，想对现有库做一个升级。我并没有特别针对HTML5 技术进行过重构。不过我在进行 JavaScript 的代码重构的过程 中遇到的问题也许会给出一些参考：1. 了解重构目标。如果不知道为什么重构，那最好不要重构。2.是否需要向下兼容。包括接口的变化和浏览器兼容性问题。如果调整了接口(函数名)。可 以需要采用适配器来对旧接口进行兼容。并且重构过程中，要保证开放接口的最小性。浏 览器兼容性则鉴于产品策略。3.对新技术(API)采用的合理性。罗列出可

10、以使用的 API，并且要测试它在各个浏览器中表现 的一致性。也许可能需要一些 Hack 来解决兼容问题。4.原代码的模块化程度和功能模糊不清。这是设计阶段工作量最大的地方，需要罗列出原 代码的模块划分和功能列表。如果有类图则省不少的事情。重构后的代码一定要设计类图。 这个阶段的工作类似邮局的 packing。5.如何保证质量。重构阶段利用单元测试来保证质量。包括对应模块的组合测试。团队则 定期进行交叉检查。软件的复杂度在一定程度决定了重构的难度。不同软件重构过程中会遇到不同的问题， 在重构设计上下功夫会给你带来很多好处。否则，盲目的重构会把你从一个深渊带到另一 个深渊。CSDN：目前各浏览器没

11、有统一的扩展规范，不同浏览器对于 CSS 的解析不相同，同一款 App 在不同平台上运行情况不同，可以说各浏览器兼容性比较差。对于这一问题您有何见 解？王鹤：从CSS1 到 CSS2，在到现在的 CSS3，标准更加规范，特性更加丰富。虽然目前不同浏览 器对 CSS 某些语义解析不相同，但这些年来，浏览器的表现正趋于一致。而且，也已经有 许多 CSS 的框架可以用于兼容开发。兼容性是个难题，但它不是一个问题。而且，你也不 能要求在 14 寸电脑屏幕上播放出 IMAX-3D 的效果。CSDN：许多开发者之所以选用HTML5 技术，很重要的原因在于它的跨平台性，您认为做跨平台 开发的开发者应当注意哪

12、些问题？目前情况上看，HTML5离真正的跨平台可能还有一段距离。如果你做游戏，这个是你必须要考虑的事情。所以，选用一些中间工具来开发游戏是个 不错的选择。 聚玖爱 HYTW 摘要：王鶴，09 年畢業於南昌大學，獨自一人開發瞭一個基於 HTML5 的開源圖形庫。王 鶴說，我們有責任貢獻個人薄弱的力量，彌補國內開源界與國外的差距。本文中，他為我 們詳述瞭 JavaScript 代碼重構以及 Canvas 與 SVG 細節對比。 王鶴，85後程序員，09 年畢業於南昌大學軟件工程專業。一直從事 JavaEE 的企業應用 的研發和架構設計工作，初期從事過 OA，CRM 等企業項目研發。獨自一人開發完成

13、瞭基 於 HTML5 的開源圖形庫：ichartjs。使用純 JavaScript 語言, 利用 HTML5 的 Canvas 元素繪制 各式圖表，為 Web App 圖表展示方面提供解決方案。ichartjs 是基於 Apache License 2.0 協 議的開源項目。王鶴王鶴擁有一個倔強的技術信仰：“技術這條道路雖然崎嶇，但值得堅持” 。近日，CSDN 記者采訪到瞭王鶴，他為我們詳細解讀瞭 HTML5 技術以及與 HTML5 技術有關的、方方面 面的細節。CSDN：是什麼原因促使您開發一個基於HTML5 的圖形庫呢？王鶴：我認為主要有三點原因。第一，HTML5作為新一代的 Web 技術

14、。引導著未來 Web 的走向。第二，沒有任何一款產品是適合所有行業的，特別是一些不常見的圖表類型 或者個性化需求。比如：材料力學性能狀況分析(非線性圖表)、石化煉油綜合分析(油罐圖) 等。展望未來，在專業領域，這樣的需求會越來越多。ichartjs 也是基於此應運而生的，它 適用於這類需求的個性化開發。第三，國內開源軟件的氛圍與國外存在一定的差距，我們 有義務、有責任貢獻個人一點薄弱的力量，傳播知識、傳遞理想。ichartjs 2D 餅圖CSDN：如今HTML5 技術被熱炒，有人說至少兩三年才能成熟。您認為現在是啟動 HTML5 開發好的時機嗎？有開發者表示，當前國內仍有許多用戶使用的是落伍的

15、 IE6 瀏覽 器，HTML5 技術的運用無法大面積普及，您如何看待這一問題？王鶴：人類阻擋不瞭技術的變革前進的腳步。在這個信息全球化的時代裡，技術更新周 期越來越短，機遇稍瞬即逝。盡早掌握未來的主流技術，利於我們在激烈的市場中屹立不 倒。由 IT 界領軍公司來推動 HTML5，有條件的公司和組織也應該盡早參與進來。開發者們 則應該有敏銳的嗅覺，快速瞭解和掌握 HTML5 技術，為市場提供充足的人才保障。HTML5 的大面積普及，IE6 並不是主要原因，隻能是其中一個次要原因，它的普及需要一個過程， 需要市場的慢慢成熟。另外，HTML5 還有一大領域就是移動互聯網，移動互聯平臺上不存 在 IE

16、6 的問題。CSDN：Canvas是 HTML5 中一個非常靈活的元素，對於開發富媒體應用程序能夠發揮巨 大作用。此外，SVG 也是 HTML5 一個重要的屬性。請談談您對 Canvas 以及 SVG 的理解。王鶴：不斷進步的Web 將需要更加豐富的表現形式來滿足視覺需求，Canvas 和 SVG 無 疑在圖形圖像方面充當瞭非常重要的角色，也讓我們除瞭 Flash 之外有瞭更多的選擇。技 術上的變革意味著更多的創新將要到來，隨之改變我們的生活。目前，網絡上有許多關於 Canvas 和 SVG 之間對比非常好的文章。在此，根據我在使用過程中的經驗，提出自己的一 點點拙見。首先，先來看一下這兩種技術的關鍵特點的對比：一般情況下，兩者都可以實現相同的功能，隻有在你的應用的復雜度高的時候，才能顯 示出某一個技術是否更勝一籌。利用一點時間把兩種技術的瞭解一下，做一些基礎的示例 會幫助我們更好的理解它們的特性。實際應用中，則需要針對應用做一些場景測試。以發 現由於渲染(重繪)頻率、復雜度、尺寸等對整體性能帶來的影響，另外，還有一個不可忽 視的區別是隻有主流瀏覽器才