YUI 3.x 介紹

218
YUI 3.0 PR1 不斷進步的 Yahoo! 使用者函式庫 蔣定宇, YDN 創新科技推廣工程師

description

 

Transcript of YUI 3.x 介紹

Page 1: YUI 3.x 介紹

YUI 3.0 PR1不斷進步的 Yahoo! 使用者函式庫

蔣定宇, YDN 創新科技推廣工程師

Page 2: YUI 3.x 介紹
Page 3: YUI 3.x 介紹

The YUI Library:3.0 PR1http://developer.yahoo.com/yui/3

Page 4: YUI 3.x 介紹
Page 5: YUI 3.x 介紹

Pow

ered

by

YU

I 3.

0 P

R1:

Page 6: YUI 3.x 介紹
Page 7: YUI 3.x 介紹

今日的 YUI 使用者函式庫停下看看 2.x 的發展

Page 8: YUI 3.x 介紹

在瀏覽器上建立使用者 UI(控制項)傳統內建 UI 使用 YUI 所建立的 UI

Page 9: YUI 3.x 介紹

在瀏覽器上建立使用者 UI(控制項)

Def. But.Button

Label Menu

Label Text Field

Label

Label

Text Area

click me

傳統內建 UI 使用 YUI 所建立的 UI

Page 10: YUI 3.x 介紹

在瀏覽器上建立使用者 UI(控制項)

Def. But.Button

Label Menu

Label Text Field

Label

Label

Text Area

click me

傳統內建 UI 使用 YUI 所建立的 UI

Page 11: YUI 3.x 介紹

在瀏覽器上建立使用者 UI(控制項)

Def. But.Button

Label Menu

Label Text Field

Label

Label

Text Area

click me

傳統內建 UI 使用 YUI 所建立的 UI

Page 12: YUI 3.x 介紹

在瀏覽器上建立使用者 UI(控制項)

Def. But.Button

Label Menu

Label Text Field

Label

Label

Text Area

click me

傳統內建 UI 使用 YUI 所建立的 UI

Page 13: YUI 3.x 介紹

在瀏覽器上建立使用者 UI(控制項)

Def. But.Button

Label Menu

Label Text Field

Label

Label

Text Area

click me

傳統內建 UI 使用 YUI 所建立的 UI

Page 14: YUI 3.x 介紹

在瀏覽器上建立使用者 UI(控制項)

Def. But.Button

Label Menu

Label Text Field

Label

Label

Text Area

click me

傳統內建 UI 使用 YUI 所建立的 UI

Page 15: YUI 3.x 介紹

在瀏覽器上建立使用者 UI(控制項)

Def. But.Button

Label Menu

Label Text Field

Label

Label

Text Area

click me

傳統內建 UI 使用 YUI 所建立的 UI

Page 16: YUI 3.x 介紹

在瀏覽器上建立使用者 UI(控制項)

Def. But.Button

Label Menu

Label Text Field

Label

Label

Text Area

click me

傳統內建 UI 使用 YUI 所建立的 UI

Page 17: YUI 3.x 介紹

在瀏覽器上建立使用者 UI(控制項)

Def. But.Button

Label Menu

Label Text Field

Label

Label

Text Area

click me

傳統內建 UI 使用 YUI 所建立的 UI

Page 18: YUI 3.x 介紹

在瀏覽器上建立使用者 UI(控制項)

Def. But.Button

Label Menu

Label Text Field

Label

Label

Text Area

click me

傳統內建 UI 使用 YUI 所建立的 UI

Page 19: YUI 3.x 介紹

在瀏覽器上建立使用者 UI(控制項)

Def. But.Button

Label Menu

Label Text Field

Label

Label

Text Area

click me

傳統內建 UI 使用 YUI 所建立的 UI

Page 20: YUI 3.x 介紹

在瀏覽器上建立使用者 UI(控制項)

Def. But.Button

Label Menu

Label Text Field

Label

Label

Text Area

click me

傳統內建 UI 使用 YUI 所建立的 UI

Page 21: YUI 3.x 介紹

在瀏覽器上建立使用者 UI(控制項)

Def. But.Button

Label Menu

Label Text Field

Label

Label

Text Area

click me

傳統內建 UI 使用 YUI 所建立的 UI

Page 22: YUI 3.x 介紹

在瀏覽器上建立使用者 UI(控制項)

Def. But.Button

Label Menu

Label Text Field

Label

Label

Text Area

click me

傳統內建 UI 使用 YUI 所建立的 UI

Page 23: YUI 3.x 介紹

在瀏覽器上建立使用者 UI(控制項)

Def. But.Button

Label Menu

Label Text Field

Label

Label

Text Area

click me

傳統內建 UI 使用 YUI 所建立的 UI

Page 24: YUI 3.x 介紹

在瀏覽器上建立使用者 UI(控制項)

Def. But.Button

Label Menu

Label Text Field

Label

Label

Text Area

click me

傳統內建 UI 使用 YUI 所建立的 UI

Page 25: YUI 3.x 介紹

在瀏覽器上建立使用者 UI(控制項)

Def. But.Button

Label Menu

Label Text Field

Label

Label

Text Area

click me

傳統內建 UI 使用 YUI 所建立的 UI

Page 26: YUI 3.x 介紹

YUI 有著最好的瀏覽器支援度

Page 27: YUI 3.x 介紹

即使是 iPhone 上的瀏覽器,YUI 也支援

Page 28: YUI 3.x 介紹

http://blogs.computerworld.com/nytimes_iphone_browser_marketshare

即使是 iPhone 上的瀏覽器,YUI 也支援

Page 29: YUI 3.x 介紹

http://marketshare.hitslink.com/report.aspx?sample=21&qprid=43&qpcustom=Chrome+0.2

Google Chrome 也一視同仁 ;)

Page 30: YUI 3.x 介紹

http://marketshare.hitslink.com/report.aspx?sample=21&qprid=43&qpcustom=Chrome+0.2

Google Chrome 也一視同仁 ;)

Page 31: YUI 3.x 介紹

http://marketshare.hitslink.com/report.aspx?sample=21&qprid=43&qpcustom=Chrome+0.2

Google Chrome 也一視同仁 ;)

Page 32: YUI 3.x 介紹

Button + Menu + Container + ... = RTE Editor

Page 33: YUI 3.x 介紹

結構複雜、但使用起來簡單愉快

Page 34: YUI 3.x 介紹

結構複雜、但使用起來簡單愉快

Page 35: YUI 3.x 介紹

且保證在每個主流瀏覽器都支援

Page 36: YUI 3.x 介紹

且保證在每個主流瀏覽器都支援

Page 37: YUI 3.x 介紹

無障礙網頁(Accessbility)

Page 38: YUI 3.x 介紹

YAHOO Global Object

Dom Collection

Event Utility

YUI JavaScript Core

Animation Utility

Connection Manager

DataSource Utility

Drag & Drop Utility

Element Utility

History Utility

ImageLoader Utility

YUILoader Utility

AutoComplete Control

Button Control

Calendar Control

Color Picker Control

Container Core

Container Family

DataTable Control

Rich Text Editor

Menu Control

Slicer Control

TabView Control

TreeView Control

0KB 15KB 30KB 45KB 60KB

5KB

3KB

3KB

3KB

15KB

15KB

21KB

18KB

16KB

10KB

10KB

10KB

10KB

5KB

13KB

8KB

8KB

8KB

4KB

2KB

2KB

3KB

3KB

3KB

3KB

6KB

6KB

6KB

3KB

4KB

4KB

4KB

4KB

4KB

4KB

4KB

5KB

5KB

5KB

5KB

5KB

5KB

5KB

5KB

5KB

5KB

5KB

5KB

5KB

5KB

4KB

4KB

4KB

4KB

4KB

4KB

4KB

4KB

4KB

4KB

4KB

4KB

2KB

2KB

2KB

2KB

2KB

2KB

2KB

2KB

2KB

2KB

2KB

2KB

2KB

2KB

2KB

YAHOO Global Object Dom Collection Event Utility Animation UtilityConnection Manager DataSource Utility Drag & Drop Utility Element UtilityHistory Utility ImageLoader Utility YUILoader Utility AutoComplete ControlButton Control Calendar Control Color Picker Control Container CoreContainer Family DataTable Control Rich Text Editor Menu ControlSlider Control TabView Control TreeView Control

YUI K-weight on the wire (gzipped) by component, v2.3.0

每個 UI 都是由許多小物件所構成的

Page 39: YUI 3.x 介紹

最多人使用的頁面、都是 YUI

Page 40: YUI 3.x 介紹

首頁 搜尋 Flickr

My 手機搜尋(Yahoo! Go + iPhone)

電影

運動 生活+ Delicious

新聞 地圖 Yahoo Live

理財 知識+ Yahoo Pipes

電子郵件 汽車 無名小站

Metro(新版首頁) 拍賣 搜尋榜

時尚 公益 汽車

最多人使用的頁面、都是 YUI

Page 41: YUI 3.x 介紹

追求專業的大廠牌也都用 YUI

Page 42: YUI 3.x 介紹

追求專業的大廠牌也都用 YUI

Page 43: YUI 3.x 介紹

• 超過 30 種以上的工具 + 控制項• 在 Yahoo! 的頁面已使用 3 年• 約 90 萬的下載量• 1.1 萬的開發者在討論區• 數以千計的其他網站使用• 原始碼品質最佳• 文件最齊全• 最好的支援經驗

Page 44: YUI 3.x 介紹

Thomas Sha, DirectorStrategy and direction; IO (AJAX) utility.

Adam Moore, EngineerCore, Loaders, OOP, Event Utility, Color Picker, TreeView Control, Doc Tool.

Matt Sweeney, ArchitectCSS architect; Animation Utility;Dom Collection; TabView Widget.

