最近專注研究 jQuery Mobile —— 一款很方便就可以把 Web App 包裝成適合 Android 與 iPhone 等觸屏移動設(shè)備的 Javascript 庫，結(jié)合 jQuery Mobile 與 HTML5 ，可以很方便的開發(fā)出一款具有良好界面及用戶體驗的 Web App，在這個過程中我收獲良多，因此決定針對使用 jQuery Mobile 與 HTML5 開發(fā) Web App 寫一個系列的文章。在開始之前，我首先簡述 Web App 與原生 App 各自的優(yōu)缺點。
一. Web App 與原生 App 的優(yōu)缺點
1.Web App
(1).優(yōu)點
2.跨平臺，用戶只需要一個標(biāo)準(zhǔn)的移動瀏覽器。
3.維護(hù)方便，維護(hù)不干擾用戶使用，可實時修復(fù) Bug。
(2).缺點
2.運行不夠原生 App 流暢。
3.需要網(wǎng)絡(luò)的支持（可依靠 HTML5 大大減少對網(wǎng)絡(luò)的依賴）。
2.原生 App
(1).優(yōu)點
2.不依賴網(wǎng)絡(luò)。
3.開發(fā)者更易獲得盈利。
(2).缺點
2.維護(hù)成本高。
3.開發(fā)周期長。
4.需要 App Store 或 Android Market 的確認(rèn)，并且要與第三方分享盈利。
看了以上的優(yōu)缺點，可以看出 Web App 具有很好的優(yōu)勢，并且隨著移動設(shè)備硬件配置的逐年升級，Web App 的劣勢將會逐漸減弱，而優(yōu)勢將更加明顯，雖然仍不能完全取代原生 App ， 但 Web App 隊伍將不斷壯大已經(jīng)形成趨勢，因此作為 Web 開發(fā)者投入到 Web App 的開發(fā)中也是一種很好的選擇。當(dāng)然原生 App 仍有其優(yōu)勢，因此在本系列文章的最后， Kayo 會介紹一種方法將 Web App 轉(zhuǎn)換為原生的 App 。
二.使用 jQuery Mobile 與 HTML5 開發(fā) Web App
既然 Web App 具有很多的優(yōu)勢，那么應(yīng)該如何使用 Web 開發(fā)技術(shù)開發(fā)出一款優(yōu)秀的 Web App 呢？
首先我們必須知道，一款優(yōu)秀的 Web App ，需要有良好的 UI 與用戶體驗（UE），雖然本質(zhì)上作為一個站點，內(nèi)容才是用戶需要的，但我們?nèi)孕枰褂昧己玫?UI 與 UE 來作為內(nèi)容與用戶的連接，因此我們引入 jQuery Mobile 來為 Web App 制作 UI 與交互。
有了 Web App 的界面，還需要數(shù)據(jù)的交互，這樣才能做出 App 。這里可以使用 PHP 等服務(wù)器腳本與 Mysql 等數(shù)據(jù)庫來為 Web App 提供數(shù)據(jù)驅(qū)動，但 Kayo 希望采用一種新的方法，也就是 HTML5 的方法，使用 HTML5 規(guī)范提供的 Web SQL Database —— 一個簡單強大的 Javascript 數(shù)據(jù)庫 API， 可以在本地數(shù)據(jù)庫中存儲數(shù)據(jù)（如內(nèi)嵌在瀏覽器中的 SQLite ），另外還可以使用 HTML5 規(guī)范中的 Storage （本地儲存） 來儲存數(shù)據(jù)，這樣就可以減少 Web App 對于網(wǎng)絡(luò)的依賴，并且整個 Web App 都是使用前端的技術(shù)完成（很震撼吧?。?。
最后不得不提的是 offline application cache （離線程序緩存），它也是 HTML5 的特性，允許用戶在無網(wǎng)絡(luò)連接的情況下運行 Web App，因此我們可以利用此特性制作支持離線使用的 Web App ，進(jìn)一步減少 Web App 對于網(wǎng)絡(luò)的依賴。
三.響應(yīng)式設(shè)計
響應(yīng)式網(wǎng)頁設(shè)計由 Ethan Marcotte 提出，通俗點說，就是網(wǎng)站界面能夠兼容多種終端，而不是每種終端各自做一個界面。騰訊等大型網(wǎng)站都有針對不同的設(shè)備做出不同的界面，比如 3g 版，觸屏版，ipad……，這樣就會增加了很多重復(fù)的工作量，因此我們可以為網(wǎng)站漸進(jìn)的設(shè)計一個界面，自動適應(yīng)不同的設(shè)備，當(dāng)然設(shè)備間的效果可以有所差距。這里 Kayo 小插一段，Kayo 認(rèn)為響應(yīng)式設(shè)計的誕生，很大程度上歸功于移動互聯(lián)網(wǎng)的發(fā)展與移動設(shè)備硬件的提升，而移動互聯(lián)網(wǎng)的發(fā)展本身也依賴于移動設(shè)備硬件的提升，因此想不斷提升的 App ，還得先要硬件廠商給力。
言歸正傳，這里提到響應(yīng)式設(shè)計的理念當(dāng)然是希望在設(shè)計 Web App 時也應(yīng)用到，而這些 jQuery Mobile 已經(jīng)為開發(fā)者預(yù)先做好， jQuery Mobile 不但默認(rèn)的 UI 樣式里已經(jīng)按響應(yīng)式設(shè)計做好，它還另外提供了一些為響應(yīng)式設(shè)計而做的方法，日后會詳細(xì)介紹。
四.漸進(jìn)式設(shè)計
Kayo 在之前介紹 jQuery Mobile 的文章《jQuery Mobile 特性》時已經(jīng)提到過漸進(jìn)式設(shè)計，下面引用文中的話：
“前端設(shè)計時通過漸進(jìn)增強功能來設(shè)計一直也是 Kayo 的設(shè)計想法，因為不同的平臺，不同的設(shè)備有著不同的 Web 環(huán)境，因此對于一些出色的前端效果很難保證在每臺設(shè)備上都呈現(xiàn)相同的效果，因此與其為了在所有設(shè)備上做到一樣的效果而降低整體的前端樣式，不如對于好的設(shè)備可以呈現(xiàn)更出色的效果，而基本的效果就兼容所有的設(shè)備。jQuery Mobile 的設(shè)計也是如此，核心的功能支持所有的設(shè)備，而較新的設(shè)備則可以獲得更為優(yōu)秀的頁面效果。”
這里使用 jQuery Mobile 的目的非常明顯，也就是使到 Web App 能盡量兼容不同的設(shè)備并且在較為先進(jìn)的設(shè)備中呈現(xiàn)更加出色的表現(xiàn)，而不要為了統(tǒng)一而犧牲優(yōu)秀的設(shè)計。
五.作品
下面是利用上文提到的各種技術(shù)做出的成品—— Do.It ，一款 Web App 備忘，添加的事項默認(rèn)會到“今天”這一欄，若今天的事情不完成，明天繼續(xù)添加，則會越來越多，所以今天的事情要今天完成噢！在觸摸設(shè)備上向右劃動事項則為完成事項（電腦的話也可以按住鼠標(biāo)劃動，不過不易成功）。另外用戶不需注冊可以直接使用，該 Web App 采用 Web SQL Database 存儲數(shù)據(jù)，數(shù)據(jù)存在設(shè)備本地，因此沒有注冊，登陸的麻煩，方便吧！還有其他功能歡迎體驗！
各位可以使用 webkit 內(nèi)核的設(shè)備瀏覽下面的地址（PC 上的 Chrome， Safari ，以及 Android , iPhone/iPad 上的系統(tǒng)瀏覽器。）
本文由 Kayo Lee 發(fā)表，本文鏈接：http:///web-app-by-jquery-mobile-and-html5-principles.html
