html5移動應用架構

手機上mobile app，UI 架構可以分為兩種，一種就是跑在普通手機浏覽器上的網站，還是需要走網絡；另一種是與 PhoneGap/Appcelerator/Titanium 這些橋接器配合做成真正的手機應用。

Ratchet——專門針對移動裝置優化的css架構，bootstrap的一員，提供了一些常見控件的調用，比如按鈕、iphone上的segmented control,開關鍵，清單視圖。

Ionic——一個完善的hybrid app開發方案，配合angular js使用，功能強大。

Onsen UI——和Ionic很類似，也是最好配合Angular JS使用，官方寫了幾個不錯的patterns，可以拿來就用。

Framework7——Full feature for html framework for building ios apps；示例也可以在各大平台上直接運作。

1.架構phonegap

phonegap是一個基于html5/javascript/css的，建立移動跨平台移動應用程式的快速開發平台。它使開發者可以使用Android，Palm,Symbian,WP7,WP8,Bada和Blackberry智能手機的核心功能——地理定位，加速器，照相機，聯系人，聲音，震動等。

此外PhoneGap擁有豐富的插件，可以調用。 

優點：1.可跨平台。phonegap架構幫我們解決了差異性，javascript與平台系統的連接配接由phonegap架構完成。成為連接配接移動終端的擴充卡，或者說中間件。 

2.提供硬體通路控制。可調用加速計、攝像頭、羅盤、通訊錄、文檔、地理定位、媒體、網絡、通知(警告、聲音和振動)、存儲。 

3.可利用成熟JavaScript架構。如：Ext js、jQuery。 

缺點：1.性能差。運作速度慢，UI反應延時——這是個緻命傷。(高端機影響不大) 

2.不能完全跨平台。不同平台代碼需要微調。 

3.記憶體消耗大。 

4.調試難度大。

2.架構：Ionic 

官網：http://ionicframework.com/ 

簡介： Ionic 是一個強大的 html5 應用程式開發架構，号稱 Advanced Html5 Hybrid Mobile AppFramework 是 AngularJS 移動端解決方案 可以幫助您使用 Web 技術，比如 HTML、 CSS 和Javascript 建構接近原生體驗的移動應用程式。 Ionic 主要關注外觀和體驗，以及和你的應用程式的 UI 互動，特别适合用于基于 Hybird 模式的 HTML5 移動應用程式開發。 Ionic 是一個輕量的手機 UI 庫，具有速度快，界面現代化、美觀等特點。為了解決其他一些UI 庫在手機上運作緩慢的問題。 

優點：1.追求性能 運作速度快 

2.輕量級架構 

3.基于 angularjs，支援 Angularjs的特性， MVC ，代碼易維護 

4.通過 SASS 建構應用程式。它提供了很多 UI 元件來幫助開發者開發強大的應用。 

5.接近原生。 

6.強大的指令行工具 

3.可利用成熟javascript架構。如：Ext js、jquery。 

缺點：1.Ionic是一個前段架構。不能完全取代PhoneGap和JavaScript架構的作用 

2.需要結合插件使用。

3.架構：appcan（國産） 

官網：http://www.appcan.cn/ 

簡介：AppCan是國内Hybrid App混合模式開發的倡導者，AppCan應用引擎支援Hybrid App的開發和運作。并且着重解決了基于HTML5的移動應用”不流暢”和”體驗差”的問題。使用AppCan應用引擎提供的Native互動能力，可以讓HTML5開發的移動應用基本接近Native App的體驗。 

與Phonegap支援單一webview使用div為機關開發移動應用不同。AppCan支援多視窗機制，讓開發者可以像最傳統的網頁開發一樣，通過頁面連結的方式靈活的開發移動應用。基于這種機制，開發者可以開發出大型的移動應用，而不是隻能開發簡易類型的移動應用。 

AppCan提供強大的裝置調用能力，電話、短信、相機、LBS、傳感器、資料庫等常用的手機功能，開發者可以通過JS接口調用，輕松建構移動應用。 

優點：1.跨平台：同時支援iOS、android、Symbian、Windows Phone 

2.原生體驗：引入原生UI控件與互動支援（如Action Sheet等） 

3.開發工具：基于Eclipse的開發工具，內建UI控件與應用管理 

4.UI架構：提供強大的UI架構，更加易于實作頁面布局與互動 

5.裝置API：支援各種手機裝置調用，如電話、相機、傳感器、定位等 

6.本地打包：無需配置環境，無需編譯，本地一鍵打包 

7.插件機制：支援第三方原生插件，支援JS插件 

8.代碼加密：基于密鑰的加密方式，無法破解，像混編一樣保護html代碼 

