john resig beijing 2010 (中文版)

State of jQuery

John Resig

项目状态

新版发布

• jQuery 1.4.3 / jQuery 1.4.4

• 官方插件• jQuery Templating

• jQuery Data Linking

• jQuery移动版

jQuery 1.4.3

• JSLint

• 模块化• CSS

• 遍历性能• HTML5 数据

JSLint

• 老道（Douglas Crockford）制作的JS工具• 提供基本的JavaScript正确性检查• 随着代码提交越来越多，JSLint帮助我们强调基本的代码规范

• 完全集成进我们的开发工作流：make lint

模块性

• 现在所有的jQuery模块可以被单独加载• 可以使用Script Loader分别加载每一个文件

• 允许我们避免在构建jQuery的时候运行整个测试套件

CSS

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

0

100

200

300

400

Firefox 3.6Firefox 4b7 Chrome Safari 5 Opera 10.6 IE 6 IE 7 IE 8 IE 9b1.4.3 1.4.2

jQuery 1.4.3 .css() Get(Time in milliseconds - lower is better)

遍历性能

0

1000

2000

3000

4000

Firefox 3.6 Firefox 4b7 Chrome Safari 5 IE 9b1.4.3 1.4.2

jQuery1.4.3 .closest()(Time in milliseconds - lower is better)

0

100

200

300

400

Firefox 3.6 Firefox 4b7 Chrome Safari 5 IE 9b1.4.3 1.4.2

jQuery1.4.3 .filter() Single(Time in milliseconds - lower is better)

0

750

1500

2250

3000

Firefox 3.6 Firefox 4b7 Chrome Safari 5 Opera 10.6 IE 8 IE 9b1.4.3 1.4.2

jQuery1.4.3 Elem .find()(Time in milliseconds - lower is better)

HTML5 数据

• HTML5包含了叫做data-属性的概念• <div data-role=”page”></div>• 可以给他们起任何的名字，不用担心，您的页面会正确的

• 在1.4.3中添加了支持

data- 属性

• 例如：• <div data-role=”page”></div>

• $(“div”).data(“role”) === “page”

data- 属性

• 同样支持JSON编码

• 例如：• <div data-hidden=”true”></div>

• $(“div”).data(“hidden”) === true

jQuery 1.4.4

• 搞定了一些Bug

• 添加了几个特性：• .fadeToggle()• 大块 .data 数据属性导入

大块 .data() 导入

• <div data-role=”page” data-max=”3”></div>

• $(“div”).data() --> • { role: “page”, max: 3 }

数据连接

• 通过JavaScript对象实时同步表单• 极大的简化了从表单提取数据和更新表单的过程

• 又一个同微软开发者联合开发的插件• http://github.com/jquery/jquery-datalink

模板• 全新的官方模板插件• 提供简单方法可以把数据加入到HTML语句中

• 同微软开发人员联合开发• http://github.com/jquery/jquery-tmpl

jQuery移动版

“最近，我开始研究并尝试搞懂移动的意思。”

在2009年开始准备（制作TestSwarm过程中）。

跨浏览器的移动网页开发很疯狂！

（…不过要比以前好太多了。）

简单的目标

• 从简单的目标开始：• 保证jQuery能够在大多数流行的移动平台和浏览器上工作

• 结果表明，还是很难定义这个问题的范畴

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

• 为了回答这些问题，我们需要数据

最好的统计数据？• 谁拥有移动市场上最好的统计数据？• StatCounter和Gartner好像是最牛的• StatCounter每个月覆盖十亿次hits

• Garnter值得尊敬，同时了解销售信息• AdMob对于特定的平台很牛（iPhone、

Android）• 也就是说：非常少真正有用的信息泄漏出来

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

平台

平台销量

难题

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

浏览器

难题

• 这些浏览器的哪些版本是流行的？• 还是好像没有人知道，或者讨论他

• 貌似Yahoo很快会发布一些信息• 现在看来不公开这些数据是一个竞争优势

测试策略

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

画线

• Yahoo的分级浏览器支持技术是很理想的• 定义哪些浏览器是你想要支持的（经常测试使用的），然后给他们定个级别

• A = 全面支持，C = 回退旧版站点，Other = 假设全面支持

Mobile Graded Browser Support: Market share + Browser quality

Text

测试浏览器• 两个选项：

• 买设备，或者• 下载模拟器

• 对于大多数自动测试，模拟器是不错的选择• 任何交互类的测试，都希望在物理设备上测试

• 发布之前，在物理设备上进行检查是必要的

模拟器• 大多数平台和浏览器都提供了模拟器• 大多数模拟器需要Windows平台（有一些需要Perl或者Java）

• 有的浏览器还提供了单独的可运行程序（Opera、Fennec）

• 让模拟器运行起来有时候也不容易

自动测试• 一旦有了模拟器（或者物理设备）运行起来，就不太想同他们交互了

• 测试自动运行非常的重要• TestSwarm就是为了这个目标构建的：很容易的让大量的客户端进行测试（包括移动版）

缺口• 几乎所有的移动互联网开发者都关注在现代

Webkit上• 其实，还有很多其他的平台

• 黑莓、Opera、Windows Mobile、火狐移动版、Symbian等等

• jQuery移动版需要兼容所有平台——不损失任何体验

阶段 I：jQuery核心• 我们正在致力于让jQuery核心能够在所有流行移动版浏览器上工作

• 构建我们的测试套件和持续集成测试• 使用TestSwarm来自动化我们的测试，包括所有平台

• 解决jQuery核心的Bug

阶段 II：jQuery移动版

• 一个完整的能够用来构建移动版网站和应用的框架

• 提供所有构建移动站点中需要的widgets

和布局组件• 构建过程依据阶段性增强的原则

问题

• jQuery移动版同jQTouch或者Sencha

Touch比较如何？• jQuery移动版强调渐进增强• 支持更多设备• 文件更小（13KB）

更多信息

• 下一步：了解更多关于jQuery移动的信息！

• 更多信息：• http://blog.jquery.com/• http://jquerymobile.com/

最新

• HTML 5• Video• Audio

• CSS 3• WebGL