移動端開發：使用jQuery Mobile仍是Zepto

jQuery Mobile和Zepto是移動端的js庫。jQuery Mobile至關於PC端的jQuery UI，它提供了不少頁面的UI庫，可以很快的開發出漂亮的界面，適合公司沒有UI設計師的前端開發人員來進行移動端的開發。Zepto至關於PC端的jQuery，它提供了不少方法和功能，可以很快的實現各類需求和功能，適合公司有UI設計師的前端開發人員來進行移動端的開發。

jQuery Mobile性能上沒有zepto好。

zepto.js是一個專爲mobile WebKit瀏覽器(如：Safari和Chrome)而開發的一個JavaScript框架。它標榜本身在其簡約的開發理念，可以幫助開發人員簡單、快速地完成開發交付任務。更重要的是這個JS框架，是超輕量級的，只有5KB。zepto.js的語法借鑑而且兼容jQuery。

jQuery Mobile這個框架可以幫助你快速開發出支持多種移動設備的Mobile應用用戶界面。

jQuery Mobile不只會給主流移動平臺帶來jQuery核心庫，並且會發佈一個完整統一的jQuery移動UI框架。雖然jQuery Mobile相對較新，但開發人員能夠用jQuery Mobile爲許多移動設備（包括智能手機和平板電腦）開發網站應用程序，RSS閱讀器等應用。

jQuery Mobile是目前最流行的一個移動開發的框架，文檔豐富，社區活躍，有不少的UI控件供咱們使用，而且提供對多頁面的支持（經過Ajax方式讀取內容，並提供頁面切換的過渡動畫）。我認爲jQuery Mobile的最強大之處就在於其UI方面的支持，但這一部分偏偏不是我所須要的，它對UI的限制比較多。Sencha Touch是ExtJs的移動版，對於不熟悉ExtJs的人來講有必定的學習成本。

jQuery Mobile的缺點，主要有兩點：一是重，二是UI限制太大。

咱們選擇了zepto.js做爲底層庫，使用sea.js進行模塊的管理和發佈，固然也可使用requirejs來進行模塊的管理和發佈，
requirejs比seajs的對應的工具多一些，由於requirejs是外國的，而其餘相應的工具也是外國的，所以使用seajs，相對應的工具會少一些。可是開發起來容易一些，都是中文資料。此外，咱們使用backbone.js爲基礎的MVC架構，用來剝離應用的數據部分；使用underscore.js作爲前端模板引擎（backbone重度依賴）；使用iScroll.js爲咱們提供模擬滾動的功能（此庫在低端移動設備上，反應慢）。這些都是一些專業的「小庫」，很適合移動端的開發。固然，具體狀況須要具體分析，沒有萬能的框架，只有萬能的開發者。若是時間容許，也能夠本身來定製一套知足自身需求的基礎庫。畢竟在移動端，一切以 「精簡」爲主。

對於單頁應用來講，iScroll確實是一個很是優秀的解決方案，可是iScroll卻有一個最大的缺陷——慢，滾動的性能與瀏覽器原生實現相比，在低端的移動設備上有明顯卡頓。

不過要兼容低端的移動設備，原生的滾動仍是有優點的。嘗試放棄使用iScroll組件，使用原生的Scroll。由於較新的瀏覽器已支持 {overflow: scroll; -webkit-overflow-scrolling: touch;}。

iScroll的誕生，主要是由於早期的webkit內核瀏覽器沒有一種原生支持固定高度的容器。到目前爲止，iScroll最大的問題就是慢，在千元如下Android設備上表現尤其突出。使用局部滾動來替代iScroll滾動是最好的一種方式，但很惋惜，如今只有iOS五、6支持局部滾動，而且支持程度並很差，而Android壓根就不打算支持。這樣，咱們就不得不使用iScroll。

問題來了，如今到底使用iScroll呢？仍是不使用？使用的話，大部分Android設備在滾動時會很卡，如不使用，部分功能又實現不了。其實，這個問題也沒必要太糾結。

• 首先， 對於header、footer須要固定位置的頁面，能夠直接使用position:fixed實現。部分不支持fixed定位的瀏覽器問題也不大，這部分設備通常都是Android2.x的系統，配置也較低，相對交互而言，速度顯然更加劇要；
• 對於須要依賴固定高度實現切換動畫效果的交互，應儘可能保證滾動條在頁面頂部時處理。必要時作出一些犧牲，捨棄部分影響用戶使用流暢的交互；
• 儘可能使用瀏覽器原生支持代替iScroll；
• 若是必須使用iScroll才能實現的功能，必定要控制在最小範圍，不要在經常使用場景應用iScroll；

雖然iScroll在iOS下表現得很是出色，可是都應當儘可能使用瀏覽器原生支持特性來實現功能，這樣才能最大化保證交互操做的流暢性。