統計分析：應用分平台安裝數統計，應用啟動和使用情況統計 

9.開放平台：更具本土優勢，已經對接Sina、QQ、百度等開放平台 

10.技術支援：技術支援及時響應，重視開發者建議和回報 

缺點：1.AppCan免費版因需要把源代碼上傳到廠商的伺服器上打包，對于企業開發來說源代碼洩露安全性上有一定風險。企業版雖然可以解決，但企業版穩定尚待觀察。 

2.AppCan采用封裝的元件，依賴性比較高。不是開源代碼。 

3.AppCan 不能很好的解決原生代碼的功能

4.架構：ApiCloud(國産) 

官網：http://www.apicloud.com/ 

簡介：APICloud是中國領先的“雲端一體”的移動應用雲服務提供商。APICloud推行“雲端一體”的理念，重新定義了移動應用開發。APICloud為開發者從“雲”和“端”兩個方向提供API，簡化移動應用開發技術，讓移動應用的開發周期從一個月縮短到7天。APICloud由“雲API”和“端API”兩部分組成，可以幫助開發者快速實作移動應用的開發、測試、釋出、管理和營運的全生命周期管理。 

APICloud緻力成為中國領先的移動垂直領域雲服務商，幫助傳統軟體公司從B/S架構成功走向APP，幫助中國數百萬web開發者轉化成移動APP專家！。 

優點：1.提供開發的IDE。 

2.提供資料雲API、統計雲API、推送雲API 

缺點：與Hbuilder存在版權問題，抄襲Hbuilder

5、JQuery Mobile 

1.官方網站：http://jquerymobile.com/ 

2.性質：UI架構 

3.說明：這個大名鼎鼎的JQuery的移動版本。跟JQuery一樣是一個輕量級的JS庫，一樣使用HTML5+CSS+JS的技術。應為輕量級，是以在web加載時比Sencha有一點優勢。缺點顯而易見，UI控件太少了。因為JQuery Mobile 太普及了，也有很多第三方的擴充控件庫例如JQuery Mobile Touch。比較有意思的是Sencha Touch 也融合了JQuery Mobile Touch。 

4.授權：完全開源，放心使用

還有幾個國内比較火的前端架構，基本是國内大公司推出的：

1.JX(騰訊)

JX 是一個類似 Google Closure Library 的 Web 前端開發架構，服役于 WebQQ 等大規模的 WebApp。

JX 是子產品化的非侵入式Web前端架構，開發于2008年，并于2009年開源于GoogleCode ，于2012年切換到Github。 JX 架構同時适用于 Web Page 和 Web App 項目的開發，特别适合建構群組織大規模、工業級的Web App，騰訊 WebQQ、騰訊Q+等産品都是采用JX架構開發，相容目前所有主流浏覽器。

2.KISSY(騰訊)

KISSY是淘寶的前端類庫，幾乎在淘寶的每個頁面上都能看到它的身影。

KISSY提供穩定的核心，包括 oo、dom、Event、Anim、Ajax 等；強大且易用的腳本加載器，特有的 loader；豐富的UI元件，包括 Switchable、Overlay、Draggable and Droppable 等。KISSY具備子產品化、高擴充性、元件齊全等特性。

3.Qwrap（百度）

QWrap是百度有啊前端團隊推出的一個Javascript架構，支援IE6+、Firefox、Chrome、Safari、Opera等浏覽器，在BSD協定下開源釋出。

QWrap的特點如下：

1. 提供jQuery一樣友善的dom功能，同時又打破jQuery“專注于dom”的限制，也提供非dom的許多功能。

2. 提供prototype友善的原型功能，同時又提供Javascript1.6的泛型功能，并且提供使用者有選擇友善與嚴謹的自由。

3. 提供YUI2一樣的靜态方法庫，同時又用所謂的Helper規範來做到真正的絕對靜态，讓元件開發者可以釋出出無依賴的元件。

4. 學習YUI3的use，同時又擯棄YUI3的嚴謹性潔癖，讓use更實用。

5. QWrap獨創特的Helper + Wrap + Retouch + Apps設計，讓QWrap有更多的靈性等待你去發現。

4.Tangram(百度)

Tangram是一款實用的JavaScript基礎庫，通過它可以快速建構出高度互動的Web應用程式。Tangram具有全浏覽器相容，平滑更新體驗以及自由定制輸出最小尺寸的特點。

5.Como(康尚實驗室)

Como由上海康尚實驗室開發，是一款簡易而功能強大的JS架構，對String等原生對象進行了擴充，支援常用的CSS選擇器，高效的動畫播放，強大的包擴充機制，支援類的繼承等。

轉載于:https://www.cnblogs.com/liangxin/p/7374445.html