網(wǎng)站建設中HTML5就是為移動(dòng)開(kāi)發(fā)而生發(fā)布者：本站     時(shí)間：2021-02-09 10:02:40

最近，我有很多類(lèi)似的交流對話(huà)，可能因為我正在開(kāi)發(fā)一套HTML5的應用吧。就像2005年的“AJAX”，“HTML5”這個(gè)術(shù)語(yǔ)現在還沒(méi)有被清晰地定義，在未確定這個(gè)新技術(shù)有什么優(yōu)勢前，它就已經(jīng)被四處套用，甚至投入運營(yíng)。

如果你在一間被熱衷新技術(shù)的管理人掌控的公司里任職，如果你走運，那么漫畫(huà)人物呆伯特先生可能非常愿意坐在你隔壁的小房間。

兩種看法

當人們討論移動(dòng)設備上的HTML5技術(shù)時(shí)，他們通常只會(huì )有兩種不同的看法。

從感性的角度來(lái)看，HTML5技術(shù)的渲染過(guò)程主要是由瀏覽器、內嵌HTML5解析器的應用程序 (如PhoneGap)、支持書(shū)簽打開(kāi)方式的應用程序又或者是移動(dòng)手機產(chǎn)品(iPhone和iPad)進(jìn)行的。這種技術(shù)的好處就是能重用現有的網(wǎng)頁(yè)設 計，Web開(kāi)發(fā)人員也更容易上手，同時(shí)產(chǎn)品具備更高質(zhì)量，更適用于多平臺產(chǎn)品。也更易于調試和修正錯誤，并且，版本更新會(huì )更快。此消彼長(cháng)，優(yōu)勢是它的功 能，如果你像PhoneGap一樣使用內嵌的架構，那么你會(huì )少很多麻煩事，劣勢就是它的表現，這也是HTML5技術(shù)面臨的最大難題。

從理性的角度來(lái)看，HTML5技術(shù)就是使用JavaScript引擎直接控制本地功能，改變移動(dòng)設備上的瀏覽器組件。而HTML5應用上的表現問(wèn)題 更多是由HTML/CSS渲染技術(shù)控制的，而不是由JavaScript解析生成的。如果使用正確，HTML5技術(shù)無(wú)疑可以給予你大量新增的表現效果。目 前使用HTML5技術(shù)的例子包括Appcelerator Titanium、Mobage/ngcore、Game Closure以及PhobosLabs。

Node.js工具包

以PhobosLabs的項目為例，當這個(gè)項目是使用WebKit的JavaScriptCore組件完成，在設備端使用OpenGL渲染界面，而 在開(kāi)發(fā)時(shí)使用HTML5的canvas組件的API開(kāi)發(fā)。這就是說(shuō)，開(kāi)發(fā)人員可以在一個(gè)對canvas有良好支持的桌面瀏覽器內開(kāi)發(fā)和測試他的HTML5 游戲，并且當他將這個(gè)游戲放到移動(dòng)設備的瀏覽器打開(kāi)時(shí)，也會(huì )出現同樣優(yōu)秀(甚至更優(yōu)秀)的表現效果。這種用HTML5開(kāi)發(fā)的效果跟使用Node.js工具 包開(kāi)發(fā)的效果很相像，使用Node.js時(shí)，只需啟用JavaScript引擎，而你僅需把你需要使用的Node.js組件添加到你的應用即可。

Appcelerator的Titanium詳述了HTML5技術(shù)的概念，給我們展現了一個(gè)完整的UI工具的抽象層，這使得它可以被應用到生成其他 游戲產(chǎn)品。意即一個(gè)HTML5應用開(kāi)發(fā)人員可以通過(guò)Appcelerator的JavaScript UI庫創(chuàng )建按鈕，而Appcelerator的內部邏輯會(huì )將這個(gè)按鈕轉換為iOS的原生界面按鈕。我們可以通過(guò)JavaScript控制界面上的原生按 鈕。理論上，開(kāi)發(fā)人員可以不需要寫(xiě)一句Objective-C代碼。

HTML5技術(shù)有它的優(yōu)勢，當你依然在使用JavaScript編寫(xiě)代碼時(shí)，你可以跟那些煩人的HTML/CSS布局邏輯和樣式聲明說(shuō)再見(jiàn)。你還可 以跟那些優(yōu)秀的調試工具說(shuō)再見(jiàn)。但這個(gè)技術(shù)也有蹩腳的一面，像HTML5的游戲API Mobage就存在一些小毛病，canvas組件可以在屏幕相對小一點(diǎn)的界面順利顯示，但如果屏幕稍微變大一點(diǎn)，就好像Appcelerator的例子一 樣，在調試時(shí)，你還需要考慮界面層額外的復雜性。在這里有很多Appcelerator的負面評論，如果你能把上面的幾點(diǎn)記在心里，那么那些負面評論其實(shí) 都可以被理解。

問(wèn)題還在瀏覽器

開(kāi)發(fā)一個(gè)完整的HTML5手機應用的首要難題就是運行速度過(guò)慢。而第二大難題就是非常愚蠢的工具束縛，許多組件或多或少在不同瀏覽器都存在一些漏 洞，如jQuery Mobile的導航組件、iOS的innerHTML組件的漏洞，所以你需要減少功能去避免出現漏洞，又或者你愿意花一些時(shí)間去修復這些漏洞。