Nate Koechley, EngineerGlobal standards,evangelism; CSS Reset, Base, Fonts, & Grids.

Todd Kloots, EngineerMenu Widget, Button Widget, accessibility protagonist.

Jenny Han, EngineerDataSource Utility AutoComplete Widget, DataTable Widget, Evangelism.

Satyen Desai, EngineerTools, Container Family, Calendar Control, 3.x widget framework

George PuckettProgram Manager

Dav Glass, Engineer & hackerRich Text Editor, Layout Manager, Drag and Drop Utility, Resize Utility, ImageCropper Control

Luke Smith, EngineerSlider, Color Picker, Logger, Paginator, ConnectionManager, performance specialist

Page 45: YUI 3.x 介紹
Page 46: YUI 3.x 介紹

Bey

ond

the

YUI T

eam

Major enhancements to TreeView for 2.6.0.

Satyam (Daniel Barreiro)

Page 47: YUI 3.x 介紹

Bey

ond

the

YUI T

eam

Page 48: YUI 3.x 介紹

Bey

ond

the

YUI T

eam

Bubbling library, updates to Layout Manager

Caridy

Page 49: YUI 3.x 介紹

Bey

ond

the

YUI T

eam

Page 50: YUI 3.x 介紹

Bey

ond

the

YUI T

eam

Date functions for 2.6.0

Philip

Page 51: YUI 3.x 介紹

Bey

ond

the

YUI T

eam

http://www.flickr.com/photos/scarls13/2104638757/ photo by Steve Carlson; used by kind permission.

Page 52: YUI 3.x 介紹

Bey

ond

the

YUI T

eam

YUI Cookie, YUI Profiler, YUI Test

Nicholas

http://www.flickr.com/photos/scarls13/2104638757/ photo by Steve Carlson; used by kind permission.

Page 53: YUI 3.x 介紹

Bey

ond

the

YUI T

eam

Page 54: YUI 3.x 介紹

Bey

ond

the

YUI T

eam

Carousel Control for 2.6.0

Gopal

Page 55: YUI 3.x 介紹

Bey

ond

the

YUI T

eam

Page 56: YUI 3.x 介紹

Bey

ond

the

YUI T

eam

Interval Calendar for 2.6.0

John Peloquin

Page 57: YUI 3.x 介紹

Bey

ond

the

YUI T

eam

Page 58: YUI 3.x 介紹

Bey

ond

the

YUI T

eam

AccordionView coming in 2.7.0

Marco

Page 59: YUI 3.x 介紹

Bey

ond

the

YUI T

eam

Page 60: YUI 3.x 介紹

Bey

ond

the

YUI T

eam

Browser History Manager, YUI Compressor

Julien

Page 61: YUI 3.x 介紹

Bey

ond

the

YUI T

eam

Page 62: YUI 3.x 介紹

Bey

ond

the

YUI T

eam

ImageLoader

Matt

Page 63: YUI 3.x 介紹

Wanted!你也可以成為 YUI Contributor

Page 64: YUI 3.x 介紹
Page 65: YUI 3.x 介紹

YUI 3.x繼 YUI 2.x 一次大的結構重整

Page 66: YUI 3.x 介紹

YUI 3.x 的五大目標

Page 67: YUI 3.x 介紹

YUI 3.x 的五大目標

• Lighter:更輕巧

Page 68: YUI 3.x 介紹

YUI 3.x 的五大目標

• Lighter:更輕巧

• Faster:更快速

Page 69: YUI 3.x 介紹

YUI 3.x 的五大目標

• Lighter:更輕巧

• Faster:更快速

• More Consistent:更一致

Page 70: YUI 3.x 介紹

YUI 3.x 的五大目標

• Lighter:更輕巧

• Faster:更快速

• More Consistent:更一致

• More Powerful:更強大

Page 71: YUI 3.x 介紹

YUI 3.x 的五大目標

• Lighter:更輕巧

• Faster:更快速

• More Consistent:更一致

• More Powerful:更強大

• More Securable:更安全

Page 72: YUI 3.x 介紹

core component frameworkseed

YUI

YUI BaseMinimal YUI Global and core library methods. The only universal YUI 3.x dependency.

GetProvides generic mechanism for dynamically loading script and CSS resources.

LoaderAdds dependency calculator and YUI 3.x package metadata, allowing dynamic loading of all YUI modules in single, combo-handled HTTP requests.

Event

Event BaseProvides DOM event and Custom Event functionality, event facade implementation, and page-load storyboarding events.

Node

Node BaseProvides abstraction for creating and manipulating DOM elements. Can be extended by components via plugin architecture.

NodeListExtension of Node to handle abstraction for element collections; used for batching DOM manipulations.

Node StyleExtended API for manipulating style properties on Nodes and NodeLists.

Node ScreenExtends Node and NodeList API for positioning and region management.

Dom

Dom BaseProvides low-level DOM helper methods.

Dom StyleProvides low-level style management methods.

Dom ScreenProvides low-level positioning and region management methods.

SelectorProvides low-level methods for collecting and filtering DOM elements based on selector syntax.

OOP

OOP BaseProvides low-level object management functionality for JavaScript objects including extension and augmentation.

WidgetProvides foundational plumbing for high-level UI components, including lifecycle management. Builds upon base and is an Attribute provider.

BaseProvides base class for all YUI components that provide managed attributes and that serve as event targets.

AttributeProvides managed attribute system that can augment any class; includes get/set interface and intrinsic change events.

PluginPlugin namespace. Forthcoming class will serve as a template for plugin functionality. Plugins can also operate directly on Nodes.

YUI 3.x Architecture (JavaScript)

components

Drag and Drop

DD Manager BaseProvides base DD manager functionality to make a Node draggable.

DDM ShimExtends DD manager to allow elements to be dragged over iframes and other mousetraps.

DD DragProvides DD functionality for simple drag operations on a Node.

DD DropProvides drop-target functionality.

DD ProxyProvides proxy-drag functionality.

DD ConstrainProvides drag constraint functionality.

DD PluginProvides pluggable drag functionality for Node instances.

DD Drop PluginProvides pluggable drop-target functionality for Node instances.

Animation

Anim BaseProvides foundational animation support for animating properties on the style object of an element.

Anim ColorExtends animation functionality to support animations of color values.

Anim CurveExtends animation functionality to support animations of element position along a curved path.

Anim EasingExtends animation functionality to support easing effects.

Anim ScrollExtends animation functionality to support animations of elements' scroll positions.

Anim XYAdds support for the xy property in from and to configurations.

Anim PluginProvides pluggable animation support for Nodes.

IOProvides XMLHttpRequest, SWF-based cross-domain requests, and file upload support.

CookieProvides cookie management support.

JSON

...and moreMore utility (low-level) components are provided in the YUI 3.0 preview release 1 build. Future preview releases and betas will include the full component framework and samples of higher-level components (widgets).

The YUI Seed layer can be used

to bootstrap any implementation.

With the seed on the page,

YUI().use() can bring in all

additional components quickly and

safely.

YUI's 3.x Core serves as a common dependency layer for most

downstream components. Let the YUI Loader (or Dependency

Configurator) calculate your true core dependencies, though; in many

cases, you will not require the full core layer, even if you are using

downstream components.

The Component Framework (not yet complete

as of PR1) will provide a consistent and

reusable structure for building low-level utilities

and higher-level UI widgets.

Components in YUI 3.x are provided a la carte and can be highly modular. You can minimize your

inclusion of library code by selecting the specific portions of each component that are required in your

implementation.

StringifyConvert JavaScript objects to JSON strings.

ParseSafely convert strings to JavaScript objects.

based on YUI 3.0 PR1 2008-09-12

Page 73: YUI 3.x 介紹

core component frameworkseed

YUI

YUI BaseMinimal YUI Global and core library methods. The only universal YUI 3.x dependency.

GetProvides generic mechanism for dynamically loading script and CSS resources.

LoaderAdds dependency calculator and YUI 3.x package metadata, allowing dynamic loading of all YUI modules in single, combo-handled HTTP requests.

Event

Event BaseProvides DOM event and Custom Event functionality, event facade implementation, and page-load storyboarding events.

Node

Node BaseProvides abstraction for creating and manipulating DOM elements. Can be extended by components via plugin architecture.

NodeListExtension of Node to handle abstraction for element collections; used for batching DOM manipulations.

Node StyleExtended API for manipulating style properties on Nodes and NodeLists.

Node ScreenExtends Node and NodeList API for positioning and region management.

Dom

Dom BaseProvides low-level DOM helper methods.

Dom StyleProvides low-level style management methods.

Dom ScreenProvides low-level positioning and region management methods.

SelectorProvides low-level methods for collecting and filtering DOM elements based on selector syntax.

OOP

OOP BaseProvides low-level object management functionality for JavaScript objects including extension and augmentation.

WidgetProvides foundational plumbing for high-level UI components, including lifecycle management. Builds upon base and is an Attribute provider.

BaseProvides base class for all YUI components that provide managed attributes and that serve as event targets.

AttributeProvides managed attribute system that can augment any class; includes get/set interface and intrinsic change events.

PluginPlugin namespace. Forthcoming class will serve as a template for plugin functionality. Plugins can also operate directly on Nodes.

YUI 3.x Architecture (JavaScript)

components

Drag and Drop

DD Manager BaseProvides base DD manager functionality to make a Node draggable.

DDM ShimExtends DD manager to allow elements to be dragged over iframes and other mousetraps.

DD DragProvides DD functionality for simple drag operations on a Node.

DD DropProvides drop-target functionality.

DD ProxyProvides proxy-drag functionality.

DD ConstrainProvides drag constraint functionality.

DD PluginProvides pluggable drag functionality for Node instances.

