iUI、jQTouch、WPTouch、PhoneGap、XUI、iWebkit、Rhodes、gwt-mobile…當我們已經開始驚嘆web移動應用充斥著各種各樣框架與類庫的時候,其實各大web框架才剛開始他們的移動領域:Yahoo的YUI3.2的Touch版、jQuery的jQueryMobile、ExtJS整合JQTouch和Raphaël函式庫推出的Sencha Touch框架。 。 。
ExtJs更名為Sencha的確讓我震驚不少,畢竟自己也曾是ExtJs框架的粉絲,如此重量級的框架忽然掉頭往mobile touch的方向發展,確實不是一件易事,我們也不禁驚嘆移動應用所帶來的重大改變。
OK,在這裡我並不是想跟大家介紹各種web行動應用框架的用法介紹和效能對比。只是受ExtJs的影響,以及想知道自己到底去到一個什麼程度,以及更好的積累沉澱下前端的經驗,於是我開始構想一個好的web移動應用框架應該如何,並開始嘗試著手實現。重複造輪子只是強迫自己更深入地去了解這個領域, 並不是自大到要挑戰什麼。於是分析比較了下,總結如下:
1.輕量級
這個應該是行動應用框架裡最重要的一點,不要想著3G的普及還有wifi啥的,國情就是國情,要大部門用戶在3秒內下載完你那100K的css和js檔案是強人所難。因此我們的行動應用框架必須盡可能的輕量化,所有的命名和函數實作方法都要盡可能的簡練和高度壓縮。拋掉那些PC上web應用的特效和元件吧,不要為了一個選單效果把7,80K的jQuery.js加在你的頁面上。
2.主流手機瀏覽器相容性
面對如此多的手機平台和瀏覽器,要你的行動應用程式在所有瀏覽器上表現如一是很困難的,有時候你需要對不同瀏覽器加載不同的樣式文件,又或者運行不一樣的函數來實現效果。因此我們的框架必須有能辨識各種主流瀏覽器的方法,具體點,你的框架必須能區分如iPhone、iPad、Android、Windows Phone等,OK,再國情化一點,QQ手機瀏覽器和UCWeb。最後要注意的是這裡盡量不用AU的方法來判斷,因為各瀏覽器的avigator.userAgent都很不可靠,這裡可以參考下mooltools判斷瀏覽器的思路,應用到我們的移動領域上。
3.強大的選擇器
選擇器可以說是一個框架靈魂,在將來的web移動應用中會大量使用CSS3的高級偽類,因此我們的框架必須能盡快遍歷定位到盡可能多的HTML5標籤和CSS3的偽類,哪怕是像E:first-of-type這種jquery選擇器都不支援的結構。
4.頁面動畫效果
與桌面web應用程式不同的是,行動應用程式在頁面的切換效果方面要炫的多,例如:滑動切換,遮罩彈出,漸入漸出,閃屏,iPhone上的zoomin,zoomout效果等。看看CSS關於fadein和zoomin動畫的定義