你可以自己做個(gè)實(shí)驗，當你在一個(gè)iOS應用里僅使用一至兩個(gè)界面庫時(shí)，再加上你自己寫(xiě)的少量JavaScript代碼，沒(méi)有更多的 JavaScript庫，你會(huì )發(fā)現這個(gè)HTML5應用運行得流暢而完整，但卻沒(méi)什么功能。PhoneGap的iOS項目?jì)H需要1至2秒的時(shí)間就可以在 iPhone 3GS上發(fā)布運行。這個(gè)事實(shí)可以告訴你，最基本的HTML5應用運行起來(lái)真的非常流暢。所以，當你發(fā)現你的HTML5應用的某些操作花費了10-15秒時(shí) 間時(shí)，又或者花了15秒時(shí)間才加載完整個(gè)程序時(shí)，這都是一些JavaScript界面庫給拖累的。

兩套有代表性的UI庫

一個(gè)HTML5手機應用程序員需要的通常只有那么兩樣東西：第一樣就是原生平臺和網(wǎng)頁(yè)界面的嫁接層；第二樣就是手機UI庫。

PhoneGap近年已逐漸成為默認的嫁接層選擇，它允許HTML5應用通過(guò)JavaScript調用移動(dòng)設備的照相機、訪(fǎng)問(wèn)手機通訊錄和讀寫(xiě)文件。而最受歡迎的手機UI庫就包括由jQuery Mobile和Sencha Touch。

jQuery Mobile是去年才創(chuàng )建的一個(gè)項目，所以它是非常新的，很顯然，它也不夠成熟。jQuery Mobile的導航欄組件就非常糟糕，翻頁(yè)時(shí)明顯比原生的翻頁(yè)功能要慢，如果你不刷新瀏覽器，你就沒(méi)有辦法遞增列表內容。而在PC桌面平臺測試時(shí)，它的 CPU耗用率也是非常高(版本是jQuery Mobile的alpha 4)。我的項目使用它，主要是考慮到相對簡(jiǎn)單(比較容易破解)，因為這個(gè)庫是基于jQuery構建的，所以任何一個(gè)資深的網(wǎng)頁(yè)程序員都很容易上手。

據說(shuō)Sencha Touch比jQuery Mobile更成熟更快。但我一看到高復雜性的東西，我就不會(huì )不自覺(jué)地厭惡它們。因為潛意識會(huì )告訴我，有很多功能我根本不會(huì )使用到，但卻強制加載這些額外 的東西到我應用里，讓我應用整體表現差了很多。盡管我可能是錯的，PhoneGap應用頁(yè)中最強大的手機應用是IGN Dominate，它運行得很流暢并且它就是基于Sencha Touch開(kāi)發(fā)的，但我確定他們肯定花了很多時(shí)間去優(yōu)化這個(gè)產(chǎn)品。

調試和修改

在上面談到的開(kāi)發(fā)HTML5應用時(shí)，許多人可能都忽略了一點(diǎn)，其實(shí)調試或修改一個(gè)HTML5應用是很簡(jiǎn)單的。任何一個(gè)曾參與過(guò)大型HTML5開(kāi)發(fā)項 目的開(kāi)發(fā)人員都可以告訴你，調試和維護幾乎占了整個(gè)項目生命周期的80%的時(shí)間，甚至更多。這就是說(shuō)，當你聽(tīng)到一個(gè)開(kāi)發(fā)工具宣稱(chēng)可以在15分鐘內開(kāi)發(fā)一個(gè) 聊天應用時(shí)，那么它可能只是能讓你在15分鐘內解決20%的工作，剩下的80%，你可能得耗上3倍以上的精力才能完成。

HTML5手機應用在調試時(shí)存在觸碰問(wèn)題，因為無(wú)法打印出控制臺的日志。所以，如果JavaScript代碼存在漏洞或者報錯，你需要 alert()報錯，否則你可能沒(méi)法發(fā)現。PhoneGap修正了這個(gè)問(wèn)題，它可以通過(guò)XCode的控制臺打印控制臺的調式日志，但功能依然很有限。

目前最有效的解決方案就是weinre。盡管漏洞百出，但它就是能跑起來(lái)，有了它，你還能斷點(diǎn)調試你的手機應用的UI，weinre是基于 WebKit的網(wǎng)頁(yè)檢查器的，它的調式工具后臺通過(guò)遠程服務(wù)端獲取和替換調試代碼。兩至三周前，我曾對網(wǎng)頁(yè)檢查器的代碼做過(guò)一些研究，我發(fā)現把它轉換為一 個(gè)遠程調試器真的不難。Weinre接下來(lái)幾個(gè)月的開(kāi)發(fā)進(jìn)度將會(huì )更快，某些人可能還會(huì )開(kāi)發(fā)出它的替代產(chǎn)品。我們拭目以待。

未來(lái)幾年，移動(dòng)應用開(kāi)發(fā)中的HTML5技術(shù)的調試工具無(wú)疑變得更加重要，它可以解決大部分開(kāi)發(fā)人員80%的工作量。你想要用Objective-C 改變你的界面設計嗎？編輯，再編譯，運行。重復這三個(gè)步驟直到你滿(mǎn)意為止。如果再編譯步驟很多，這可能會(huì )耗上一天的時(shí)間。用HTML5技術(shù)去實(shí)現？用 weinre編輯一些CSS屬性并測試，你甚至不用關(guān)閉應用，你就可以繼續調試。一定程度上，你還可以在桌面瀏覽器調試你的HTML5手機應用。但相信 我，你的應用產(chǎn)品最終可能只會(huì )在移動(dòng)設備上爆發(fā)一大堆漏洞而已，所以你必須得使用weinre。