DD Drop PluginProvides pluggable drop-target functionality for Node instances.

Animation

Anim BaseProvides foundational animation support for animating properties on the style object of an element.

Anim ColorExtends animation functionality to support animations of color values.

Anim CurveExtends animation functionality to support animations of element position along a curved path.

Anim EasingExtends animation functionality to support easing effects.

Anim ScrollExtends animation functionality to support animations of elements' scroll positions.

Anim XYAdds support for the xy property in from and to configurations.

Anim PluginProvides pluggable animation support for Nodes.

IOProvides XMLHttpRequest, SWF-based cross-domain requests, and file upload support.

CookieProvides cookie management support.

JSON

...and moreMore utility (low-level) components are provided in the YUI 3.0 preview release 1 build. Future preview releases and betas will include the full component framework and samples of higher-level components (widgets).

The YUI Seed layer can be used

to bootstrap any implementation.

With the seed on the page,

YUI().use() can bring in all

additional components quickly and

safely.

YUI's 3.x Core serves as a common dependency layer for most

downstream components. Let the YUI Loader (or Dependency

Configurator) calculate your true core dependencies, though; in many

cases, you will not require the full core layer, even if you are using

downstream components.

The Component Framework (not yet complete

as of PR1) will provide a consistent and

reusable structure for building low-level utilities

and higher-level UI widgets.

Components in YUI 3.x are provided a la carte and can be highly modular. You can minimize your

inclusion of library code by selecting the specific portions of each component that are required in your

implementation.

StringifyConvert JavaScript objects to JSON strings.

ParseSafely convert strings to JavaScript objects.

based on YUI 3.0 PR1 2008-09-12

Page 74: YUI 3.x 介紹

core component frameworkseed

YUI

YUI BaseMinimal YUI Global and core library methods. The only universal YUI 3.x dependency.

GetProvides generic mechanism for dynamically loading script and CSS resources.

LoaderAdds dependency calculator and YUI 3.x package metadata, allowing dynamic loading of all YUI modules in single, combo-handled HTTP requests.

Event

Event BaseProvides DOM event and Custom Event functionality, event facade implementation, and page-load storyboarding events.

Node

Node BaseProvides abstraction for creating and manipulating DOM elements. Can be extended by components via plugin architecture.

NodeListExtension of Node to handle abstraction for element collections; used for batching DOM manipulations.

Node StyleExtended API for manipulating style properties on Nodes and NodeLists.

Node ScreenExtends Node and NodeList API for positioning and region management.

Dom

Dom BaseProvides low-level DOM helper methods.

Dom StyleProvides low-level style management methods.

Dom ScreenProvides low-level positioning and region management methods.

SelectorProvides low-level methods for collecting and filtering DOM elements based on selector syntax.

OOP

OOP BaseProvides low-level object management functionality for JavaScript objects including extension and augmentation.

WidgetProvides foundational plumbing for high-level UI components, including lifecycle management. Builds upon base and is an Attribute provider.

BaseProvides base class for all YUI components that provide managed attributes and that serve as event targets.

AttributeProvides managed attribute system that can augment any class; includes get/set interface and intrinsic change events.

PluginPlugin namespace. Forthcoming class will serve as a template for plugin functionality. Plugins can also operate directly on Nodes.

YUI 3.x Architecture (JavaScript)

components

Drag and Drop

DD Manager BaseProvides base DD manager functionality to make a Node draggable.

DDM ShimExtends DD manager to allow elements to be dragged over iframes and other mousetraps.

DD DragProvides DD functionality for simple drag operations on a Node.

DD DropProvides drop-target functionality.

DD ProxyProvides proxy-drag functionality.

DD ConstrainProvides drag constraint functionality.

DD PluginProvides pluggable drag functionality for Node instances.

DD Drop PluginProvides pluggable drop-target functionality for Node instances.

Animation

Anim BaseProvides foundational animation support for animating properties on the style object of an element.

Anim ColorExtends animation functionality to support animations of color values.

Anim CurveExtends animation functionality to support animations of element position along a curved path.

Anim EasingExtends animation functionality to support easing effects.

Anim ScrollExtends animation functionality to support animations of elements' scroll positions.

Anim XYAdds support for the xy property in from and to configurations.

Anim PluginProvides pluggable animation support for Nodes.

IOProvides XMLHttpRequest, SWF-based cross-domain requests, and file upload support.

CookieProvides cookie management support.

JSON

...and moreMore utility (low-level) components are provided in the YUI 3.0 preview release 1 build. Future preview releases and betas will include the full component framework and samples of higher-level components (widgets).

The YUI Seed layer can be used

to bootstrap any implementation.

With the seed on the page,

YUI().use() can bring in all

additional components quickly and

safely.

YUI's 3.x Core serves as a common dependency layer for most

downstream components. Let the YUI Loader (or Dependency

Configurator) calculate your true core dependencies, though; in many

cases, you will not require the full core layer, even if you are using

downstream components.

The Component Framework (not yet complete

as of PR1) will provide a consistent and

reusable structure for building low-level utilities

and higher-level UI widgets.

Components in YUI 3.x are provided a la carte and can be highly modular. You can minimize your

inclusion of library code by selecting the specific portions of each component that are required in your

implementation.

StringifyConvert JavaScript objects to JSON strings.

ParseSafely convert strings to JavaScript objects.

based on YUI 3.0 PR1 2008-09-12

Page 75: YUI 3.x 介紹

core component frameworkseed

YUI

YUI BaseMinimal YUI Global and core library methods. The only universal YUI 3.x dependency.

GetProvides generic mechanism for dynamically loading script and CSS resources.

LoaderAdds dependency calculator and YUI 3.x package metadata, allowing dynamic loading of all YUI modules in single, combo-handled HTTP requests.

Event

Event BaseProvides DOM event and Custom Event functionality, event facade implementation, and page-load storyboarding events.

Node

Node BaseProvides abstraction for creating and manipulating DOM elements. Can be extended by components via plugin architecture.

NodeListExtension of Node to handle abstraction for element collections; used for batching DOM manipulations.

Node StyleExtended API for manipulating style properties on Nodes and NodeLists.

Node ScreenExtends Node and NodeList API for positioning and region management.

Dom

Dom BaseProvides low-level DOM helper methods.

Dom StyleProvides low-level style management methods.

Dom ScreenProvides low-level positioning and region management methods.

SelectorProvides low-level methods for collecting and filtering DOM elements based on selector syntax.

OOP

OOP BaseProvides low-level object management functionality for JavaScript objects including extension and augmentation.

WidgetProvides foundational plumbing for high-level UI components, including lifecycle management. Builds upon base and is an Attribute provider.

BaseProvides base class for all YUI components that provide managed attributes and that serve as event targets.

AttributeProvides managed attribute system that can augment any class; includes get/set interface and intrinsic change events.

PluginPlugin namespace. Forthcoming class will serve as a template for plugin functionality. Plugins can also operate directly on Nodes.

YUI 3.x Architecture (JavaScript)

components

Drag and Drop

DD Manager BaseProvides base DD manager functionality to make a Node draggable.

DDM ShimExtends DD manager to allow elements to be dragged over iframes and other mousetraps.

DD DragProvides DD functionality for simple drag operations on a Node.

DD DropProvides drop-target functionality.

DD ProxyProvides proxy-drag functionality.

DD ConstrainProvides drag constraint functionality.

DD PluginProvides pluggable drag functionality for Node instances.

DD Drop PluginProvides pluggable drop-target functionality for Node instances.

Animation

Anim BaseProvides foundational animation support for animating properties on the style object of an element.

Anim ColorExtends animation functionality to support animations of color values.

Anim CurveExtends animation functionality to support animations of element position along a curved path.

Anim EasingExtends animation functionality to support easing effects.

Anim ScrollExtends animation functionality to support animations of elements' scroll positions.

Anim XYAdds support for the xy property in from and to configurations.

Anim PluginProvides pluggable animation support for Nodes.

IOProvides XMLHttpRequest, SWF-based cross-domain requests, and file upload support.

CookieProvides cookie management support.

JSON

...and moreMore utility (low-level) components are provided in the YUI 3.0 preview release 1 build. Future preview releases and betas will include the full component framework and samples of higher-level components (widgets).

The YUI Seed layer can be used

to bootstrap any implementation.

With the seed on the page,

YUI().use() can bring in all

additional components quickly and

safely.

YUI's 3.x Core serves as a common dependency layer for most

downstream components. Let the YUI Loader (or Dependency

Configurator) calculate your true core dependencies, though; in many

cases, you will not require the full core layer, even if you are using

downstream components.

The Component Framework (not yet complete

as of PR1) will provide a consistent and

reusable structure for building low-level utilities

and higher-level UI widgets.

Components in YUI 3.x are provided a la carte and can be highly modular. You can minimize your

inclusion of library code by selecting the specific portions of each component that are required in your

implementation.

StringifyConvert JavaScript objects to JSON strings.

ParseSafely convert strings to JavaScript objects.

based on YUI 3.0 PR1 2008-09-12

Page 76: YUI 3.x 介紹

YUI 3.x 的整體結構

Page 77: YUI 3.x 介紹

YUI 3.x 的整體結構

• Seed:開發者只要有此種子即可取得 YUI 的所有元件

Page 78: YUI 3.x 介紹

YUI 3.x 的整體結構

• Seed:開發者只要有此種子即可取得 YUI 的所有元件

• Core:函式庫核心,包含 DOM、Event 及新的 Node

Page 79: YUI 3.x 介紹

YUI 3.x 的整體結構

• Seed:開發者只要有此種子即可取得 YUI 的所有元件

• Core:函式庫核心,包含 DOM、Event 及新的 Node

• Component Framework:開發新元件的架構函式庫

Page 80: YUI 3.x 介紹

