欧美一区二区三区东南亚,亚洲不卡电影,免费视频88av在线

移動WebApp開發(fā)JS框架對比

2014.11.05

1 目的

本次評比的目標是以移動Web App開發(fā)為基礎(chǔ)的JS框架，會有意的排除部分不適用于移動Web App開發(fā)的JS框架，如jQuery、ExtJS等。希望通過這次評比結(jié)果，能找到最合適你移動Web App應(yīng)用開發(fā)的JS框架。

2 方法

由于JS框架在功能、特性和應(yīng)用領(lǐng)域不同，所以，我將現(xiàn)在的主流JS框架分成四個大類：

Mobilie Javascript Library。移動JS框架，在Desktop Javascript開發(fā)中具有代表性的JS框架有jQuery、ExtJS等，而在Mobile Javascript開發(fā)中比較成熟的有Sencha Touch、jQueryMobile等；
Javascript TemplateEngine。JS模版引擎，Javascript 在生成各種頁面內(nèi)容時如果能結(jié)合一些模板技術(shù)，可以讓邏輯和數(shù)據(jù)之間更加清晰。Sencha Touch自帶XTemplate模版引擎，完美的應(yīng)用在組件渲染中；
Javascript MVC Framework。JSMVC框架，如Backbone、Ember等。在ExtJS 4的應(yīng)用架構(gòu)中就設(shè)計有MVC模式，同時Sencha Touch很好的繼承了ExtJS在MVC方面的優(yōu)秀架構(gòu)思想；
Javascript ModuleLoader。JS模塊化加載，在CommonJS提出AMD規(guī)范時，就得到了大多數(shù)開發(fā)者的積極響應(yīng)，同時誕生了一批符合AMD規(guī)范的優(yōu)秀的框架，如RequireJS，現(xiàn)在主流的JS框架都陸續(xù)開始支持AMD規(guī)范，如Dojo等。

本篇文章主要對Mobilie Javascript Library進行對比，針對移動JS框架中的兩類特性:

支持平臺與兼容性
開發(fā)與學(xué)習(xí)

作為參考指標，最后分析總結(jié)。

3 Mobile Javascript Library

Mobile Javascript Library包含兩種類型的JS庫：UI框架、類庫

UI框架包含一套完整的WebApp用戶體驗，提供一組功能豐富的控件，并允許開發(fā)者方便地依照自己的需要加以擴展；
類庫僅是一些類與函數(shù)的集合，類庫中的一個個“完整的概念”之間是無關(guān)的或是關(guān)系松散的。

以我們接觸得比較多的兩種Desktop Javascript Library為例，ExtJS屬于UI框架，而jQuery就是一個類庫。

3.1 選擇移動JS框架思考的問題

優(yōu)秀的觸摸屏交互體驗：手指作為輸入設(shè)備代替鼠標光標提供了一個額外的用戶界面設(shè)計的挑戰(zhàn)。MobileJavascript Library提供標準的用戶界面元素和事件處理模型。
跨平臺：支持多種移動設(shè)備平臺，如 iOS和Android等。
輕量級：由于移動網(wǎng)絡(luò)帶寬的限制，會更加重視文件大小。
使用HTML5和CSS3標準：大多數(shù)主流移動設(shè)備的網(wǎng)頁瀏覽器支持HTML5和CSS3，移動WebApp使用W3C規(guī)范的新功能與特性為用戶提供更好的體驗。

下面，通過比較Mobile Javascript Library的特性，找到一個最適合的JS框架幫助你創(chuàng)建移動WebApp應(yīng)用。

3.2 特性比較

3.3 分析

Sencha Touch

優(yōu)點

· 用戶體驗最接近Native App，具有整體的UI組件、布局解決方案；

· 統(tǒng)一的編程代碼結(jié)構(gòu)和要求，良好組織的代碼易于維護；

· 繼承ExtJS 4的應(yīng)用程序MVC架構(gòu)；

· 完善的API文檔，示例；活躍的社區(qū)，網(wǎng)上有大量的文檔書籍幫助學(xué)習(xí)；

缺點

