【51CTO編者按】之前我們已經(jīng)介紹過(guò)四大主流移動(dòng)Web開(kāi)發(fā)框架，今天我們?cè)俅紊钊?，探討Web移動(dòng)應(yīng)用框架需要具備的技術(shù)特性和理念。目前雖然已經(jīng)有諸如iUI、jQTouch、WPTouch、PhoneGap、XUI、iWebkit等Web移動(dòng)應(yīng)用開(kāi)發(fā)框架，但在移動(dòng)這個(gè)領(lǐng)域畢竟剛剛起步，需要更多技術(shù)人員對(duì)其修正和思辨。下面這篇文章來(lái)自騰訊WSD團(tuán)隊(duì)博客，為我們梳理了移動(dòng)Web開(kāi)發(fā)框架的技術(shù)構(gòu)想。

iUI、jQTouch、WPTouch、PhoneGap、XUI、iWebkit、Rhodes、gwt-mobile…當(dāng)我們已經(jīng)開(kāi)始驚嘆 web移動(dòng)應(yīng)用充斥著各種各樣框架與類庫(kù)的時(shí)候，其實(shí)各大web框架才剛剛開(kāi)始他們的移動(dòng)領(lǐng)域：Yahoo的YUI3.2的Touch版、jQuery的 jQueryMobile、ExtJS整合JQTouch和Raphaël庫(kù)推出的Sencha Touch框架。

ExtJs更名為Sencha的確讓我震驚不少，畢竟自己也曾是ExtJs框架的粉絲，如此重量級(jí)的框架忽然掉頭往mobile touch的方向發(fā)展，確實(shí)不是一件易事，我們也不禁驚嘆移動(dòng)應(yīng)用所帶來(lái)的重大改變。

在這里我并不是想跟大家介紹各種web移動(dòng)應(yīng)用框架的用法介紹和性能對(duì)比。只是受ExtJs的影響，以及想知道自己到底去到一個(gè)什么程度，以及更好 的積累沉淀下前端的經(jīng)驗(yàn)，于是我開(kāi)始構(gòu)想一個(gè)好的web移動(dòng)應(yīng)用框架應(yīng)該如何如何，并開(kāi)始嘗試著手實(shí)現(xiàn)。重復(fù)造輪子只是強(qiáng)迫自己更深入地去了解這個(gè)領(lǐng)域， 并不是自大到要挑戰(zhàn)什么。于是分析對(duì)比了下，總結(jié)如下：

1.輕量級(jí)

這個(gè)應(yīng)該是移動(dòng)應(yīng)用框架里最重要的一點(diǎn)，不要想著3G的普及還有wifi啥的，國(guó)情就是國(guó)情，要大部門用戶在3秒內(nèi)下載完你那100K的css和js文件 是強(qiáng)人所難。因此我們的移動(dòng)應(yīng)用框架必須盡可能的輕量化，所有的命名和函數(shù)實(shí)現(xiàn)方法都要盡可能的簡(jiǎn)練和高度壓縮。拋掉那些PC上web應(yīng)用的特效和組件 吧，不要為了一個(gè)菜單效果把7，80K的jQuery.js加在你的頁(yè)面上。

2.主流手機(jī)瀏覽器兼容性

面對(duì)如此多的手機(jī)平臺(tái)和瀏覽器，要你的移動(dòng)應(yīng)用在所有瀏覽器上表現(xiàn)如一是很困難的，有時(shí)候你需要對(duì)不同瀏覽器加載不同的樣式文件，又或是運(yùn)行不一樣的函數(shù) 來(lái)實(shí)現(xiàn)效果。因此我們的框架必須有能識(shí)別各種主流瀏覽器的方法，具體點(diǎn)，你的框架必須能區(qū)分如iPhone、iPad、Android、Windows Phone等，OK，再國(guó)情化一點(diǎn)，QQ手機(jī)瀏覽器和UCWeb。最后要注意的是這里盡量不用UA的方法來(lái)判斷，因?yàn)楦鳛g覽器的 avigator.userAgent都很不可靠，這里可以參考下mooltools判斷瀏覽器的思路，應(yīng)用到我們的移動(dòng)領(lǐng)域上。

3.強(qiáng)大的選擇器

選擇器可以說(shuō)是一個(gè)框架靈魂，在將來(lái)的web移動(dòng)應(yīng)用中會(huì)大量使用CSS3的高級(jí)偽類，因此我們的框架必須能盡快遍歷定位到盡可能多的HTML5標(biāo)簽和CSS3的偽類，哪怕是像E:first-of-type這種jquery選擇器都不支持的結(jié)構(gòu)。

