移动端开发：使用jQuery Mobile仍是Zepto

原：http://blog.csdn.net/liubinwyzbt/article/details/51446771

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形式。

下面提出我我的的建议：

1. 若是你的团队刚刚组建或者框架知识了解不深刻，那么开发移动端，使用单一的库就好了。 
   好比：jQuery mobile或Zepto。 
   使用jQuery mobile能够省略不少UI设计或者说重构的一些工做，在公司团队中，若是没有这方面的成员时，可使用此库。可是此库性能很差，兼容性通常，UI限制大，请慎重使用。 
   使用Zepto开发，性能上最好的，而兼容性比较好，跟jQuery有一样的API，只是须要本身设计UI，以及重构。touch功能上有必定的兼容性问题。推荐使用此库，这样你能够任意发挥你的想法。

2. 若是你的团队，个个都是高手了，那么就能够进行mvc模式的开发了。在你的项目中，加入backbone+underscore，这是目前为止，最简单的mvc模式的开发组合。可是你们都知道，使用backbone，你就必须按照backbone的模式来进行项目的开发，具备必定的限制。也就是说，开发和维护，都须要了解backbone这个框架。

3. 若是你的团队，个个是大牛的话，那么就可使用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调试，并且反应比较慢。可是，仍是可以解决问题的，只是效率不高。网上有不少教程，百度一下就知道怎么用了。 
   扩展阅读

zepto/jQuery、AngularJS、React、Nuclear的思考

[原创]zepto打造一款移动端划屏插件

移动设备web开发首选框架：zeptojs介绍

移动开发流量省起来之Zepto