很長一段時間都有一個爭論，有頁面跳轉是否是WebApp？我認爲單獨討論single page webapp仍是頁面跳轉是沒有意義的，全部產品都是創建在用戶需求之上。對於現有的single page webapp產品，瀏覽器沒有準備好，硬件配置也沒有準備好，函數運算效率、頁面渲染都跟不上，尤爲是Android設備。基於用戶需求出發，一些意識形態的東西該拋棄就拋棄，放開的使用頁面跳轉，只要能讓程序運行流暢的東西，就應該絕不猶豫的使用。

但凡事也沒有絕對，在必定的功能範圍以內，也可使用炫一些的切換動畫，在一個頁面實現多個子功能。

基於以上對移動端瀏覽器混亂程度的理解，移動web產品要作到全平臺適配，工做量無遺是巨大的，而且，因爲HTML5的支持程度，也會致使大部分低端用戶沒法使用到一些高級特性，或表現效果不佳。並且，不必爲了適應低端Android用戶讓高端iOS用戶也忍受着簡陋無比的交互及界面。那麼，將iOS、Android、Windows Phone分爲不一樣的版本，作相應的功能適配仍是頗有必要的。

• 在iOS下，自由度比較高，能隨意發揮，不少有創意的交互及設計，都能在Safari下表現得比較好；
• Android下因爲設備硬件配置及瀏覽器版本差別比較大，就會選擇相應保守的方式，捨棄部分影響用戶使用流暢的交互，以及影響頁面渲染的界面設計；
• 對於Windows Phone咱們是從WP8起步，這樣會更好作瀏覽器兼容。 作分版本適配的目的，是爲了在保證功能交互的前提下讓每一個用戶都能獲得最流暢的操做體驗。

用原生控件作外殼和交互，保證流暢的用戶體驗和完整的推廣渠道；使用HTML5來展現內容，保證內容的迅速迭代更新，即時響應用戶需求。因而就誕生了Hybrid  App，這也是目前最流行最合適的一種App形式。

下面提出我我的的建議：

若是你的團隊剛剛組建或者框架知識瞭解不深刻，那麼開發移動端，使用單一的庫就好了。

好比：jQuery mobile或Zepto。

使用jQuery mobile能夠省略不少UI設計或者說重構的一些工做，在公司團隊中，若是沒有這方面的成員時，可使用此庫。可是此庫性能很差，兼容性通常，UI限制大，請慎重使用。

使用Zepto開發，性能上最好的，而兼容性比較好，跟jQuery有一樣的API，只是須要本身設計UI，以及重構。touch功能上有必定的兼容性問題。推薦使用此庫，這樣你能夠任意發揮你的想法。

若是你的團隊具備必定的框架基礎，像模塊化開發的表明requirejs和seajs，那麼，徹底能夠把這個項目進行模塊化開發，把這兩個庫的任意一個加入到項目中，將對你項目的協同開發，之後的代碼維護都將有很好的貢獻。這兩個庫的學習成本不大，很容易上手。

若是你的團隊，個個都是高手了，那麼就能夠進行mvc模式的開發了。在你的項目中，加入backbone+underscore，這是目前爲止，最簡單的mvc模式的開發組合。可是你們都知道，使用backbone，你就必須按照backbone的模式來進行項目的開發，具備必定的限制。也就是說，開發和維護，都須要瞭解backbone這個框架。

若是你的團隊，個個是大牛的話，那麼就可使用angularjs或react了。這種模式的開發，現階段是前端開發的最新研究成果了。此種框架，學習成本大，可是表明着公司的實力和創新。

固然，除了以上這些基礎庫和基礎框架，咱們可能還須要添加一些第三方庫，好比iscroll，此庫兼容性好，惟一缺點就是在低端設備上，會卡，因此項目不能全局使用iscroll實現滾動效果。咱們須要添加原生的scroll來實現項目中的滾動效果，若是使用原生scroll不能實現的，那麼才使用iscroll來實現。

好比：faskClick，它解決點擊事件延遲的bug，固然zepto的touch模塊也能夠解決。

好比：模板引擎，像underscore，handlerbars等。

好比：HTML5的application cache本地緩存機制。

移動開發總結：

（1）jQuery mobile或者Zepto+本身設計UI

（2）seajs或requirejs+Zepto

（3）seajs或requirejs+Zepto+Backbone+underscore

（4）angularjs或react

我我的但願可以使用第三種，而後項目成熟了，再使用第四種。畢竟新技術的實踐，仍是頗有想象空間的。

固然，若是對技術不須要深刻，只要實現功能，那麼使用第二種我以爲仍是不錯的。 至於第一種，我我的以爲模塊化開發仍是很是必要的，以前在公司裏面看以前的前端負責人開發的一套系統，代碼寫的太混亂了，簡直看不得，維護起來很是不方便，因此模塊化開發，我我的以爲，必須使用。

關於移動端的UI組件，我推薦騰訊的frontUI。百度的gmu好久沒更新了，也沒人維護了，並且耦合性比frontUI大，不推薦。

關於移動端的調試工具，我暫時只用過weinre。因爲公司網絡不行，我使用的是低版本的weinre，只支持safari調試，並且反應比較慢。可是，仍是可以解決問題的，只是效率不高。網上有不少教程，百度一下就知道怎麼用了。 

 

 

 

 

加油！