YUI 3.x 简介拔赤

bachi@taobao.com

http://www.uedagazine.com2010-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中的杂项

• YUI 2.x的发展•

YUI 3.x初探

•

YUI 3.x新手入门•

Node & NodeList

•

YUI 3.x中的OO•

YUI 3.x中的杂项

库时代…

2005 -

prototype,dojo2006 -

jquery,yui,mootools

2007 -

ext2008 -

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 pr12008/12/9 YUI3 pr22009/6/24 YUI3 beta12009/9/26 YUI3 12010 …

增强的YUI

1，加强工具集（强化了的工具集）

2，彻底的模块化设计（模块间的解耦）

3，YUI组件模板（规格统一的组件模型）

4，更简洁的语法（书写阅读更流畅）

5，更完整的底层机制（AOP、CustomEvent、Plugin）

YUI 2.x 的书写风格

YUI 3.x的书写风格

YUI 3.x 架构

•

Seed•

Core

•

Component Framework•

Component

•

Widgets

Seed

种子

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

Core

库核心

包含Dom，Event和新 的Node

Component Framework

组件框架

开发widgets的基本框架

Component

工具、控制

包含工具、特效、 控制项

•

YUI

2.x的发展•

YUI 3.x初探

• YUI 3.x新手入门•

Node & NodeList

•

YUI 3.x中的OO•

YUI 3.x中的杂项

观念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作为全局变量，只能有一个，很容易

被修改

•

YUI 3.x–

YUI()

闭包中的Y是一个全新的实例

YAHOO.widget.Editor

= DoSth;//开发者A写的...YAHOO.widget.Editor

= DoNoth;//开发者B写的

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可以框架住任何库

•

YUI 2.x的发展•

YUI 3.x初探

•

YUI 3.x新手入门

• Node & NodeList•

YUI 3.x中的OO

•

YUI 3.x中的杂项

Selector

•

YUI 2.x

•

YUI 3.xvar

items = Y.all('#foo

li.selected');

var

D = YAHOO.util.Dom;var

el = D.get('foo');

var

items =  D.getElementsByClassName('selected','li',el);

对Dom的Wrap•

YUI 2.x 用DOM取到的依然是TMLElement

•

YUI 3.x

var

D = YAHOO.util.Dom;var

el = D.get('foo');

alert(el.nodeName);

var

el = Y.one('#foo');alert(el.nodeName);//undefinedalert(el.get('NodeName'));//DIVs

封装前后的比较

appendChild()removeChild()parentNode

contains()insertBefore()children

addClass()toggleClass()region

appendChild()removeChild()parentNode

contains()insertBefore()children

YUI Node HTMLElement

统一的接口

•

Node–

addClass方法

•

NodeList–

addClass方法

var

el = Y.one('#foo')el.addClass('red');

var

items = Y.all('#foo

li');items.addClass('red');

Event•

事件绑定方法1

•

事件绑定方法2

Y.on('click',function(e){//处理事件

},'#foo');

var

el = Y.one('#foo');el.on('click',function(e){

//处理事件});

Event - 被封装后的“事件”

•

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

被封装后的“事件”

•

YUI 2.x

•

YUI 3.x

var

E = YAHOO.util.Event;E.on('foo','click',function(e){

alert(e);//clickE.stopEvent(e);//阻止冒泡

});

Y.on('click',function(e){alert(e.type);//undefinede.halt();//阻止冒泡

},'#foo');

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){//..

});

•

YUI 2.x的发展•

YUI 3.x初探

•

YUI 3.x新手入门•

Node & NodeList

• YUI 3.x中的OO•

YUI 3.x中的杂项

YUI 3.x中的OO•

对象–

Y.clone（克隆）

–

Y.merge（合并）–

Y.aggregate（挂载）

•

函数–

Y.augment（扩充类）

–

Y.extend（继承）–

Y.bind（绑定上下文）

•

基础–

Y.mix（混淆）

•

YUI 2.x的发展•

YUI 3.x初探

•

YUI 3.x新手入门•

Node & NodeList

•

YUI 3.x中的OO

• YUI 3.x中的杂项

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、

Selector3，易用性

和 专业性之间的权衡

Q & A