· 兼容性差，僅支持webkit內(nèi)核的瀏覽器；

· 框架比較重量級，學(xué)習(xí)成本比較高；

· 商業(yè)化使用有版權(quán)問題；

jQuery Mobile

優(yōu)點

· 跨瀏覽器兼容性最好，幾乎兼容所有的平臺和瀏覽器；

· 入門簡單，語法簡潔，編碼靈活，一些簡單的應(yīng)用直接用HTML既可實現(xiàn)，無需Javascript；

· 開源插件與第三方擴展網(wǎng)上資源豐富；

· 完善的API文檔，示例；活躍的社區(qū)，網(wǎng)上有大量的文檔書籍幫助學(xué)習(xí)；

缺點

· jQuery Mobile對代碼沒有特定的要求，后期維護難度較大；

Zepto

優(yōu)點

· 學(xué)習(xí)成本低，Zepto保持了與jQuery幾乎一樣的功能，使用gzip壓縮只有5-10k；

缺點

· Zepto不支持Windows Phone下的IE ；

Jo HTML5Mobile App Framework

優(yōu)點

· 沒有什么突出的優(yōu)點，感覺是與Sencha非常相似的一個框架；

缺點

· 兼容性相比Sencha Touch稍好一點，但是也不支持WPIE、Firefox、Opera；

· 網(wǎng)上文檔、資料太少，中文資料幾乎沒有，英文資料也非常少；

Wink Toolkit

優(yōu)點

· Wink的核心庫是輕量級的，支持AMD規(guī)范的模塊化加載，功能接口相比Zepto更豐富；

· 提供很酷的2D、3D效果UI組件；

缺點

· 組件對 Android的支持程度不好，3D組件無法使用；

ChocolateChip-UI

優(yōu)點

· 組件樣式模仿iOS界面，用戶體驗與iOS非常相似；

缺點

· 兼容性差，僅支持webkit內(nèi)核的瀏覽器；

· API文檔太簡單，網(wǎng)上資料非常少，社區(qū)沒有活力；

· 組件擴展難度高，要熟悉WMXL標簽語法；

XUI

優(yōu)點

· XUI有多個版本，跨瀏覽器支持的代碼都被剝離，使用GZIP壓縮之后最小只有4.2kb。學(xué)習(xí)成本低，與jQuery相似的鏈式語法。

缺點

· XUI的優(yōu)點也是缺點，有的Web App應(yīng)用可能并不希望將跨瀏覽器支持拆分為多個版本使用；

Dojo Mobile

優(yōu)點

· Dojo本身有很多優(yōu)秀的設(shè)計，面向?qū)ο?、MVC、JS模塊化加載；

· 完善的API文檔，示例；活躍的社區(qū)，網(wǎng)上有大量的文檔書籍幫助學(xué)習(xí)；

缺點

· Dojo Mobile需要依賴完整的dojo庫，壓縮之后的代碼140k，gzip壓縮之后在40k；

· 兼容性差，僅支持webkit內(nèi)核的瀏覽器；

· 學(xué)習(xí)成本高；

4 總結(jié)

想要最好的用戶體驗Sencha Touch會是最好的選擇，想要最好的兼容性應(yīng)當選擇jQueryMobile，如果有相當強大的UI團隊，Zepto、XUI會是更好的選擇，適合的才是最好的。

對于我個人而言，我比較青睞Zepto這種小巧靈活的類庫，能讓我有最大的自由發(fā)揮空間。我在面向?qū)ο?、UI組件、MVC方面擁有多年的開發(fā)經(jīng)驗，有能力去設(shè)計、編寫UI框架，當然，這些都離不開我的UI團隊的支持。雖然Zepto不兼容IE，但是這在可接受的范圍之內(nèi)，如果未來官方不能支持IE的話，我的團隊有足夠的實力與時間實現(xiàn)Zepto對IE的兼容。

選擇一個適合的移動JS框架只是開始，移動WebApp開發(fā)才是真正的挑戰(zhàn)，如何解決跨平臺的各種兼容問題？如何保證基于HTML5的WebApp的穩(wěn)定性？如何平衡動畫效果的性能問題？等等。