Yui3 初探

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

YUI 体系
YUI 2.x YUI 3.x

YUI Compressor Combo Handler

YUI PHP Loader YUI Builder

YUI Test Yslow

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

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

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

“库”所作的事情

1，初级封装（Dom，Event，Ajax）
2，中级封装（拖拽、动画）
3，高级封装（widget）（日历，Treeview）
4，扩展性（OOP,Plugin。。。）

YUI 2.x的发展

2006/2/13 YUI beta(0.10.0)
～
2009/9/14 YUI 2.8.0

YUI 2.x 的特色

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

YUI 2.x的发展

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

对YUI的一次彻底重构

YUI3.x的架构

YUI 3.x的发展

2008/8/13 YUI3 pr1
2008/12/9 YUI3 pr2
2009/6/24 YUI3 beta1
2009/9/26 YUI3 1
2010 …

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

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

Seed

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

Core

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

Component Framework

组件框架
开发widgets的基本框架

Component

工具、控制
包含工具、特效、控
制项

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

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>

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

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

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写的
});

同一个页面中多个App的实现

http://my.yahoo.com/

同一个页面中多个App的实现

http://xiaoshuo.taobao.com/

Instace-based 的优势

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

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

YUI构造器
推荐的写法
YUI().use('node',function(Y){
//..
});

也可以这样写

var QQ = YUI();//生成一个新的YUI实例
QQ.use('node',function(Q){
//..
});

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

YUI3.x可以将任意库框架进来

YUI({
modules:{
jquery:{
fullpath:'jquery.js'
}
}
}).use('jquery',function(Y){
$('#foo').toggle('myClass');
});

YUI3.x的四大观念

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

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');

对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

封装前后的比较
YUI Node HTMLElement

appendChild() appendChild()
removeChild() removeChild()
parentNode parentNode

contains() contains()
insertBefore() insertBefore()
children children

addClass()
toggleClass()
region

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

NodeList
addClass方法
var items = Y.all('#foo li');
items.addClass('red');

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

事件绑定方法2
el.on('click',function(e){
//处理事件
});

Event - 被封装后的“事件”

YUI3.x对事件做了封装，而非单纯的DOM
Event

被封装后的“事件”
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');

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

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

YUI 3.x中的杂项
Debug
IO
Queue

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

YUI 3.x
Y.log()
Y.dump()

IO & Queue

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

YUI 3.x的设计线索

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

Yui3 初探

More Related Content

Similar to Yui3 初探

More from isnull

Yui3 初探