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