1. YUI 3.x 简介
拔赤 bachi@taobao.com
http://www.uedagazine.com
2010-06-03

2. YUI 体系
YUI 2.x YUI 3.x
YUI Compressor Combo Handler
YUI PHP Loader YUI Builder
YUI Test Yslow

3. http://developer.yahoo.com/yui/3/

4. YUI 2.x的发展
YUI 3.x初探
YUI 3.x新手入门
Node & NodeList
YUI 3.x中的OO
YUI 3.x中的杂项

5. YUI 2.x的发展
YUI 3.x初探
YUI 3.x新手入门
Node & NodeList
YUI 3.x中的OO
YUI 3.x中的杂项

6. 库时代…
2005 - prototype,dojo
2006 - jquery,yui,mootools
2007 - ext
2008 - QooXDoo
2009 - …

7. “库”所作的事情
1，初级封装（Dom，Event，Ajax）
2，中级封装（拖拽、动画）
3，高级封装（widget）（日历，Treeview）
4，扩展性（OOP,Plugin。。。）

8. YUI 2.x的发展
2006/2/13 YUI beta(0.10.0)
～
2009/9/14 YUI 2.8.0

9. YUI 2.x 的特色
1，完整的工具集（使用方便）
2，颗粒化设计（团队开发）
3，强沙箱（不仅仅是闭包）
4，yui combo（性能提升）

10. YUI 2.x的发展
YUI 3.x初探
YUI 3.x新手入门
Node & NodeList
YUI 3.x中的OO
YUI 3.x中的杂项

11. 对YUI的一次彻底重构
YUI3.x的架构

12. YUI 3.x的发展
2008/8/13 YUI3 pr1
2008/12/9 YUI3 pr2
2009/6/24 YUI3 beta1
2009/9/26 YUI3 1
2010 …

13. 增强的YUI
1，加强工具集（强化了的工具集）
2，彻底的模块化设计（模块间的解耦）
3，YUI组件模板（规格统一的组件模型）
4，更简洁的语法（书写阅读更流畅）
5，更完整的底层机制（AOP、CustomEvent、Plugin）

14. YUI 2.x 的书写风格

15. YUI 3.x的书写风格

16. YUI 3.x 架构
Seed
Core
Component Framework
Component
Widgets

17. Seed
种子
开发者只需要加载种子就
可以获得YUI的所有组件

18. Core
库核心
包含Dom，Event和新的
Node

19. Component Framework
组件框架
开发widgets的基本框架

20. Component
工具、控制
包含工具、特效、控
制项

21. YUI 2.x的发展
YUI 3.x初探
YUI 3.x新手入门
Node & NodeList
YUI 3.x中的OO
YUI 3.x中的杂项

22. 观念1
使用YUI3.x有两种方法
用Seed加载
用传统的Script引用法

23. Seed方法
<script src="yui/3.0.0/build/yui/yui-min.js"></script>
<script>
YUI().use('node',function(Y){
/*
Y就是这个Scope中
的YUI实例，可以通过Y来
获取相关方法
*/
Y.get('#demo');
});
</script>

24. 传统Script方法
http://developer.yahoo.com/yui/3/configurator/

25. 观念2
YUI3.x是Instance-based
每个Instance都是相互独立
且互不干扰的

26. Instace-based - 可实例化
YUI 2.x
YAHOO作为全局变量，只能有一个，很容易
被修改
YAHOO.widget.Editor = DoSth;//开发者A写的
...
YAHOO.widget.Editor = DoNoth;//开发者B写的
YUI 3.x
YUI() 闭包中的Y是一个全新的实例
YUI().use('editor',function(Y){
Y.Editor = DoSth;//开发者A写的
});
YUI().use('rich-editor',function(Y){
Y.Editor = DoNoth;//开发者B写的
});

27. 同一个页面中多个App的实现
http://my.yahoo.com/

28. 同一个页面中多个App的实现
http://xiaoshuo.taobao.com/

