Your SlideShare is downloading. ×
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
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,926

Published on

Published in: Technology
2 Comments
11 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,926
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

×