PhoneGap 与 移动开发 的挖坑与填坑 <不断更新>

　　PhoneGap想必大家都有耳闻，有人也用codorva框架称呼ta。当然，codorva是一套可以通过JS控制手机硬件设备的API。而PhoneGap可以认为是IDE，是一套利用codorva开发出mobile HTML5 app的solution。

　　PhoneGap可以一次开发，同时部署到andoird，iOS，winphone等8个平台。当然，我私以为部署到不同平台，代码上还是要有一些区别的。我在iOS和Android平台上开发过一款App, 发现要真的使用，还是有code不一样的，只是不多而已。

　　那么，问题来了，phonegap开发到底有多少坑？

 

　　1. 不要使用jQuery Mobile。

　　　　jQuery，很不错，但是jQuey mobile只能用呵呵来形容了。

　　　　第一，ta太大，加载时间长，这个大家都应该谁知道，移动最怕这个；

　　　　第二，ta性能差，还不如sencha touch，让移动设备的计算能力轻而易举的就捉襟见肘了；

　　　　另外，jQuery如果可以不用的话，也尽量不用，因为它相对原生js还是慢不少。比如通过class获取一个dom，就会比原生足足慢了一倍（个人测试，仅供参考）。

　　　　如果就喜欢jQuery的代码风格，可以自己写个简单的选择器，当然，这样还是会比原生慢一点点，毕竟调用链长了。

 

　　2. event：不要使用click事件。

　　　　移动浏览器为了实现双击放缩的手势，会在首次触发click后延迟等待300ms来确认是否是双击事件，这样就会导致页面反应迟钝。

　　　　解决方案：使用fastClick类库或禁止放缩(user-scalable=no)。

　　　　另外，将mousemove，mouseup，mousedown 事件对应替换为手机浏览器支持的 touchmove,touchstart,touchend事件。

 

　　3. 滚动ul的内容里，不要附加太多CSS代码和大量图片。

　　　　如果内容过多，在性能较差的设备里，会有强力卡顿。

　

　　其实，现在PhoneGap的开发已经不像几年前那样了，我们还有很多的开源工具可以选择，帮助我们提高性能，加快页面加载速度。我这里列举几样填坑小杀器：

 

　　1. RequireJS

　　 　　按需加载JS，同时处理JS之间的依赖关系，著名前端框架。

　　 　　符合AMD规范，如果使用过Dojo的话，可能可以很快上手。推荐使用。

 

　　2. Backbone

　　　　著名FE框架，主要功能是组织代码与路由管理。

　　　　经典的MVC架构，感觉是Angular的前辈了。

 

　　3. fastclick.js

　　　　点击事件处理的大杀器，避免穿透和点击事件的延迟。推荐使用。

　　

　　4. Hammer.js

　　　　可以处理各种触屏事件，可以结合fastclick使用，个人不是特别推荐。

 

　　5. iScroll5.js

　　　　著名的滚动条插件。以前4版本就很厉害了，支持下拉刷新，上拉加载等。推荐使用。

　　　　

　　6. Animate.css

　　　　CSS3的动画在移动设备上表现不俗，可以一试。