“百度应用商店”的前端框架小探

通过修改 Chrome 浏览器的 UserAgent，可以顺利浏览百度应用的页面 http://m.baidu.com/ios，其主要使用了两个 JS 开源库：

1、底层库：Zepto.js（http://zeptojs.com/）

底层库一般都是围绕语言增强、事件封装、DOM 操控、模板与 AJAX 等的基础设施。百度应用没有使用到常见的 jQuery，而是使用与 jQ 语法兼容的 Zepto.js，另外由于该库只针对移动 WebKit 开发，所以显得比较轻量级。换句话说，Zepto.js 相当于 Webkit 版的 jQuery 接口重新制定版。详见：http://www.gbin1.com/technology/javascript/20120525javascript-zepot-js/

Webkit 浏览器提供的 API 日益先进，不但 css3 样式方面的，而且原生的 js api 方法都越来越强大，简直可以代替第三方 js 库。

2、列表控件 iScroll （http://cubiq.org/iscroll-4/）

比较头痛的一个问题便是 列表 的性能问题。往往在列表页面写的稍微复杂点，控件多一点就慢下来。但问题是，普通的一张 html 页面，即使像 sina.com.cn 这般标签众多的页面也可以在手机上平滑展示，为何数据量远不及新浪的列表控件却表现不佳呢？带着这好奇，我尝试做了一些 DEMO，发现无论 ios 或 android，平滑滚动的效果只是针对 docuemnt.body 本身的，如果不是这样，而是在 div 中写死高度（例如height:200px;overflow:scroll，即所谓的“区域滚动”），是无法实现平滑地“滚动”，只是一顿一顿地“移动”着。So，既然无法让原生滚动重现，那就写 js 动画去实现吧，于是就有了这里说的 iScroll（其他 jq 库皆同理），因为必须把列表“嵌入”某个大的控件中（为了可以上面摆按钮，下面摆 tab 之类的）。带来的问题是：1、还是慢，响应速度比原生平滑效果慢（低端机尤其明显）；2、如果使用到 css3 trans 实现动画的，在 Android4.03 上有 bug，非常卡（我们已经证实了这 bug——有消息说 4.1会 fix）

另外，我从网上也收藏了一些文章，不敢独享，参见如下：

• iScroll 简介http://hi.baidu.com/alimyself/item/5844d68a8e92fc57840fab8a“iScroll的诞生是因为手机 Webkit 浏览器（iPhone、iPod、Android 和 Pre）本身没有为固定宽度和高度的元素提供滚动内容的方法。这导致了很多网页使用 position:absolute 无法固定页头页尾，并对内容进行滚动的方式。”
• iScroll实践指南(上) http://qbaty.iteye.com/blog/1221061
• iScroll 4使用心得 http://www.mansonchor.com/blog/blog_detail_64.html
  
• 《天生我才很有用——iscroll的那些事》http://www.wybai.net/post/2011-10-08/20461143
• 《QQ邮箱iPhone版 — 混搭式开发的尝试》http://blog.cnbang.net/tech/1715/
• "High PerformanceMobile" http://www.infoq.com/presentations/High-Performance-Mobile
• "Fast Mobile UIs" http://www.infoq.com/presentations/Fast-Mobile-UIs