4.頁(yè)面動(dòng)畫(huà)效果

與桌面web應(yīng)用不同的是，移動(dòng)應(yīng)用在頁(yè)面的切換效果方面要炫的多，比如：滑動(dòng)切換，遮罩彈出，漸入漸出，閃屏，iPhone上的zoomin，zoomout效果等?？纯碈SS關(guān)于fadein和zoomin動(dòng)畫(huà)的定義：

再看看JS端對(duì)頁(yè)面切換的處理：

#p#

5.Ajax解析

移動(dòng)設(shè)備瀏覽器受性能和帶寬限制，ajax的應(yīng)用也與桌面應(yīng)用有較大的區(qū)別，因此低帶寬和易用性就成了ajax應(yīng)用的目標(biāo)，最典型的例子就是翻頁(yè)，哈，一絲一毫的帶寬都不能放過(guò)，這方面可以參考下iUI的思想。

6.手勢(shì)操作

這就是Touch，一個(gè)給移動(dòng)互聯(lián)網(wǎng)帶來(lái)革命的事件。把mouseOut、mouseover這些桌面相關(guān)的鼠標(biāo)事件從你的移動(dòng)框架里去除吧，與之替換的是各種Touch和Gesture(手勢(shì))事件:

◆touchstart : 手指放在屏幕上時(shí)觸發(fā)

◆touchend : 手指離開(kāi)屏幕時(shí)觸發(fā)

◆touchmove : 手指在屏幕上移動(dòng)時(shí)觸發(fā)

◆touchcancel : 取消Touch事件(這個(gè)貌似是系統(tǒng)觸發(fā)的)

◆gesturestart : 開(kāi)始手勢(shì)事件

◆gestureend : 停止手勢(shì)事件

◆gesturechange : 改變手勢(shì)事件

監(jiān)控Touch操作，我們需要利用Touch事件相對(duì)于整個(gè)頁(yè)面視圖的X軸和Y軸位置來(lái)定位(PageX、PageY)，并重載默認(rèn)的Touch事件來(lái)擴(kuò) 展我們的需求，對(duì)于沒(méi)有Touch支持的瀏覽器，我們依然可以重載相應(yīng)Mouse事件，而Gesture(手勢(shì))事件由于需要兩根手指觸發(fā)的放大、縮小、 旋轉(zhuǎn)，鼠標(biāo)是無(wú)法模擬,比如下面使用CSS3的webkitTransform樣式屬性縮放和旋轉(zhuǎn)一個(gè)對(duì)象Box：

7.重力感應(yīng)

當(dāng)然，一般的應(yīng)用很少會(huì)用到重力感應(yīng)，它更適應(yīng)于游戲方面。對(duì)于瀏覽器更多的是正屏與側(cè)屏的區(qū)分。我們要做的就是重載瀏覽器默認(rèn)的resize監(jiān)控事件并對(duì)正屏和側(cè)屏做出相應(yīng)的操作處理。

8.離線存儲(chǔ)

由于手機(jī)網(wǎng)絡(luò)的特殊性，離線存儲(chǔ)技術(shù)就變得相當(dāng)重要，相關(guān)的API可以看看W3C提供的有關(guān)Client-Side的描述。Client-Side提供了3種離線存儲(chǔ)的方案：

◆Database storage : 數(shù)據(jù)庫(kù)

◆Local storage : 本地儲(chǔ)存

◆Session storage : 區(qū)段儲(chǔ)存

我們的框架必須能很好的封裝這3種離線存儲(chǔ)方式，提供一個(gè)方便易擴(kuò)展的API，比如storage能直接儲(chǔ)存JSON參數(shù)數(shù)據(jù)段，就好像下面的Demo：

以上這些構(gòu)想可以整理成下面的框架結(jié)構(gòu)圖：

當(dāng)然，這僅僅是個(gè)開(kāi)始，關(guān)于移動(dòng)應(yīng)用框架的構(gòu)思還待我們進(jìn)一步深入挖掘。

【編輯推薦】

1. Oracle發(fā)布Java移動(dòng)開(kāi)發(fā)路線圖 影響近千萬(wàn)開(kāi)發(fā)者
2. 誰(shuí)是季軍？ 尋找iPhone和Android之外的第三極
3. 揭秘Windows Phone 7主界面技術(shù)