YUI 3.x 介紹
-
Upload
joseph-chiang -
Category
Technology
-
view
3.079 -
download
7
description
Transcript of YUI 3.x 介紹
YUI 3.0 PR1不斷進步的 Yahoo! 使用者函式庫
蔣定宇, YDN 創新科技推廣工程師
The YUI Library:3.0 PR1http://developer.yahoo.com/yui/3
Pow
ered
by
YU
I 3.
0 P
R1:
今日的 YUI 使用者函式庫停下看看 2.x 的發展
在瀏覽器上建立使用者 UI(控制項)傳統內建 UI 使用 YUI 所建立的 UI
在瀏覽器上建立使用者 UI(控制項)
Def. But.Button
Label Menu
Label Text Field
Label
Label
Text Area
click me
傳統內建 UI 使用 YUI 所建立的 UI
在瀏覽器上建立使用者 UI(控制項)
Def. But.Button
Label Menu
Label Text Field
Label
Label
Text Area
click me
傳統內建 UI 使用 YUI 所建立的 UI
在瀏覽器上建立使用者 UI(控制項)
Def. But.Button
Label Menu
Label Text Field
Label
Label
Text Area
click me
傳統內建 UI 使用 YUI 所建立的 UI
在瀏覽器上建立使用者 UI(控制項)
Def. But.Button
Label Menu
Label Text Field
Label
Label
Text Area
click me
傳統內建 UI 使用 YUI 所建立的 UI
在瀏覽器上建立使用者 UI(控制項)
Def. But.Button
Label Menu
Label Text Field
Label
Label
Text Area
click me
傳統內建 UI 使用 YUI 所建立的 UI
在瀏覽器上建立使用者 UI(控制項)
Def. But.Button
Label Menu
Label Text Field
Label
Label
Text Area
click me
傳統內建 UI 使用 YUI 所建立的 UI
在瀏覽器上建立使用者 UI(控制項)
Def. But.Button
Label Menu
Label Text Field
Label
Label
Text Area
click me
傳統內建 UI 使用 YUI 所建立的 UI
在瀏覽器上建立使用者 UI(控制項)
Def. But.Button
Label Menu
Label Text Field
Label
Label
Text Area
click me
傳統內建 UI 使用 YUI 所建立的 UI
在瀏覽器上建立使用者 UI(控制項)
Def. But.Button
Label Menu
Label Text Field
Label
Label
Text Area
click me
傳統內建 UI 使用 YUI 所建立的 UI
在瀏覽器上建立使用者 UI(控制項)
Def. But.Button
Label Menu
Label Text Field
Label
Label
Text Area
click me
傳統內建 UI 使用 YUI 所建立的 UI
在瀏覽器上建立使用者 UI(控制項)
Def. But.Button
Label Menu
Label Text Field
Label
Label
Text Area
click me
傳統內建 UI 使用 YUI 所建立的 UI
在瀏覽器上建立使用者 UI(控制項)
Def. But.Button
Label Menu
Label Text Field
Label
Label
Text Area
click me
傳統內建 UI 使用 YUI 所建立的 UI
在瀏覽器上建立使用者 UI(控制項)
Def. But.Button
Label Menu
Label Text Field
Label
Label
Text Area
click me
傳統內建 UI 使用 YUI 所建立的 UI
在瀏覽器上建立使用者 UI(控制項)
Def. But.Button
Label Menu
Label Text Field
Label
Label
Text Area
click me
傳統內建 UI 使用 YUI 所建立的 UI
在瀏覽器上建立使用者 UI(控制項)
Def. But.Button
Label Menu
Label Text Field
Label
Label
Text Area
click me
傳統內建 UI 使用 YUI 所建立的 UI
在瀏覽器上建立使用者 UI(控制項)
Def. But.Button
Label Menu
Label Text Field
Label
Label
Text Area
click me
傳統內建 UI 使用 YUI 所建立的 UI
在瀏覽器上建立使用者 UI(控制項)
Def. But.Button
Label Menu
Label Text Field
Label
Label
Text Area
click me
傳統內建 UI 使用 YUI 所建立的 UI
YUI 有著最好的瀏覽器支援度
即使是 iPhone 上的瀏覽器,YUI 也支援
http://blogs.computerworld.com/nytimes_iphone_browser_marketshare
即使是 iPhone 上的瀏覽器,YUI 也支援
http://marketshare.hitslink.com/report.aspx?sample=21&qprid=43&qpcustom=Chrome+0.2
Google Chrome 也一視同仁 ;)
http://marketshare.hitslink.com/report.aspx?sample=21&qprid=43&qpcustom=Chrome+0.2
Google Chrome 也一視同仁 ;)
http://marketshare.hitslink.com/report.aspx?sample=21&qprid=43&qpcustom=Chrome+0.2
Google Chrome 也一視同仁 ;)
Button + Menu + Container + ... = RTE Editor
結構複雜、但使用起來簡單愉快
結構複雜、但使用起來簡單愉快
且保證在每個主流瀏覽器都支援
且保證在每個主流瀏覽器都支援
無障礙網頁(Accessbility)
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 都是由許多小物件所構成的
最多人使用的頁面、都是 YUI
首頁 搜尋 Flickr
My 手機搜尋(Yahoo! Go + iPhone)
電影
運動 生活+ Delicious
新聞 地圖 Yahoo Live
理財 知識+ Yahoo Pipes
電子郵件 汽車 無名小站
Metro(新版首頁) 拍賣 搜尋榜
時尚 公益 汽車
最多人使用的頁面、都是 YUI
追求專業的大廠牌也都用 YUI
追求專業的大廠牌也都用 YUI
• 超過 30 種以上的工具 + 控制項• 在 Yahoo! 的頁面已使用 3 年• 約 90 萬的下載量• 1.1 萬的開發者在討論區• 數以千計的其他網站使用• 原始碼品質最佳• 文件最齊全• 最好的支援經驗
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
Bey
ond
the
YUI T
eam
Major enhancements to TreeView for 2.6.0.
Satyam (Daniel Barreiro)
Bey
ond
the
YUI T
eam
Bey
ond
the
YUI T
eam
Bubbling library, updates to Layout Manager
Caridy
Bey
ond
the
YUI T
eam
Bey
ond
the
YUI T
eam
Date functions for 2.6.0
Philip
Bey
ond
the
YUI T
eam
http://www.flickr.com/photos/scarls13/2104638757/ photo by Steve Carlson; used by kind permission.
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.
Bey
ond
the
YUI T
eam
Bey
ond
the
YUI T
eam
Carousel Control for 2.6.0
Gopal
Bey
ond
the
YUI T
eam
Bey
ond
the
YUI T
eam
Interval Calendar for 2.6.0
John Peloquin
Bey
ond
the
YUI T
eam
Bey
ond
the
YUI T
eam
AccordionView coming in 2.7.0
Marco
Bey
ond
the
YUI T
eam
Bey
ond
the
YUI T
eam
Browser History Manager, YUI Compressor
Julien
Bey
ond
the
YUI T
eam
Bey
ond
the
YUI T
eam
ImageLoader
Matt
Wanted!你也可以成為 YUI Contributor
YUI 3.x繼 YUI 2.x 一次大的結構重整
YUI 3.x 的五大目標
YUI 3.x 的五大目標
• Lighter:更輕巧
YUI 3.x 的五大目標
• Lighter:更輕巧
• Faster:更快速
YUI 3.x 的五大目標
• Lighter:更輕巧
• Faster:更快速
• More Consistent:更一致
YUI 3.x 的五大目標
• Lighter:更輕巧
• Faster:更快速
• More Consistent:更一致
• More Powerful:更強大
YUI 3.x 的五大目標
• Lighter:更輕巧
• Faster:更快速
• More Consistent:更一致
• More Powerful:更強大
• More Securable:更安全
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
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
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
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
YUI 3.x 的整體結構
YUI 3.x 的整體結構
• Seed:開發者只要有此種子即可取得 YUI 的所有元件
YUI 3.x 的整體結構
• Seed:開發者只要有此種子即可取得 YUI 的所有元件
• Core:函式庫核心,包含 DOM、Event 及新的 Node
YUI 3.x 的整體結構
• Seed:開發者只要有此種子即可取得 YUI 的所有元件
• Core:函式庫核心,包含 DOM、Event 及新的 Node
• Component Framework:開發新元件的架構函式庫
YUI 3.x 的整體結構
• Seed:開發者只要有此種子即可取得 YUI 的所有元件
• Core:函式庫核心,包含 DOM、Event 及新的 Node
• Component Framework:開發新元件的架構函式庫
• Component:包含工具與控制項
新的 YUI 物件
例項化
背景載入
背景合併多隻檔案
多重開發環境Faster Coding / Loading
More Secure
觀念 1:若需使用 YUI 3.x 的函式庫有兩種方法:
1. 用新的 Seed 方法2. 用傳統 Script 引用法
<script type="text/javascript" src="http://yui.yahooapis.com/3.0.0pr1/build/yui/yui-min.js"></script>
YUI Global (7KB, 1 HTTP request)
YUI Global (7KB, 1 HTTP request)YUI().use('node', function(Y) { Y.Node.get('#demo');});
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>
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>
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');});
<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>
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');});
YUI Configurator
觀念 2:YUI 3.x 是 Instance-based每個 Instance 都是獨立且互不甘擾的
Instance-based:可例項化
Instance-based:可例項化YUI 2.xYAHOO 作為全域變數,只能有一個,容易被覆寫YAHOO.widget.HelloWorld = doSomething; // 開發者 1 寫的... YAHOO.widget.HelloWorld = doNothing; // 開發者 2 寫的
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;};);
1
2 3 4
5
未來 Y 上會有許多不同的 Application
一頁上有多個程式的概念
一頁上有多個程式的概念
每個程式有自己的 YUI Instance:只索取所需的元件
一頁上有多個程式的概念
每個程式有自己的 YUI Instance:只索取所需的元件
每個 Instance 可獨立開發多人環境:Sandboxes
一頁上有多個程式的概念
每個程式有自己的 YUI Instance:只索取所需的元件
每個 Instance 可獨立開發多人環境:Sandboxes
Sandboxes 可提供 Secure Mashup 的基礎
一頁上有多個程式的概念
每個程式有自己的 YUI Instance:只索取所需的元件
每個 Instance 可獨立開發多人環境:Sandboxes
Sandboxes 可提供 Secure Mashup 的基礎 每個 Instance 的 YUI 3.x 版本不同也沒關係
觀念 3:YUI 是建構式、可產生 YUI 的 Instance
YUI 是建構式 Constructor
YUI 是建構式 Constructor
推薦的使用方法YUI().use(‘node’, function(Y) { //...};);
YUI 是建構式 Constructor
推薦的使用方法YUI().use(‘node’, function(Y) { //...};);
你也可以這樣寫var YAHOO = YUI(); // Factory, 會產生一個新的 InstanceYAHOO.use(‘node’, function(Y) { //...};);
觀念 4:依照慣例,習慣用 Y 來代表YUI 的例項。與 YUI 2.x 的 YAHOO 相似!
習慣用 Y 作為 YUI 的例項
習慣用 Y 作為 YUI 的例項
YUI 2.xYAHOO 作為全域變數、沒有例項<script type=”text/javascript” src=”...”></script><script type=”text/javascript”> var oDD = new YAHOO.util.DD(‘foo’);</script>
習慣用 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’);};);
觀念 5:YUI 3.x 與 YUI 2.x 可以輕易地放到同一頁、甚至同個 YUI Instance 中!
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 功能
});
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.
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 就有了
YUI 物件的 5 大概念
YUI 物件的 5 大概念
1.兩種引用函式庫的方式
YUI 物件的 5 大概念
1.兩種引用函式庫的方式
2.是 Instance-based
YUI 物件的 5 大概念
1.兩種引用函式庫的方式
2.是 Instance-based
3. YUI 是建構式
YUI 物件的 5 大概念
1.兩種引用函式庫的方式
2.是 Instance-based
3. YUI 是建構式
4.習慣用 Y 來代表 YUI 的例項
YUI 物件的 5 大概念
1.兩種引用函式庫的方式
2.是 Instance-based
3. YUI 是建構式
4.習慣用 Y 來代表 YUI 的例項
5. YUI 2.x 與 YUI 3.x 可以一起使用
Node & NodeList
封包 DOM + Selector 物件後的抽象層統一存取介面並增加新功能
More ConsistentMore Powerful
id
觀念 1:藉由 Selector 工具,提供了用 CSS Selector 取得 DOM 物件的介面
用 CSS Selector 取得物件
用 CSS Selector 取得物件
YUI 2.x用 DOM 物件不太方便var $D = YAHOO.util.Dom; // reference cachevar el = $D.get(‘foo’); var items = $D.getElementsByClassName(‘highlighted’, ‘li’, el);
用 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’);
觀念 2:Node 或 NodeList 會將物件封裝,非原本的 HTMLElement。修復了不一致的問題且增加強
大的功能!
用 CSS Selector 取得物件
用 CSS Selector 取得物件YUI 2.x用 DOM 工具取得的物件或集合仍然是 HTMLElement。var $D = YAHOO.util.Dom; // reference cachevar el = $D.get(‘foo’);alert(el.nodeName); //output: DIV
用 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
YUI Node HTMLElement
封裝後的差異比較
YUI Node• appendChild()• removeChild()• parentNode
HTMLElement• appendChild()• removeChild()• parentNode
封裝後的差異比較
YUI Node• appendChild()• removeChild()• parentNode
• contains()• insertBefore()• children
HTMLElement• appendChild()• removeChild()• parentNode
• contains()• insertBefore()• children
封裝後的差異比較
YUI Node• appendChild()• removeChild()• parentNode
• contains()• insertBefore()• children
• addClass()• test()• region
HTMLElement• appendChild()• removeChild()• parentNode
• contains()• insertBefore()• children
封裝後的差異比較
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.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’;
觀念 3:Node 的方法,在 NodeList也都可以使用!
NodeList 與 Node
NodeList 與 Node
NodeaddClass 方法var el = Y.get(‘#foo’);el.addClass(‘main-module’);
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’);
Node 物件的 3 大概念
Node 物件的 3 大概念
1. Node 提供更有效率的 Selector 存取方式
Node 物件的 3 大概念
1. Node 提供更有效率的 Selector 存取方式
2.在 DOM 之上封裝新介面,解決不一致的問題、並強化功能。
Node 物件的 3 大概念
1. Node 提供更有效率的 Selector 存取方式
2.在 DOM 之上封裝新介面,解決不一致的問題、並強化功能。
3. NodeList 的方法是批次操作
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.
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
Event 物件
在 DOM Event 上建立的抽象層所有的事件都是 Custom Event
More Consistent
觀念 1:提供了簡易的介面,讓訂閱 DOM 的 Event 很容易
事件的綁法
事件的綁法
方法一:Y.on()YUI().use(‘node’, function (Y) { Y.on(‘click’, function (e) { // 處理事件 }, ‘#foo’);});
事件的綁法
方法一: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) { // 處理事件 });});
觀念 2:跟 Node 相似,Event 物件也被封裝成一個物件介面,
而非過去單純的 DOM Event
封裝過後的 Event
封裝過後的 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’);
觀念 3:YUI 3.x 的所有事件都是Custom Event
製作元件常會使用自訂事件
製作元件常會使用自訂事件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 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 都經過這樣的包裝
好處是不會混淆、更多功能
自定事件有提供 before 與 after 的事件
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 的事件
觀念 4:跟 DOM Event 一樣,Customer Event 也提供了 preventDeafult 與stopPropagation 方法
Custom Event 一樣不少
YUI().use("drag", function(Y) { var drag = new Y.Drag({
node: ‘#demo’});
drag.on("drag:mouseDown", function(e) { e.preventDefault(); e.stopPropagation(); });});
Custom Event 一樣不少
Event 物件的 4 大概念
Event 物件的 4 大概念
1.簡易的綁事件介面
Event 物件的 4 大概念
1.簡易的綁事件介面
2.事件物件被封裝、變得更物件導向
Event 物件的 4 大概念
1.簡易的綁事件介面
2.事件物件被封裝、變得更物件導向
3.所有的事件都是 Custom Event
Event 物件的 4 大概念
1.簡易的綁事件介面
2.事件物件被封裝、變得更物件導向
3.所有的事件都是 Custom Event
4. Custom Event 也是可 bubble、preventable、與有 after moment
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.
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
元件架構
屬性管理、繼承與 Lifecycle是建立 YUI 3.x 元件的基礎
More Consistent
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.
YUI 3.x Miscs.
DebugIO
QueueMore Powerful
Debug Enhancement
• YUI 2.x:要用哪一個?
• alert()
• YAHOO.log()
• console.log()
• YUI 3.x:統一用 Y.log()、Y.dump()
alert() 最簡單,但是干擾性太大
Firebug 的 console.log() 很好用!但只有 Firefox 支援、在其他瀏覽器會發生錯誤
YUI 2.x 的 YAHOO.log() 可跨瀏覽器!但不裝 Logger 就什麼都看不到...
YUI 2.x:Debugging with YAHOO.log()
YAHOO.log(dItem.innerHTML);
YUI 3.x: Y.log()1. 跨瀏覽器。2. 有 Firebug 會直接寫入 Console 中。
YUI 3.x:Debugging with Y.log()
Y.log(el.get(‘innerHTML’));
IO & Queue
• IO:原本的 Connection Manager,多了跨網域存取資料的功能。
• Queue:工作排程
IO 的跨網域存取
• Resource 端必須有 crossdomain.xml
• Pipes 有提供:http://pipes.yahooapis.com/crossdomain.xml
• 在你的 Server 上放置 io.swf
• 設定 xdr (cross domain request)
用 YUI 3.x 寫 JavaScript
簡單的事件指派範例
YUI 3.x 架構基礎
從 DragDrop / IO / Animation了解 YUI 3.x 的架構方式
Lighter / Faster
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
Drag and Drop, minified, in KB
0
7.5
15.0
22.5
30.0
2.x 3.x
Drag & Drop DDM BaseDD Drag
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
Ajax component, minified, in KB
0
3.75
7.50
11.25
15.00
Connection Manager IO
2.x 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
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
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
3.x 的釋出計畫
3.x Roadmap2008/11:3.0 PR2 控制項的架構
2009 第一季:3.0 Beta所有 2.x 的工具組
More information:http://tech.groups.yahoo.com/group/yui3/
http://developer.yahoo.com/yui/3/
http://developer.yahoo.com/yui/community/
整體 YUI 的釋出計畫
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
• YUI 2.x 分散式架構、初學者上手難。
• YUI 3.x 把原本 Optional 的 Loader、Element、Selector 改為內建,使用語法因此大幅修改。
• Usable v.s. Professional 的妥協
Conclusion