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

简介: 通过修改 Chrome 浏览器的 UserAgent,可以顺利浏览百度应用的页面 http://m.baidu.com/ios,其主要使用了两个 JS 开源库:1、底层库:Zepto.js(http://zeptojs.com/)底层库一般都是围绕语言增强、事件封装、DOM 操控、模板与 AJAX 等的基础设施。

通过修改 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)

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

目录
相关文章
|
3月前
|
前端开发 安全 Go
无法通过 iframe 将百度首页嵌入到自己的前端应用里
无法通过 iframe 将百度首页嵌入到自己的前端应用里
303 0
|
10月前
|
前端开发 JavaScript 数据管理
百度地图开发:自定义区划管理php后台数据管理的解决方案(layUI前端)
百度地图开发:自定义区划管理php后台数据管理的解决方案(layUI前端)
86 0
|
缓存 前端开发 JavaScript
金三银四百度前端实习面经
金三银四百度前端实习面经
|
缓存 前端开发 JavaScript
FIS —— 百度开源的前端集成解决方案
FIS是百度开源的前端集成解决方案,这是团队和百度众多产品线共同探索出一套前端集成解决方案。解决了前端生成中前端静态资源加载优化、页面运行性能优化、基础编译工具、运行环境模拟、js|css组件化开发等心问题。
535 0
FIS —— 百度开源的前端集成解决方案
|
JavaScript 前端开发 测试技术
百度JavaScript项目tangram开源 促进国内前端开发水平提升
日前,百度JavaScript开发框架tangram宣布对第三方开发者开源,并推出网站tangram.baidu.com。据悉,这是百度前端第一次对外开放源代码。业内人士认为,此举将推动国内JavaScript技术的研究和交流,为广大前端开发人员提供更符合本土的选择和代码参考,对国内前端开发整体水平的提升带来重大意义。
1232 0
|
Web App开发 前端开发 UED
|
Web App开发 JSON JavaScript
百度前端学院js课堂作业合集+分析(更新中...)
第一课:简陋的登录框 1 DOCTYPE html> 2 3 4 5 js课程第一课 6 7 body{padding: 20px;font:16px "微软雅黑";} 8 h3{text-align: cent...
1058 0