YUI 3.x 的整體結構

• Seed:開發者只要有此種子即可取得 YUI 的所有元件

• Core:函式庫核心,包含 DOM、Event 及新的 Node

• Component Framework:開發新元件的架構函式庫

• Component:包含工具與控制項

Page 81: YUI 3.x 介紹

新的 YUI 物件

例項化

背景載入

背景合併多隻檔案

多重開發環境Faster Coding / Loading

More Secure

Page 82: YUI 3.x 介紹
Page 83: YUI 3.x 介紹

觀念 1:若需使用 YUI 3.x 的函式庫有兩種方法:

1. 用新的 Seed 方法2. 用傳統 Script 引用法

Page 84: YUI 3.x 介紹
Page 86: YUI 3.x 介紹

YUI Global (7KB, 1 HTTP request)

Page 87: YUI 3.x 介紹

YUI Global (7KB, 1 HTTP request)YUI().use('node', function(Y) { Y.Node.get('#demo');});

Page 88: YUI 3.x 介紹

YUI Global (7KB, 1 HTTP request)YUI().use('node', function(Y) { Y.Node.get('#demo');});

<script src="http://yui.yahooapis.com/3.0.0pr1/build/oop/oop-min.js></script><script src="http://yui.yahooapis.com/3.0.0pr1/build/event/event-min.js></script><script src="http://yui.yahooapis.com/3.0.0pr1/build/dom/dom-min.js></script><script src="http://yui.yahooapis.com/3.0.0pr1/build/node/node-min.js"></script>

Page 89: YUI 3.x 介紹

YUI Global (7KB, 1 HTTP request)YUI().use('node', function(Y) { Y.Node.get('#demo');});<script type="text/javascript" src="http://yui.yahooapis.com/combo?3.0.0pr1/build/oop/oop-min.js&3.0.0pr1/build/event/event-min.js&3.0.0pr1/build/dom/dom-min.js&3.0.0pr1/build/node/node-min.js"></script>

Page 90: YUI 3.x 介紹

YUI Global (7KB, 1 HTTP request)

OOP, Event, Dom, and Node (16KB, 1 HTTP request)

此 YUI Instance 載入完畢後即支援 node 元件與其所需的 Dependent 函式庫

YUI().use('node', function(Y) { /* Y 就是此 Scope 裡的 YUI Instance,我們可以 藉由 Y 來存取相關方法 */ Y.get('#demo');});

Page 91: YUI 3.x 介紹
Page 92: YUI 3.x 介紹

<script type="text/javascript" src="http://yui.yahooapis.com/combo?3.0.0pr1/build/yui-base/yui-base-min.js&3.0.0pr1/build/oop/oop-min.js&3.0.0pr1/build/event/event-min.js&3.0.0pr1/build/dom/dom-min.js&3.0.0pr1/build/node/node-min.js"></script>

Page 93: YUI 3.x 介紹

YUI Base, Dom, Node, Event and OOP (16KB, 1 HTTP request)

此 YUI Instance 載入完畢後即支援 node 元件與其所需的 Dependent 函式庫

YUI().use('node', function(Y) { /* Y 就是此 Scope 裡的 YUI Instance。與前者 不同、這裡會立刻執行、 沒有任何載入時間差。 */ Y.get('#demo');});

Page 94: YUI 3.x 介紹

YUI Configurator

Page 95: YUI 3.x 介紹
Page 96: YUI 3.x 介紹

觀念 2:YUI 3.x 是 Instance-based每個 Instance 都是獨立且互不甘擾的

Page 97: YUI 3.x 介紹

Instance-based:可例項化

Page 98: YUI 3.x 介紹

Instance-based:可例項化YUI 2.xYAHOO 作為全域變數,只能有一個,容易被覆寫YAHOO.widget.HelloWorld = doSomething; // 開發者 1 寫的... YAHOO.widget.HelloWorld = doNothing; // 開發者 2 寫的

Page 99: YUI 3.x 介紹

Instance-based:可例項化YUI 2.xYAHOO 作為全域變數,只能有一個,容易被覆寫YAHOO.widget.HelloWorld = doSomething; // 開發者 1 寫的... YAHOO.widget.HelloWorld = doNothing; // 開發者 2 寫的