29. Instace-based 的优势
1，一个页面上有多个程序
2，每个Scope有自己的YUI Instance，只带有
所需的组件
3，每个Instance相互独立，方便多人开发
4，Sandbox可以提供安全的闭包
5，每个Instance的YUI3.x的版本可以不同

30. 观念3
YUI可以被用作构造器
轻易变身

31. YUI构造器
推荐的写法
YUI().use('node',function(Y){
//..
});
也可以这样写
var QQ = YUI();//生成一个新的YUI实例
QQ.use('node',function(Q){
//..
});

32. 观念4
YUI3.x可以将任意库框架进来
YUI3.x是框架，非库

33. YUI3.x可以将任意库框架进来
YUI({
modules:{
jquery:{
fullpath:'jquery.js'
}
}
}).use('jquery',function(Y){
$('#foo').toggle('myClass');
});

34. YUI3.x的四大观念
1，两种引入方式
2，每个Scope中有独立的实例
3，YUI的两种构造风格
5，YUI3.x可以框架住任何库

35. YUI 2.x的发展
YUI 3.x初探
YUI 3.x新手入门
Node & NodeList
YUI 3.x中的OO
YUI 3.x中的杂项

36. Selector
YUI 2.x
var D = YAHOO.util.Dom;
var el = D.get('foo');
var items = D.getElementsByClassName('selected','li',
el);
YUI 3.x
var items = Y.all('#foo li.selected');

37. 对Dom的Wrap
YUI 2.x 用DOM取到的依然是TMLElement
var D = YAHOO.util.Dom;
var el = D.get('foo');
alert(el.nodeName);
YUI 3.x
var el = Y.one('#foo');
alert(el.nodeName);//undefined
alert(el.get('NodeName'));//DIVs

38. 封装前后的比较
YUI Node HTMLElement
appendChild() appendChild()
removeChild() removeChild()
parentNode parentNode
contains() contains()
insertBefore() insertBefore()
children children
addClass()
toggleClass()
region

39. 统一的接口
Node
addClass方法
var el = Y.one('#foo')
el.addClass('red');
NodeList
addClass方法
var items = Y.all('#foo li');
items.addClass('red');

40. Event
事件绑定方法1
Y.on('click',function(e){
//处理事件
},'#foo');
事件绑定方法2
var el = Y.one('#foo');
el.on('click',function(e){
//处理事件
});

41. Event - 被封装后的“事件”
YUI3.x对事件做了封装，而非单纯的DOM
Event

42. 被封装后的“事件”
YUI 2.x
var E = YAHOO.util.Event;
E.on('foo','click',function(e){
alert(e);//click
E.stopEvent(e);//阻止冒泡
});
YUI 3.x
Y.on('click',function(e){
alert(e.type);//undefined
e.halt();//阻止冒泡
},'#foo');

43. YUI3的所有事件都是CustomEvent
YUI 3.x
var el = Y.one('#foo');
el.on('click',function(e){
//..
});
var p = new Y.Calendar('#calendar');
p.on('range_select',function(e){
//..
});

44. YUI 2.x的发展
YUI 3.x初探
YUI 3.x新手入门
Node & NodeList
YUI 3.x中的OO
YUI 3.x中的杂项

45. YUI 3.x中的OO
对象
Y.clone（克隆）
Y.merge（合并）
Y.aggregate（挂载）
函数
Y.augment（扩充
类）
Y.extend（继承）
Y.bind（绑定上下
文）
基础

46. YUI 2.x的发展
YUI 3.x初探
YUI 3.x新手入门
Node & NodeList
YUI 3.x中的OO
YUI 3.x中的杂项

47. YUI 3.x中的杂项
Debug
IO
Queue

48. Debug
YUI 2.x
alert()
YAHOO.log()
console.log()
YAHOO.dump()
YUI 3.x
Y.log()
Y.dump()

49. IO & Queue
IO
YUI2.x的Connection，增加了flash跨域
Queue
异步队列

50. YUI 3.x的设计线索
1，YUI2.x 分散式架构、初学者理解困难
2，YUI3.x 内建YUI2.x的Loader、Element、
Selector
3，易用性 和 专业性之间的权衡

51. Q&A