使用jQuery Mobile和JSON創(chuàng)建移動(dòng)應(yīng)用程序
在移動(dòng)領(lǐng)域,除了對(duì)設(shè)備特定屬性的支持之外,最主要的一個(gè)問題就是程序的大小,正如Aaron Quint所說:
壓縮后的jQuery也大概有40-50K,可能還會(huì)稍微多一些,此外,如果你想要jQuery UI和一些動(dòng)畫功能,那么就還需要100K。對(duì)于移動(dòng)設(shè)備來說,可能沒有那么多空間。 |
JQM Alpha 3現(xiàn)在已經(jīng)精簡到17K,其中還有相關(guān)的CSS文件。
Enrique Ortiz還發(fā)現(xiàn)了JQM的其他優(yōu)勢:
◆總體上的簡單性: 你可以主要使用標(biāo)簽驅(qū)動(dòng)的方式開發(fā)頁面,那樣,你只需要使用很少或者不使用JavaScript。
◆進(jìn)一步改善和得體的降格: jQuery Mobile哲學(xué)是要同時(shí)支持高端和性能較差的設(shè)備,包括那些不支持JavaScript的設(shè)備,并且還要盡可能提供***體驗(yàn)。
◆可訪問性: jQuery已經(jīng)支持可訪問的富Internet應(yīng)用程序(WAI-ARIA),以有助于使用輔助技術(shù)讓有殘疾的訪問者也能夠訪問網(wǎng)頁。
◆小文件
◆主題
安裝JQM很簡單,只需要添加一個(gè)樣式表文件和三個(gè)JavaScript文件:
- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1 /jquery.mobile-1.0a1.min.css" />
- <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
- <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"> </script>
- <script src="http://jquery.ibm.navitend.com/utils.js"></script>
此外,F(xiàn)rank還提到,在移動(dòng)領(lǐng)域JQM的關(guān)鍵優(yōu)勢就在于,它能夠使用AJAX讓用戶界面更平滑:
JQM把Ajax提升了一個(gè)層次,這是通過攔截頁面請求,并在大多數(shù)情況下把這些請求轉(zhuǎn)化為指定的Ajax調(diào)用達(dá)到的。最基本的結(jié)果是,當(dāng)用戶訪問使用JQM構(gòu)建的web應(yīng)用程序時(shí),只會(huì)修改頁面的DOM結(jié)構(gòu),而不是每次都替換所有頁面。 |
這種效果是通過使用HTML5的data-*屬性達(dá)到的。在HTML5中,任何帶有data-前綴的屬性本質(zhì)上都會(huì)被驗(yàn)證解析器忽略,而應(yīng)用程序可以任意地?cái)r截那些屬性。JQM依賴于data-role屬性把它的核心功能組合成字符串。
當(dāng)JQM應(yīng)用程序從一個(gè)頁面切換到下一個(gè)頁面時(shí),發(fā)生的主要?jiǎng)幼骶褪莾?nèi)容div中的內(nèi)容會(huì)換成新頁面的內(nèi)容。 |
我們可以使用data-rel屬性請求窗口如何顯示,當(dāng)它顯示出來的時(shí)候,data-transition屬性會(huì)告訴JQM做出相應(yīng)的轉(zhuǎn)換。我們可以使用data-filter屬性來指定data-role列表的行為,而該列表可以基于輸入的關(guān)鍵字來過濾列表的值。Frank還說明了如何創(chuàng)建自定義的data-*屬性,從而實(shí)現(xiàn)應(yīng)用程序的特殊屬性。
JQM會(huì)在今年上半年發(fā)布。Frank***做出結(jié)論:
隨著時(shí)間的推移,我們期望它能夠整合到像PhoneGap之類的框架中,并且可能會(huì)整合到像Appcelerator的Titanium等開發(fā)環(huán)境中。 |
你認(rèn)為基于Web的移動(dòng)應(yīng)用程序有前途嗎? 這只是框架和開發(fā)是否簡單的問題,還是移動(dòng)應(yīng)用程序非常特殊(因?yàn)橛脩魰?huì)使用自己的客戶端,并期望獲得***的用戶體驗(yàn)和安全性)以致于基于Web的應(yīng)用程序只會(huì)成為新平臺(tái)上的邊緣程序。
查看英文原文:Using JQuery Mobile and JSON to Create Mobile Applications