YUI 3.xYUI() 可建立起一個全新的例項,不會被覆寫YUI().use(‘node’, function(Y) { // 開發者 1 寫的 Y.HelloWorld = doSomething;};);YUI.use(‘drag’, function(Y) { // 開發者 2 寫的 Y.HelloWorld = doNothing;};);

Page 100: YUI 3.x 介紹
Page 101: YUI 3.x 介紹

1

2 3 4

5

未來 Y 上會有許多不同的 Application

Page 102: YUI 3.x 介紹
Page 103: YUI 3.x 介紹

一頁上有多個程式的概念

Page 104: YUI 3.x 介紹

一頁上有多個程式的概念

每個程式有自己的 YUI Instance:只索取所需的元件

Page 105: YUI 3.x 介紹

一頁上有多個程式的概念

每個程式有自己的 YUI Instance:只索取所需的元件

每個 Instance 可獨立開發多人環境:Sandboxes

Page 106: YUI 3.x 介紹

一頁上有多個程式的概念

每個程式有自己的 YUI Instance:只索取所需的元件

每個 Instance 可獨立開發多人環境:Sandboxes

Sandboxes 可提供 Secure Mashup 的基礎

Page 107: YUI 3.x 介紹

一頁上有多個程式的概念

每個程式有自己的 YUI Instance:只索取所需的元件

每個 Instance 可獨立開發多人環境:Sandboxes

Sandboxes 可提供 Secure Mashup 的基礎 每個 Instance 的 YUI 3.x 版本不同也沒關係

Page 108: YUI 3.x 介紹
Page 109: YUI 3.x 介紹

觀念 3:YUI 是建構式、可產生 YUI 的 Instance

Page 110: YUI 3.x 介紹

YUI 是建構式 Constructor

Page 111: YUI 3.x 介紹

YUI 是建構式 Constructor

推薦的使用方法YUI().use(‘node’, function(Y) { //...};);

Page 112: YUI 3.x 介紹

YUI 是建構式 Constructor

推薦的使用方法YUI().use(‘node’, function(Y) { //...};);

你也可以這樣寫var YAHOO = YUI(); // Factory, 會產生一個新的 InstanceYAHOO.use(‘node’, function(Y) { //...};);

Page 113: YUI 3.x 介紹
Page 114: YUI 3.x 介紹

觀念 4:依照慣例,習慣用 Y 來代表YUI 的例項。與 YUI 2.x 的 YAHOO 相似!

Page 115: YUI 3.x 介紹

習慣用 Y 作為 YUI 的例項

Page 116: YUI 3.x 介紹

習慣用 Y 作為 YUI 的例項

YUI 2.xYAHOO 作為全域變數、沒有例項<script type=”text/javascript” src=”...”></script><script type=”text/javascript”> var oDD = new YAHOO.util.DD(‘foo’);</script>

Page 117: YUI 3.x 介紹

習慣用 Y 作為 YUI 的例項

YUI 2.xYAHOO 作為全域變數、沒有例項<script type=”text/javascript” src=”...”></script><script type=”text/javascript”> var oDD = new YAHOO.util.DD(‘foo’);</script>

YUI 3.x用 Y 來代表 YUI 的例項YUI().use(‘dd-drag’, function(Y) { new Y.DD.Drag(‘#foo’);};);

Page 118: YUI 3.x 介紹
Page 119: YUI 3.x 介紹

觀念 5:YUI 3.x 與 YUI 2.x 可以輕易地放到同一頁、甚至同個 YUI Instance 中!

Page 120: YUI 3.x 介紹
Page 121: YUI 3.x 介紹

var yui2path = ‘http://yui.yahooapis.com/2.5.2/build/’;YUI({ modules: { 'yui2-yde' : { ‘fullpath’: yui2path + ‘yahoo-dom-event/yahoo-dom-event.js’ }, 'yui2-calendar' : { ‘fullpath’ : yui2path + ‘calendar/calendar-min.js’, ‘requires’ : ['yui2-yde', 'yui2-calendarcss'] }, 'yui2-calendarcss' : { ‘fullpath’: yui2path + ‘calendar/assets/skins/sam/calendar.css’, ‘type’: 'css' } }}).use('node’, ‘yui2-calendar’, function(Y) {

// 在這裡可以混雜地使用 YUI 2.x 的日曆控制項與 YUI 3.x 的 Node 功能

});

Page 122: YUI 3.x 介紹
Page 123: YUI 3.x 介紹

core component frameworkseed

YUI

YUI BaseMinimal YUI Global and core library method. The only universal YUI 3.x dependency.

GetProvides generic mechanism for dynamically loading script and CSS resources.

LoaderAdds dependency calculator and YUI 3.x package metadata, allowing dynamic loading of all YUI modules in single, combo-handled HTTP requests.

Event

Event BaseProvides DOM event and Custom Event functionality, event facade implementation, and page-load storyboarding events.

Node

Node BaseProvides abstraction for creating and manipulating DOM elements. Can be extended by components via plugin architecture.

NodeListExtension of Node to handle abstraction for element collections; used for batching DOM manipulations.

Node StyleExtended API for manipulating style properties on Nodes and NodeLists.

Node ScreenExtends Node and NodeList API for positioning and region management.

Dom

Dom BaseProvides low-level DOM helper methods.

Dom StyleProvides low-level style management methods.

Dom ScreenProvides low-level positioning and region management methods.

SelectorProvides low-level methods for collecting and filtering DOM elements based on selector syntax.

OOP

OOP BaseProvides low-level object management functionality for JavaScript objects including extension and augmentation.

WidgetProvides foundational plumbing for high-level UI components, including lifecycle management. Builds upon base and is an Attribute provider.

BaseProvides base class for all YUI components that provide managed attributes and that serve as event targets.

AttributeProvides managed attribute system that can augment any class; includes get/set interface and intrinsic change events.

PluginPlugin namespace. Forthcoming class will serve as a template for plugin functionality. Plugins can also operate directly on Nodes.

YUI 3.x Architecture (JavaScript)

components

Drag and Drop

DD Manager BaseProvides base DD manager functionality to make a Node draggable.

DDM ShimExtends DD manager to allow elements to be dragged over iframes and other mousetraps.

DD DragProvides DD functionality for simple drag operations on a Node.

DD DropProvides drop-target functionality.

DD ProxyProvides proxy-drag functionality.

DD ConstrainProvides drag constraint functionality.

DD PluginProvides pluggable drag functionality for Node instances.

DD Drop PluginProvides pluggable drop-target functionality for Node instances.

Animation

Anim BaseProvides foundational animation support for animating properties on the style object of an element.

Anim ColorExtends animation functionality to support animations of color values.

Anim CurveExtends animation functionality to support animations of element position along a curved path.

Anim EasingExtends animation functionality to support easing effects.

Anim ScrollExtends animation functionality to support animations of elements' scroll positions.

Anim XYAdds support for the xy property in from and to configurations.

Anim PluginProvides pluggable animation support for Nodes.

IOProvides XHR, SWF-based XDR, and file upload support.

CookieProvides cookie management support.

JSONProvides cookie management support.

...and moreMore utility (low-level) components are provided in the YUI 3.0 preview release 1 build. Future preview releases and betas will include the full component framework and samples of higher-level components (widgets).

The YUI Seed layer can be used

to bootstrap any implementation.

With the seed on the page,

YUI().use() can bring in all

additional components quickly and

safely.

YUI's 3.x Core serves as a common dependency layer for most

downstream components. Let the YUI Loader (or Dependency

Configurator) calculate your true core dependencies, though; in many

cases, you will not require the full core layer, even if you are using

downstream components.

The Component Framework (not yet complete

as of PR1) will provide a consistent and

reusable structure for building low-level utilities

and higher-level UI widgets.

Components in YUI 3.x are provided a la carte and can be highly modular. You can minimize your

inclusion of library code by selecting the specific portions of each component that are required in your

implementation.

Page 124: YUI 3.x 介紹

coreseed

YUI

YUI BaseMinimal YUI Global and core library method. The only universal YUI 3.x dependency.

GetProvides generic mechanism for dynamically loading script and CSS resources.

LoaderAdds dependency calculator and YUI 3.x package metadata, allowing dynamic loading of all YUI modules in single, combo-handled HTTP requests.

Event

Event BaseProvides DOM event and Custom Event functionality, event facade implementation, and page-load storyboarding events.

Provides abstraction for creating and manipulating DOM elements. Can be extended by components via plugin architecture.

Extension of Node to handle abstraction for element collections; used for batching DOM manipulations.

Extended manipulating style properties on Nodes and NodeLists.

Extends Node and NodeList API for positioning and region management.

Dom

Dom BaseProvides low-level DOM helper methods.

Dom StyleProvides low-level style management methods.

Dom ScreenProvides low-level positioning and region management methods.

SelectorProvides low-level methods for collecting and filtering

YUI Base:建構式 Get Utility: 載入遠端檔案功能 YUI Loader:載入檔案的組態

Get 與 Loader 都是 2.x 就有了

Page 125: YUI 3.x 介紹

YUI 物件的 5 大概念

Page 126: YUI 3.x 介紹

YUI 物件的 5 大概念

1.兩種引用函式庫的方式

Page 127: YUI 3.x 介紹

YUI 物件的 5 大概念

1.兩種引用函式庫的方式

2.是 Instance-based

Page 128: YUI 3.x 介紹

YUI 物件的 5 大概念

1.兩種引用函式庫的方式

2.是 Instance-based

3. YUI 是建構式

Page 129: YUI 3.x 介紹

YUI 物件的 5 大概念

1.兩種引用函式庫的方式

2.是 Instance-based

3. YUI 是建構式

4.習慣用 Y 來代表 YUI 的例項

Page 130: YUI 3.x 介紹

YUI 物件的 5 大概念

1.兩種引用函式庫的方式

2.是 Instance-based

3. YUI 是建構式

4.習慣用 Y 來代表 YUI 的例項

5. YUI 2.x 與 YUI 3.x 可以一起使用

Page 131: YUI 3.x 介紹

Node & NodeList

封包 DOM + Selector 物件後的抽象層統一存取介面並增加新功能

More ConsistentMore Powerful

Page 132: YUI 3.x 介紹

id

Page 133: YUI 3.x 介紹
Page 134: YUI 3.x 介紹

觀念 1:藉由 Selector 工具,提供了用 CSS Selector 取得 DOM 物件的介面

Page 135: YUI 3.x 介紹

用 CSS Selector 取得物件

Page 136: YUI 3.x 介紹

用 CSS Selector 取得物件

YUI 2.x用 DOM 物件不太方便var $D = YAHOO.util.Dom; // reference cachevar el = $D.get(‘foo’); var items = $D.getElementsByClassName(‘highlighted’, ‘li’, el);

Page 137: YUI 3.x 介紹

用 CSS Selector 取得物件

YUI 2.x用 DOM 物件不太方便var $D = YAHOO.util.Dom; // reference cachevar el = $D.get(‘foo’); var items = $D.getElementsByClassName(‘highlighted’, ‘li’, el);

YUI 3.x一行解決、取得 NodeList 物件var items = Y.all(‘#foo li.highlighted’);

Page 138: YUI 3.x 介紹
Page 139: YUI 3.x 介紹

觀念 2:Node 或 NodeList 會將物件封裝,非原本的 HTMLElement。修復了不一致的問題且增加強

大的功能!

Page 140: YUI 3.x 介紹

用 CSS Selector 取得物件

Page 141: YUI 3.x 介紹

用 CSS Selector 取得物件YUI 2.x用 DOM 工具取得的物件或集合仍然是 HTMLElement。var $D = YAHOO.util.Dom; // reference cachevar el = $D.get(‘foo’);alert(el.nodeName); //output: DIV

Page 142: YUI 3.x 介紹

用 CSS Selector 取得物件YUI 2.x用 DOM 工具取得的物件或集合仍然是 HTMLElement。var $D = YAHOO.util.Dom; // reference cachevar el = $D.get(‘foo’);alert(el.nodeName); //output: DIV

YUI 3.x取得的物件不再是 HTMLElementvar el = Y.get(‘#foo’);alert(el.nodeName); //output: undefinedalert(el.get(‘nodeName’)); //output: DIVs

Page 143: YUI 3.x 介紹

YUI Node HTMLElement

封裝後的差異比較

Page 144: YUI 3.x 介紹

YUI Node• appendChild()• removeChild()• parentNode

HTMLElement• appendChild()• removeChild()• parentNode

封裝後的差異比較

Page 145: YUI 3.x 介紹

YUI Node• appendChild()• removeChild()• parentNode

• contains()• insertBefore()• children

HTMLElement• appendChild()• removeChild()• parentNode

• contains()• insertBefore()• children

封裝後的差異比較

Page 146: YUI 3.x 介紹

YUI Node• appendChild()• removeChild()• parentNode

• contains()• insertBefore()• children

• addClass()• test()• region

HTMLElement• appendChild()• removeChild()• parentNode

• contains()• insertBefore()• children

封裝後的差異比較

Page 147: YUI 3.x 介紹

YUI 3.x 封裝後的差別

Page 148: YUI 3.x 介紹

YUI 3.x 封裝後的差別YUI 2.xFunction-based 的存取方式var $D = YAHOO.util.Dom; // reference cachevar el = $D.get(‘foo’);YUD.addClass(el, ‘highlighted’);el.innerHTML += ‘ clicked’;

Page 149: YUI 3.x 介紹

YUI 3.x 封裝後的差別YUI 2.xFunction-based 的存取方式var $D = YAHOO.util.Dom; // reference cachevar el = $D.get(‘foo’);YUD.addClass(el, ‘highlighted’);el.innerHTML += ‘ clicked’;

YUI 3.xObject-based 的存取方式var el = Y.get(‘#foo’);el.addClass(‘highlighted’);el.set(‘innerHTML’) = el.get(‘innerHTML’) + ‘ clicked’;

Page 150: YUI 3.x 介紹
Page 151: YUI 3.x 介紹

觀念 3:Node 的方法,在 NodeList也都可以使用!

Page 152: YUI 3.x 介紹

NodeList 與 Node

Page 153: YUI 3.x 介紹

NodeList 與 Node

NodeaddClass 方法var el = Y.get(‘#foo’);el.addClass(‘main-module’);

Page 154: YUI 3.x 介紹

NodeList 與 Node

NodeaddClass 方法var el = Y.get(‘#foo’);el.addClass(‘main-module’);

NodeList一行解決、取得 NodeList 物件var items = Y.all(‘#foo li’);items.addClass(‘disabled’);items.set(‘title’, ‘item disabled’);

Page 155: YUI 3.x 介紹

Node 物件的 3 大概念

Page 156: YUI 3.x 介紹

Node 物件的 3 大概念

1. Node 提供更有效率的 Selector 存取方式

Page 157: YUI 3.x 介紹

Node 物件的 3 大概念

1. Node 提供更有效率的 Selector 存取方式

2.在 DOM 之上封裝新介面,解決不一致的問題、並強化功能。

Page 158: YUI 3.x 介紹

Node 物件的 3 大概念

1. Node 提供更有效率的 Selector 存取方式

2.在 DOM 之上封裝新介面,解決不一致的問題、並強化功能。

3. NodeList 的方法是批次操作

Page 159: YUI 3.x 介紹

core component frameworkseed

YUI

YUI BaseMinimal YUI Global and core library method. The only universal YUI 3.x dependency.

GetProvides generic mechanism for dynamically loading script and CSS resources.

LoaderAdds dependency calculator and YUI 3.x package metadata, allowing dynamic loading of all YUI modules in single, combo-handled HTTP requests.

Event

Event BaseProvides DOM event and Custom Event functionality, event facade implementation, and page-load storyboarding events.

Node

Node BaseProvides abstraction for creating and manipulating DOM elements. Can be extended by components via plugin architecture.

NodeListExtension of Node to handle abstraction for element collections; used for batching DOM manipulations.

Node StyleExtended API for manipulating style properties on Nodes and NodeLists.

Node ScreenExtends Node and NodeList API for positioning and region management.

Dom

Dom BaseProvides low-level DOM helper methods.

Dom StyleProvides low-level style management methods.

Dom ScreenProvides low-level positioning and region management methods.

SelectorProvides low-level methods for collecting and filtering DOM elements based on selector syntax.

OOP

OOP BaseProvides low-level object management functionality for JavaScript objects including extension and augmentation.

WidgetProvides foundational plumbing for high-level UI components, including lifecycle management. Builds upon base and is an Attribute provider.

BaseProvides base class for all YUI components that provide managed attributes and that serve as event targets.

AttributeProvides managed attribute system that can augment any class; includes get/set interface and intrinsic change events.

PluginPlugin namespace. Forthcoming class will serve as a template for plugin functionality. Plugins can also operate directly on Nodes.

YUI 3.x Architecture (JavaScript)

components

Drag and Drop

DD Manager BaseProvides base DD manager functionality to make a Node draggable.

DDM ShimExtends DD manager to allow elements to be dragged over iframes and other mousetraps.

DD DragProvides DD functionality for simple drag operations on a Node.

DD DropProvides drop-target functionality.

DD ProxyProvides proxy-drag functionality.

DD ConstrainProvides drag constraint functionality.

DD PluginProvides pluggable drag functionality for Node instances.

DD Drop PluginProvides pluggable drop-target functionality for Node instances.

Animation

Anim BaseProvides foundational animation support for animating properties on the style object of an element.

Anim ColorExtends animation functionality to support animations of color values.

Anim CurveExtends animation functionality to support animations of element position along a curved path.

Anim EasingExtends animation functionality to support easing effects.

Anim ScrollExtends animation functionality to support animations of elements' scroll positions.

Anim XYAdds support for the xy property in from and to configurations.

Anim PluginProvides pluggable animation support for Nodes.

IOProvides XHR, SWF-based XDR, and file upload support.

CookieProvides cookie management support.

JSONProvides cookie management support.

...and moreMore utility (low-level) components are provided in the YUI 3.0 preview release 1 build. Future preview releases and betas will include the full component framework and samples of higher-level components (widgets).

The YUI Seed layer can be used

to bootstrap any implementation.

With the seed on the page,

YUI().use() can bring in all

additional components quickly and

safely.

YUI's 3.x Core serves as a common dependency layer for most

downstream components. Let the YUI Loader (or Dependency

Configurator) calculate your true core dependencies, though; in many

cases, you will not require the full core layer, even if you are using

downstream components.

The Component Framework (not yet complete

as of PR1) will provide a consistent and

reusable structure for building low-level utilities

and higher-level UI widgets.

Components in YUI 3.x are provided a la carte and can be highly modular. You can minimize your

inclusion of library code by selecting the specific portions of each component that are required in your

implementation.

Page 160: YUI 3.x 介紹

core component framework

YUI Global and core The only

Provides generic mechanism for dynamically loading script

Adds dependency calculator

metadata, allowing dynamic YUI modules in

single, combo-handled HTTP

Event

Event BaseProvides DOM event and Custom Event functionality, event facade implementation, and page-load storyboarding events.

Node

Node BaseProvides abstraction for creating and manipulating DOM elements. Can be extended by components via plugin architecture.

NodeListExtension of Node to handle abstraction for element collections; used for batching DOM manipulations.

Node StyleExtended API for manipulating style properties on Nodes and NodeLists.

Node ScreenExtends Node and NodeList API for positioning and region management.

Dom

Dom BaseProvides low-level DOM helper methods.

Dom StyleProvides low-level style management methods.

Dom ScreenProvides low-level positioning and region management methods.

SelectorProvides low-level methods for collecting and filtering DOM elements based on selector syntax.

OOP

OOP BaseProvides low-level object management functionality for

WidgetProvides foundational plumbing for high-level UI components, including lifecycle management. Builds upon base and is an Attribute provider.

BaseProvides base class for all YUI components that provide managed attributes and that serve as event targets.

AttributeProvides managed attribute system that can augment any class; includes get/set interface and intrinsic change events.

PluginPlugin namespace. Forthcoming class will serve as a template for plugin functionality. Plugins can also operate directly on Nodes.

Architecture (JavaScript)

Drag and Drop

DD Manager BaseProvides base DD manager functionality to make a Node draggable.

DDM ShimExtends DD manager to allow elements to be dragged over iframes and other mousetraps.

DD DragProvides DD functionality for simple drag operations on a Node.

DD DropProvides drop-target functionality

DD ProxyProvides proxy-drag functionality

DD ConstrainProvides drag constraint functionality

DD PluginProvides pluggable drag functionality for Node instances.

DD Drop PluginProvides pluggable drop-target functionality for Node

Node Base:封裝 DOM 的介面 NodeList:多個 Node 物件 NodeStyle:負責處理樣式

Node Screen:XY 及 Region

Page 161: YUI 3.x 介紹

Event 物件

在 DOM Event 上建立的抽象層所有的事件都是 Custom Event

More Consistent

Page 162: YUI 3.x 介紹
Page 163: YUI 3.x 介紹

觀念 1:提供了簡易的介面,讓訂閱 DOM 的 Event 很容易

Page 164: YUI 3.x 介紹

事件的綁法

Page 165: YUI 3.x 介紹

事件的綁法

方法一:Y.on()YUI().use(‘node’, function (Y) { Y.on(‘click’, function (e) { // 處理事件 }, ‘#foo’);});

Page 166: YUI 3.x 介紹

事件的綁法

方法一:Y.on()YUI().use(‘node’, function (Y) { Y.on(‘click’, function (e) { // 處理事件 }, ‘#foo’);});

方法二:Node.on()YUI().use(‘node’, function (Y) { var el = Y.get(‘#foo’); el.on(‘click’, function (e) { // 處理事件 });});

Page 167: YUI 3.x 介紹
Page 168: YUI 3.x 介紹

觀念 2:跟 Node 相似,Event 物件也被封裝成一個物件介面,

而非過去單純的 DOM Event

Page 169: YUI 3.x 介紹

封裝過後的 Event

Page 170: YUI 3.x 介紹

封裝過後的 EventYUI 2.x還是一般 DOM Eventvar $E = YAHOO.util.Event; // reference cache$E.on(‘foo’, ‘click’, function (e) { alert(e.type); //output: click $E.preventDefault(e); //防止像是連結或表單送出的預設事件 $E.stopPropogation(e); //防止Bubbleup});

YUI 3.x封裝後更物件導向Y.on(‘click’, function (e) { alert(e.type); //output: undefinded e.preventDefault(); e.stopPropogation();}, ‘#foo’);

Page 171: YUI 3.x 介紹
Page 172: YUI 3.x 介紹

觀念 3:YUI 3.x 的所有事件都是Custom Event

Page 173: YUI 3.x 介紹

製作元件常會使用自訂事件

Page 174: YUI 3.x 介紹

製作元件常會使用自訂事件YUI 2.x製作元件時,Custom Event 要另外宣告var $E = YAHOO.util.Event; // reference cachefunction Toggle() { this.onToggleComplete = new YAHOO.util.CustomEvent(‘toggleComplete’); ... this.onToggleComplete.fire();}var oToggle = new Toggle();oToggle.onToggleComplete.subscribe(function(e) { //... });

Page 175: YUI 3.x 介紹

製作元件常會使用自訂事件YUI 2.x製作元件時,Custom Event 要另外宣告var $E = YAHOO.util.Event; // reference cachefunction Toggle() { this.onToggleComplete = new YAHOO.util.CustomEvent(‘toggleComplete’); ... this.onToggleComplete.fire();}var oToggle = new Toggle();oToggle.onToggleComplete.subscribe(function(e) { //... });

YUI 3.x所有 Event 都經過這樣的包裝

Page 176: YUI 3.x 介紹

好處是不會混淆、更多功能

自定事件有提供 before 與 after 的事件

Page 177: YUI 3.x 介紹

YUI().use("drag", function(Y) { var drag = new Y.Drag({

node: ‘#demo’});

drag.on("drag:mouseDown", function(e) { e.preventDefault(); }); Y.on("drag:mouseDown", function(e) { e.preventDefault(); });});

好處是不會混淆、更多功能

自定事件有提供 before 與 after 的事件

Page 178: YUI 3.x 介紹
Page 179: YUI 3.x 介紹

觀念 4:跟 DOM Event 一樣,Customer Event 也提供了 preventDeafult 與stopPropagation 方法

Page 180: YUI 3.x 介紹

Custom Event 一樣不少

Page 181: YUI 3.x 介紹

YUI().use("drag", function(Y) { var drag = new Y.Drag({

node: ‘#demo’});

drag.on("drag:mouseDown", function(e) { e.preventDefault(); e.stopPropagation(); });});

Custom Event 一樣不少

Page 182: YUI 3.x 介紹

Event 物件的 4 大概念

Page 183: YUI 3.x 介紹

Event 物件的 4 大概念

1.簡易的綁事件介面

Page 184: YUI 3.x 介紹

Event 物件的 4 大概念

1.簡易的綁事件介面

2.事件物件被封裝、變得更物件導向

Page 185: YUI 3.x 介紹

Event 物件的 4 大概念

1.簡易的綁事件介面

2.事件物件被封裝、變得更物件導向

3.所有的事件都是 Custom Event

Page 186: YUI 3.x 介紹

Event 物件的 4 大概念

1.簡易的綁事件介面

2.事件物件被封裝、變得更物件導向

3.所有的事件都是 Custom Event

4. Custom Event 也是可 bubble、preventable、與有 after moment

Page 187: YUI 3.x 介紹

core component frameworkseed

YUI

YUI BaseMinimal YUI Global and core library method. The only universal YUI 3.x dependency.

GetProvides generic mechanism for dynamically loading script and CSS resources.

LoaderAdds dependency calculator and YUI 3.x package metadata, allowing dynamic loading of all YUI modules in single, combo-handled HTTP requests.

Event

Event BaseProvides DOM event and Custom Event functionality, event facade implementation, and page-load storyboarding events.

Node

Node BaseProvides abstraction for creating and manipulating DOM elements. Can be extended by components via plugin architecture.

NodeListExtension of Node to handle abstraction for element collections; used for batching DOM manipulations.

Node StyleExtended API for manipulating style properties on Nodes and NodeLists.

Node ScreenExtends Node and NodeList API for positioning and region management.

Dom

Dom BaseProvides low-level DOM helper methods.

Dom StyleProvides low-level style management methods.

Dom ScreenProvides low-level positioning and region management methods.

SelectorProvides low-level methods for collecting and filtering DOM elements based on selector syntax.

OOP

OOP BaseProvides low-level object management functionality for JavaScript objects including extension and augmentation.

WidgetProvides foundational plumbing for high-level UI components, including lifecycle management. Builds upon base and is an Attribute provider.

BaseProvides base class for all YUI components that provide managed attributes and that serve as event targets.

AttributeProvides managed attribute system that can augment any class; includes get/set interface and intrinsic change events.

PluginPlugin namespace. Forthcoming class will serve as a template for plugin functionality. Plugins can also operate directly on Nodes.

YUI 3.x Architecture (JavaScript)

components

Drag and Drop

DD Manager BaseProvides base DD manager functionality to make a Node draggable.

DDM ShimExtends DD manager to allow elements to be dragged over iframes and other mousetraps.

DD DragProvides DD functionality for simple drag operations on a Node.

DD DropProvides drop-target functionality.

DD ProxyProvides proxy-drag functionality.

DD ConstrainProvides drag constraint functionality.

DD PluginProvides pluggable drag functionality for Node instances.

DD Drop PluginProvides pluggable drop-target functionality for Node instances.

Animation

Anim BaseProvides foundational animation support for animating properties on the style object of an element.

Anim ColorExtends animation functionality to support animations of color values.

Anim CurveExtends animation functionality to support animations of element position along a curved path.

Anim EasingExtends animation functionality to support easing effects.

Anim ScrollExtends animation functionality to support animations of elements' scroll positions.

Anim XYAdds support for the xy property in from and to configurations.

Anim PluginProvides pluggable animation support for Nodes.

IOProvides XHR, SWF-based XDR, and file upload support.

CookieProvides cookie management support.

JSONProvides cookie management support.

...and moreMore utility (low-level) components are provided in the YUI 3.0 preview release 1 build. Future preview releases and betas will include the full component framework and samples of higher-level components (widgets).

The YUI Seed layer can be used

to bootstrap any implementation.

With the seed on the page,

YUI().use() can bring in all

additional components quickly and

safely.

YUI's 3.x Core serves as a common dependency layer for most

downstream components. Let the YUI Loader (or Dependency

Configurator) calculate your true core dependencies, though; in many

cases, you will not require the full core layer, even if you are using

downstream components.

The Component Framework (not yet complete

as of PR1) will provide a consistent and

reusable structure for building low-level utilities

and higher-level UI widgets.

Components in YUI 3.x are provided a la carte and can be highly modular. You can minimize your

inclusion of library code by selecting the specific portions of each component that are required in your

implementation.

Page 188: YUI 3.x 介紹

core component frameworkseed

YUI

YUI BaseMinimal YUI Global and core library method. The only universal YUI 3.x dependency.

GetProvides generic mechanism for dynamically loading script and CSS resources.

LoaderAdds dependency calculator and YUI 3.x package metadata, allowing dynamic loading of all YUI modules in single, combo-handled HTTP requests.

Event

Event BaseProvides DOM event and Custom Event functionality, event facade implementation, and page-load storyboarding events.

Node

Node BaseProvides abstraction for creating and manipulating DOM elements. Can be extended by components via plugin architecture.

NodeListExtension of Node to handle abstraction for element collections; used for batching DOM manipulations.

Node StyleExtended API for manipulating style properties on Nodes and NodeLists.

Node ScreenExtends Node and NodeList API for positioning and region management.

Dom

Dom BaseProvides low-level DOM helper methods.

Dom StyleProvides low-level style management methods.

Dom ScreenProvides low-level positioning and region management methods.

SelectorProvides low-level methods for collecting and filtering DOM elements based on

Provides foundational plumbing for high-level UI components, including lifecycle management. Builds upon base and is an

Provides base class for all provide managed attributes and that serve as event targets.

Provides managed attribute system that can augment any class; includes get/set interface and intrinsic change events.

Plugin namespace. Forthcoming class will serve as a template for plugin functionalityalso operate directly on Nodes.

DOM events and Custom Events

Page 189: YUI 3.x 介紹

元件架構

屬性管理、繼承與 Lifecycle是建立 YUI 3.x 元件的基礎

More Consistent

Page 190: YUI 3.x 介紹

core component frameworkseed

YUI

YUI BaseMinimal YUI Global and core library method. The only universal YUI 3.x dependency.

GetProvides generic mechanism for dynamically loading script and CSS resources.

LoaderAdds dependency calculator and YUI 3.x package metadata, allowing dynamic loading of all YUI modules in single, combo-handled HTTP requests.

Event

Event BaseProvides DOM event and Custom Event functionality, event facade implementation, and page-load storyboarding events.

Node

Node BaseProvides abstraction for creating and manipulating DOM elements. Can be extended by components via plugin architecture.

NodeListExtension of Node to handle abstraction for element collections; used for batching DOM manipulations.

Node StyleExtended API for manipulating style properties on Nodes and NodeLists.

Node ScreenExtends Node and NodeList API for positioning and region management.

Dom

Dom BaseProvides low-level DOM helper methods.

Dom StyleProvides low-level style management methods.

Dom ScreenProvides low-level positioning and region management methods.

SelectorProvides low-level methods for collecting and filtering DOM elements based on selector syntax.

OOP

OOP BaseProvides low-level object management functionality for JavaScript objects including extension and augmentation.

WidgetProvides foundational plumbing for high-level UI components, including lifecycle management. Builds upon base and is an Attribute provider.

BaseProvides base class for all YUI components that provide managed attributes and that serve as event targets.

AttributeProvides managed attribute system that can augment any class; includes get/set interface and intrinsic change events.

PluginPlugin namespace. Forthcoming class will serve as a template for plugin functionality. Plugins can also operate directly on Nodes.

YUI 3.x Architecture (JavaScript)

components

Drag and Drop

DD Manager BaseProvides base DD manager functionality to make a Node draggable.

DDM ShimExtends DD manager to allow elements to be dragged over iframes and other mousetraps.

DD DragProvides DD functionality for simple drag operations on a Node.

DD DropProvides drop-target functionality.

DD ProxyProvides proxy-drag functionality.

DD ConstrainProvides drag constraint functionality.

DD PluginProvides pluggable drag functionality for Node instances.

DD Drop PluginProvides pluggable drop-target functionality for Node instances.

Animation

Anim BaseProvides foundational animation support for animating properties on the style object of an element.

Anim ColorExtends animation functionality to support animations of color values.

Anim CurveExtends animation functionality to support animations of element position along a curved path.

Anim EasingExtends animation functionality to support easing effects.

Anim ScrollExtends animation functionality to support animations of elements' scroll positions.

Anim XYAdds support for the xy property in from and to configurations.

Anim PluginProvides pluggable animation support for Nodes.

IOProvides XHR, SWF-based XDR, and file upload support.

CookieProvides cookie management support.

JSONProvides cookie management support.

...and moreMore utility (low-level) components are provided in the YUI 3.0 preview release 1 build. Future preview releases and betas will include the full component framework and samples of higher-level components (widgets).

The YUI Seed layer can be used

to bootstrap any implementation.

With the seed on the page,

YUI().use() can bring in all

additional components quickly and

safely.

YUI's 3.x Core serves as a common dependency layer for most

downstream components. Let the YUI Loader (or Dependency

Configurator) calculate your true core dependencies, though; in many

cases, you will not require the full core layer, even if you are using

downstream components.

The Component Framework (not yet complete

as of PR1) will provide a consistent and

reusable structure for building low-level utilities

and higher-level UI widgets.

Components in YUI 3.x are provided a la carte and can be highly modular. You can minimize your

inclusion of library code by selecting the specific portions of each component that are required in your

implementation.

Page 191: YUI 3.x 介紹

YUI 3.x Miscs.

DebugIO

QueueMore Powerful

Page 192: YUI 3.x 介紹

Debug Enhancement

• YUI 2.x:要用哪一個?

• alert()

• YAHOO.log()

• console.log()

• YUI 3.x:統一用 Y.log()、Y.dump()

Page 193: YUI 3.x 介紹

alert() 最簡單,但是干擾性太大

Page 194: YUI 3.x 介紹

Firebug 的 console.log() 很好用!但只有 Firefox 支援、在其他瀏覽器會發生錯誤

Page 195: YUI 3.x 介紹

YUI 2.x 的 YAHOO.log() 可跨瀏覽器!但不裝 Logger 就什麼都看不到...

Page 196: YUI 3.x 介紹

YUI 2.x:Debugging with YAHOO.log()

YAHOO.log(dItem.innerHTML);

Page 197: YUI 3.x 介紹

YUI 3.x: Y.log()1. 跨瀏覽器。2. 有 Firebug 會直接寫入 Console 中。

Page 198: YUI 3.x 介紹

YUI 3.x:Debugging with Y.log()

Y.log(el.get(‘innerHTML’));

Page 199: YUI 3.x 介紹

IO & Queue

• IO:原本的 Connection Manager,多了跨網域存取資料的功能。

• Queue:工作排程

Page 200: YUI 3.x 介紹

IO 的跨網域存取

• Resource 端必須有 crossdomain.xml

• Pipes 有提供:http://pipes.yahooapis.com/crossdomain.xml

• 在你的 Server 上放置 io.swf

• 設定 xdr (cross domain request)

Page 201: YUI 3.x 介紹

用 YUI 3.x 寫 JavaScript

簡單的事件指派範例

Page 202: YUI 3.x 介紹
Page 203: YUI 3.x 介紹
Page 204: YUI 3.x 介紹

YUI 3.x 架構基礎

從 DragDrop / IO / Animation了解 YUI 3.x 的架構方式

Lighter / Faster

Page 205: YUI 3.x 介紹

0

7.5

15.0

22.5

30.0

2.x 3.x

Drag & Drop DDM Base DDM Shim DDM Drop DD DragDD Drop DD Proxy DD Constrain DD Plugin DD Drop Plugin

Drag and Drop, minified, in KB

Page 206: YUI 3.x 介紹

Drag and Drop, minified, in KB

0

7.5

15.0

22.5

30.0

2.x 3.x

Drag & Drop DDM BaseDD Drag

Page 207: YUI 3.x 介紹

Animation, minified, in KB

0

3.75

7.50

11.25

15.00

2.x 3.x

Animation Anim Base Anim Color Anim CurveAnim Easing Anim Scroll Anim XY Anim PluginAnim XY

Page 208: YUI 3.x 介紹

Ajax component, minified, in KB

0

3.75

7.50

11.25

15.00

Connection Manager IO

2.x 3.x

Page 209: YUI 3.x 介紹
Page 210: YUI 3.x 介紹

core component frameworkseed

YUI

YUI BaseMinimal YUI Global and core library methods. The only universal YUI 3.x dependency.

GetProvides generic mechanism for dynamically loading script and CSS resources.

LoaderAdds dependency calculator and YUI 3.x package metadata, allowing dynamic loading of all YUI modules in single, combo-handled HTTP requests.

Event

Event BaseProvides DOM event and Custom Event functionality, event facade implementation, and page-load storyboarding events.

Node

Node BaseProvides abstraction for creating and manipulating DOM elements. Can be extended by components via plugin architecture.

NodeListExtension of Node to handle abstraction for element collections; used for batching DOM manipulations.

Node StyleExtended API for manipulating style properties on Nodes and NodeLists.

Node ScreenExtends Node and NodeList API for positioning and region management.

Dom

Dom BaseProvides low-level DOM helper methods.

Dom StyleProvides low-level style management methods.

Dom ScreenProvides low-level positioning and region management methods.

SelectorProvides low-level methods for collecting and filtering DOM elements based on selector syntax.

OOP

OOP BaseProvides low-level object management functionality for JavaScript objects including extension and augmentation.

WidgetProvides foundational plumbing for high-level UI components, including lifecycle management. Builds upon base and is an Attribute provider.

BaseProvides base class for all YUI components that provide managed attributes and that serve as event targets.

AttributeProvides managed attribute system that can augment any class; includes get/set interface and intrinsic change events.

PluginPlugin namespace. Forthcoming class will serve as a template for plugin functionality. Plugins can also operate directly on Nodes.

YUI 3.x Architecture (JavaScript)

components

Drag and Drop

DD Manager BaseProvides base DD manager functionality to make a Node draggable.

DDM ShimExtends DD manager to allow elements to be dragged over iframes and other mousetraps.

DD DragProvides DD functionality for simple drag operations on a Node.

DD DropProvides drop-target functionality.

DD ProxyProvides proxy-drag functionality.

DD ConstrainProvides drag constraint functionality.

DD PluginProvides pluggable drag functionality for Node instances.

DD Drop PluginProvides pluggable drop-target functionality for Node instances.

Animation

Anim BaseProvides foundational animation support for animating properties on the style object of an element.

Anim ColorExtends animation functionality to support animations of color values.

Anim CurveExtends animation functionality to support animations of element position along a curved path.

Anim EasingExtends animation functionality to support easing effects.

Anim ScrollExtends animation functionality to support animations of elements' scroll positions.

Anim XYAdds support for the xy property in from and to configurations.

Anim PluginProvides pluggable animation support for Nodes.

IOProvides XMLHttpRequest, SWF-based cross-domain requests, and file upload support.

CookieProvides cookie management support.

JSON

...and moreMore utility (low-level) components are provided in the YUI 3.0 preview release 1 build. Future preview releases and betas will include the full component framework and samples of higher-level components (widgets).

The YUI Seed layer can be used

to bootstrap any implementation.

With the seed on the page,

YUI().use() can bring in all

additional components quickly and

safely.

YUI's 3.x Core serves as a common dependency layer for most

downstream components. Let the YUI Loader (or Dependency

Configurator) calculate your true core dependencies, though; in many

cases, you will not require the full core layer, even if you are using

downstream components.

The Component Framework (not yet complete

as of PR1) will provide a consistent and

reusable structure for building low-level utilities

and higher-level UI widgets.

Components in YUI 3.x are provided a la carte and can be highly modular. You can minimize your

inclusion of library code by selecting the specific portions of each component that are required in your

implementation.

StringifyConvert JavaScript objects to JSON strings.

ParseSafely convert strings to JavaScript objects.

based on YUI 3.0 PR1 2008-09-12

Page 211: YUI 3.x 介紹

component framework

Provides foundational plumbing for high-level UI

YUI components that

augment any class; includes get/set interface and

Plugin namespace. Forthcoming class will serve . Plugins can

components

Drag and Drop

DD Manager BaseProvides base DD manager functionality to make a Node draggable.

DDM ShimExtends DD manager to allow elements to be dragged over iframes and other mousetraps.

DD DragProvides DD functionality for simple drag operations on a Node.

DD DropProvides drop-target functionality.

DD ProxyProvides proxy-drag functionality.

DD ConstrainProvides drag constraint

Animation

Anim BaseProvides foundational animation support for animating properties on the style object of an element.

Anim ColorExtends animation functionality to support animations of color values.

Anim CurveExtends animation functionality to support animations of element position along a curved path.

Anim EasingExtends animation functionality to support easing effects.

Anim ScrollExtends animation functionality to support animations of elements' scroll

IOProvides XMLHttpRequest, SWF-based cross-domain requests, and file upload support.

CookieProvides cookie management support.

JSON

...and moreMore utility (low-level) components are provided in the YUI 3.0 preview release 1 build. Future preview

StringifyConvert JavaScript objects to JSON strings.

ParseSafely convert strings to JavaScript objects.

Improved granularity

Page 212: YUI 3.x 介紹

component framework

Provides foundational plumbing for high-level UI

YUI components that

augment any class; includes get/set interface and

Plugin namespace. Forthcoming class will serve . Plugins can

components

Drag and Drop

DD Manager BaseProvides base DD manager functionality to make a Node draggable.

DDM ShimExtends DD manager to allow elements to be dragged over iframes and other mousetraps.

DD DragProvides DD functionality for simple drag operations on a Node.

DD DropProvides drop-target functionality.

DD ProxyProvides proxy-drag functionality.

DD ConstrainProvides drag constraint

Animation

Anim BaseProvides foundational animation support for animating properties on the style object of an element.

Anim ColorExtends animation functionality to support animations of color values.

Anim CurveExtends animation functionality to support animations of element position along a curved path.

Anim EasingExtends animation functionality to support easing effects.

Anim ScrollExtends animation functionality to support animations of elements' scroll

IOProvides XMLHttpRequest, SWF-based cross-domain requests, and file upload support.

CookieProvides cookie management support.

JSON

...and moreMore utility (low-level) components are provided in the YUI 3.0 preview release 1 build. Future preview

StringifyConvert JavaScript objects to JSON strings.

ParseSafely convert strings to JavaScript objects.

Improved granularityImproved performance

Page 213: YUI 3.x 介紹

3.x 的釋出計畫

Page 214: YUI 3.x 介紹

3.x Roadmap2008/11:3.0 PR2 控制項的架構

2009 第一季:3.0 Beta所有 2.x 的工具組

Page 215: YUI 3.x 介紹

More information:http://tech.groups.yahoo.com/group/yui3/

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

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

Page 216: YUI 3.x 介紹

整體 YUI 的釋出計畫

Page 217: YUI 3.x 介紹

Project Roadmap 9/8:給外部開發者的

CLA(Contributor License Agreement) 9/8 推出 2.6.0:新控制項有 Carousel、DataStoreRTE 與 DataTable 脫離 Beta

11/8 將有公開的 Repository 11/8 3.0 PR2 2009 Q1:2.7.0 and 3.0 beta 1

Page 218: YUI 3.x 介紹

• YUI 2.x 分散式架構、初學者上手難。

• YUI 3.x 把原本 Optional 的 Loader、Element、Selector 改為內建,使用語法因此大幅修改。

• Usable v.s. Professional 的妥協

Conclusion