Your SlideShare is downloading. ×
John Resig Beijing 2010 (中文版)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

John Resig Beijing 2010 (中文版)

3,920

Published on

Published in: Technology
2 Comments
11 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,920
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
115
Comments
2
Likes
11
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. State of jQuery John Resig
  • 2. 项目状态
  • 3. 新版发布 • jQuery 1.4.3 / jQuery 1.4.4 • 官方插件 • jQuery Templating • jQuery Data Linking • jQuery移动版
  • 4. jQuery 1.4.3 • JSLint • 模块化 • CSS • 遍历性能 • HTML5 数据
  • 5. JSLint • 老道(Douglas Crockford)制作的JS工具 • 提供基本的JavaScript正 性检查 • 随着代码提交越来越多,JSLint帮助我们 强调基本的代码规范 • 完全集成进我们的 发工作流:make lint
  • 6. 模块性 • 现在所有的jQuery模块可以被单独加载 • 可以使用Script Loader分 加载每一个文 件 • 允许我们避免在构建jQuery的时候运行 整个测试套件
  • 7. CSS • CSS模块大量的重构 • 注扩展性 • 同时 注性能! • 已经在使用的插件:jQuery Rotate
  • 8. 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)
  • 9. 遍历性能
  • 10. 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)
  • 11. 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)
  • 12. 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)
  • 13. HTML5 数据 • HTML5包含了叫做data-属性的概念 • <div data-role=”page”></div> • 可以给他们起任何的名字,不用担心, 的页面会正 的 • 在1.4.3中添加了支持
  • 14. data- 属性 • 例如: • <div data-role=”page”></div> • $(“div”).data(“role”) === “page”
  • 15. data- 属性 • 同样支持JSON编码 • 例如: • <div data-hidden=”true”></div> • $(“div”).data(“hidden”) === true
  • 16. jQuery 1.4.4 • 定了一些Bug • 添加了几个特性: • .fadeToggle() • 大块 .data 数据属性导入
  • 17. 大块 .data() 导入 • <div data-role=”page” data-max=”3”></ div> • $(“div”).data() --> • { role:“page”, max: 3 }
  • 18. 数据连接 • 通过JavaScript对象实时同步表单 • 大的简化了从表单提取数据和更新表 单的过程 • 又一个同微软 发者联合 发的插件 • http://github.com/jquery/jquery-datalink
  • 19. 模板 • 全新的官方模板插件 • 提供简单方法可以把数据加入到HTML语 句中 • 同微软 发人员联合 发 • http://github.com/jquery/jquery-tmpl
  • 20. jQuery移动版
  • 21. “最近,我 始研究并尝 试 懂移动的意思。” 在2009年 始准备(制作TestSwarm过程中)。
  • 22. 跨浏览器的移动网页 发很疯狂! (…不过要比以前好太多了。)
  • 23. 简单的目标 • 从简单的目标 始: • 保证jQuery能 在大多数流行的移动 平台和浏览器上工作 • 结果表明,还是很难定义这个问题的范 畴
  • 24. 问题:找到答案的 • 在 始进行移动版 发之前需要回答的三个 问题: • 流行的平台和浏览器有 些? • 支持现代脚本语言的浏览器有 些? • 需要测试使用的设备或者模拟器有 些? • 为了回答这些问题,我们需要数据
  • 25. 最好的统计数据? • 谁拥有移动市场上最好的统计数据? • StatCounter和Gartner好像是最牛的 • StatCounter每个月覆盖十亿次hits • Garnter值得尊敬,同时了解销售信息 • AdMob对于特定的平台很牛(iPhone、 Android) • 也就是说:非常少真正有用的信息泄漏出来
  • 26. 缺少信息 • 现在,找到这些信息是个挑战 • 结果就是, 发人员为他能 看到的那 些进行 发
  • 27. 平台
  • 28. 平台销量
  • 29. 难题 • 这些平台的 些版本是流行的? • 好像没有人知道,或者在讨论
  • 30. 浏览器
  • 31. 难题 • 这些浏览器的 些版本是流行的? • 还是好像没有人知道,或者讨论他 • 貌似Yahoo很快会发布一些信息 • 现在看来不公 这些数据是一个竞争 优势
  • 32. 测试策略 • 在沙滩上画一条线 • 买设备、下载模拟器 • 自动测试(TestSwarm!)
  • 33. 画线 • Yahoo的分级浏览器支持技术是很理想的 • 定义 些浏览器是你想要支持的(经常 测试使用的),然后给他们定个级 • A = 全面支持,C = 回退旧版站点, Other = 假设全面支持
  • 34. Mobile Graded Browser Support: Market share + Browser quality Text
  • 35. 测试浏览器 • 个选项: • 买设备,或者 • 下载模拟器 • 对于大多数自动测试,模拟器是不错的选择 • 任何交互类的测试,都希望在物理设备上测试 • 发布之前,在物理设备上进行检查是必要的
  • 36. 模拟器 • 大多数平台和浏览器都提供了模拟器 • 大多数模拟器需要Windows平台(有一 些需要Perl或者Java) • 有的浏览器还提供了单独的可运行程序 (Opera、Fennec) • 让模拟器运行起来有时候也不容易
  • 37. 自动测试 • 一旦有了模拟器(或者物理设备)运行 起来,就不太想同他们交互了 • 测试自动运行非常的重要 • TestSwarm就是为了这个目标构建的:很 容易的让大量的客户端进行测试(包括 移动版)
  • 38. 缺口 • 几乎所有的移动互联网 发者都 注在现代 Webkit上 • 其实,还有很多其他的平台 • 黑莓、Opera、Windows Mobile、火狐移 动版、Symbian等等 • jQuery移动版需要兼容所有平台——不损失 任何体验
  • 39. 阶段 I:jQuery核心 • 我们正在致力于让jQuery核心能 在所 有流行移动版浏览器上工作 • 构建我们的测试套件和持续集成测试 • 使用TestSwarm来自动化我们的测试,包 括所有平台 • 解决jQuery核心的Bug
  • 40. 阶段 II:jQuery移动版 • 一个完整的能 用来构建移动版网站和 应用的框架 • 提供所有构建移动站点中需要的widgets 和布局组件 • 构建过程依据阶段性增强的原则
  • 41. 问题 • jQuery移动版同jQTouch或者Sencha Touch比较如何? • jQuery移动版强调渐进增强 • 支持更多设备 • 文件更小(13KB)
  • 42. 更多信息 • 下一步:了解更多 于jQuery移动的信 息! • 更多信息: • http://blog.jquery.com/ • http://jquerymobile.com/
  • 43. 最新 • HTML 5 • Video • Audio • CSS 3 • WebGL

×