1. State of jQuery
John Resig

2. 项目状态

5. 新版发布
• jQuery 1.4.3 / jQuery 1.4.4
• 官方插件
• jQuery Templating
• jQuery Data Linking
• jQuery移动版

6. jQuery 1.4.3
• JSLint
• 模块化
• CSS
• 遍历性能
• HTML5 数据

7. JSLint
• 老道（Douglas Crockford）制作的JS工具
• 提供基本的JavaScript正 性检查
• 随着代码提交越来越多，JSLint帮助我们
强调基本的代码规范
• 完全集成进我们的 发工作流：make lint

8. 模块性
• 现在所有的jQuery模块可以被单独加载
• 可以使用Script Loader分 加载每一个文
件
• 允许我们避免在构建jQuery的时候运行
整个测试套件

9. CSS
• CSS模块大量的重构
• 注扩展性
• 同时 注性能！
• 已经在使用的插件：jQuery Rotate

11. 0
100
200
300
400
Firefox 3.6Firefox 4b7 Chrome Safari 5 Opera 10.6 IE 6 IE 7 IE 8 IE 9b
1.4.3 1.4.2
jQuery 1.4.3 .css() Get(Time in milliseconds - lower is better)

12. 遍历性能

13. 0
1000
2000
3000
4000
Firefox 3.6 Firefox 4b7 Chrome Safari 5 IE 9b
1.4.3 1.4.2
jQuery1.4.3 .closest()(Time in milliseconds - lower is better)

14. 0
100
200
300
400
Firefox 3.6 Firefox 4b7 Chrome Safari 5 IE 9b
1.4.3 1.4.2
jQuery1.4.3 .filter() Single(Time in milliseconds - lower is better)

15. 0
750
1500
2250
3000
Firefox 3.6 Firefox 4b7 Chrome Safari 5 Opera 10.6 IE 8 IE 9b
1.4.3 1.4.2
jQuery1.4.3 Elem .find()(Time in milliseconds - lower is better)

16. HTML5 数据
• HTML5包含了叫做data-属性的概念
• <div data-role=”page”></div>
• 可以给他们起任何的名字，不用担心，
的页面会正 的
• 在1.4.3中添加了支持

17. data- 属性
• 例如：
• <div data-role=”page”></div>
• $(“div”).data(“role”) === “page”

18. data- 属性
• 同样支持JSON编码
• 例如：
• <div data-hidden=”true”></div>
• $(“div”).data(“hidden”) === true

19. jQuery 1.4.4
• 定了一些Bug
• 添加了几个特性：
• .fadeToggle()
• 大块 .data 数据属性导入

20. 大块 .data() 导入
• <div data-role=”page” data-max=”3”></
div>
• $(“div”).data() -->
• { role:“page”, max: 3 }

21. 数据连接
• 通过JavaScript对象实时同步表单
• 大的简化了从表单提取数据和更新表
单的过程
• 又一个同微软 发者联合 发的插件
• http://github.com/jquery/jquery-datalink

24. 模板
• 全新的官方模板插件
• 提供简单方法可以把数据加入到HTML语
句中
• 同微软 发人员联合 发
• http://github.com/jquery/jquery-tmpl

27. jQuery移动版

28. “最近，我 始研究并尝
试 懂移动的意思。”
在2009年 始准备（制作TestSwarm过程中）。

29. 跨浏览器的移动网页
发很疯狂！
（…不过要比以前好太多了。）

30. 简单的目标
• 从简单的目标 始：
• 保证jQuery能 在大多数流行的移动
平台和浏览器上工作
• 结果表明，还是很难定义这个问题的范
畴

31. 问题：找到答案的
• 在 始进行移动版 发之前需要回答的三个
问题：
• 流行的平台和浏览器有 些？
• 支持现代脚本语言的浏览器有 些？
• 需要测试使用的设备或者模拟器有 些？
• 为了回答这些问题，我们需要数据

32. 最好的统计数据？
• 谁拥有移动市场上最好的统计数据？
• StatCounter和Gartner好像是最牛的
• StatCounter每个月覆盖十亿次hits
• Garnter值得尊敬，同时了解销售信息
• AdMob对于特定的平台很牛（iPhone、
Android）
• 也就是说：非常少真正有用的信息泄漏出来

33. 缺少信息
• 现在，找到这些信息是个挑战
• 结果就是， 发人员为他能 看到的那
些进行 发

34. 平台

35. 平台销量

36. 难题
• 这些平台的 些版本是流行的？
• 好像没有人知道，或者在讨论

37. 浏览器

38. 难题
• 这些浏览器的 些版本是流行的？
• 还是好像没有人知道，或者讨论他
• 貌似Yahoo很快会发布一些信息
• 现在看来不公 这些数据是一个竞争
优势

39. 测试策略
• 在沙滩上画一条线
• 买设备、下载模拟器
• 自动测试（TestSwarm！）

40. 画线
• Yahoo的分级浏览器支持技术是很理想的
• 定义 些浏览器是你想要支持的（经常
测试使用的），然后给他们定个级
• A = 全面支持，C = 回退旧版站点，
Other = 假设全面支持

42. Mobile Graded Browser Support: Market share + Browser quality
Text

43. 测试浏览器
• 个选项：
• 买设备，或者
• 下载模拟器
• 对于大多数自动测试，模拟器是不错的选择
• 任何交互类的测试，都希望在物理设备上测试
• 发布之前，在物理设备上进行检查是必要的

44. 模拟器
• 大多数平台和浏览器都提供了模拟器
• 大多数模拟器需要Windows平台（有一
些需要Perl或者Java）
• 有的浏览器还提供了单独的可运行程序
（Opera、Fennec）
• 让模拟器运行起来有时候也不容易

45. 自动测试
• 一旦有了模拟器（或者物理设备）运行
起来，就不太想同他们交互了
• 测试自动运行非常的重要
• TestSwarm就是为了这个目标构建的：很
容易的让大量的客户端进行测试（包括
移动版）

46. 缺口
• 几乎所有的移动互联网 发者都 注在现代
Webkit上
• 其实，还有很多其他的平台
• 黑莓、Opera、Windows Mobile、火狐移
动版、Symbian等等
• jQuery移动版需要兼容所有平台——不损失
任何体验

47. 阶段 I：jQuery核心
• 我们正在致力于让jQuery核心能 在所
有流行移动版浏览器上工作
• 构建我们的测试套件和持续集成测试
• 使用TestSwarm来自动化我们的测试，包
括所有平台
• 解决jQuery核心的Bug

48. 阶段 II：jQuery移动版
• 一个完整的能 用来构建移动版网站和
应用的框架
• 提供所有构建移动站点中需要的widgets
和布局组件
• 构建过程依据阶段性增强的原则

49. 问题
• jQuery移动版同jQTouch或者Sencha
Touch比较如何？
• jQuery移动版强调渐进增强
• 支持更多设备
• 文件更小（13KB）

50. 更多信息
• 下一步：了解更多 于jQuery移动的信
息！
• 更多信息：
• http://blog.jquery.com/
• http://jquerymobile.com/

51. 最新
• HTML 5
• Video
• Audio
• CSS 3
• WebGL