YDN KR Tech Talk : YUI 3.0
•Descargar como PPT, PDF•
6 recomendaciones•1,389 vistas
YUI() - An Introduction to YUI 3 by Jenny Han Donnelly , YUI Library Team , Yahoo Sunnyvale Introducing YUI 3 Lighter,Easier, Faster The Sandbox Model Optimized Loading Protection from Other Modules Sub-Module Architecture Extension and Plugin Architecture YUI 3 Node API The Event System Read http://developer.yahoo.com/yui/3 Discuss http://yuilibrary.com/forum/viewforum.php?f=15 http://github.com/yui/yui3/tree/master
![YUI Library Overview ,[object Object],[object Object],[object Object],[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recomendados
Más contenido relacionado
Destacado
Destacado (18)
Similar a YDN KR Tech Talk : YUI 3.0
Similar a YDN KR Tech Talk : YUI 3.0 (20)
Más de Jinho Jung
Más de Jinho Jung (20)
YDN KR Tech Talk : YUI 3.0
- 1. YUI() An Introduction to YUI 3 Jenny Han Donnelly YUI Library
- 5. The Sandbox Model <script src="yui-min.js"> <script> YUI().use("anim", function(Y) { ... }); </script>
- 11. Extension and Plugin Architecture Overlay Tooltip myOverlay Positioning Adv. Positioning Shimming/Stacking Header/Body/Footer Animation IO Binding Widget
- 12. The Node Wrapper
- 18. Constrainable Node is the single point of access to the DOM. Makes YUI 3 ideal as a trusted source for "constrained" environments like Caja and Ad-safe.
- 19. NodeList * The Costco to Node’s Kwik-E Mart var items = Y. all (".actions li"); items.addClass("disabled"); items.set("title", "Item Disabled"); items.each(function(node) { node.addClass("disabled); node.set("title", "Item Disabled"); });
- 21. The Event System
- 22. Event Listeners & Event Facades // Dom Event myElement.on("click", function( e ) { if (! e.target .hasClass("disabled")) { e.preventDefault() ; } }); // Custom Event myWidget.on("select", function( e ) { if ( e.newVal < 200) { e.preventDefault() ; } });
- 23. Detaching Listeners // YUI 3 var handle = overlay.on("show", myShowHandler); handle .detach(); // Or overlay.on(" myapp|show ", myShowHandler); overlay.on(" myapp|hide ", myHideHandler); overlay.detach(" myapp|show "); overlay.detach(" myapp|* ");
- 24. Custom Event Flow: On/Default/After On On Default Behavior After After After this.fire("select"); e.stopImmediatePropagation(); e.preventDefault(); e.stopImmediatePropagation();
- 25. DOM Event Delegation Y.on("delegate", function(e) { e.target.addClass("selected") }, "ul", "click", "li");
- 26. Custom Event Delegation Menu MenuItem On On Def. Behavior After After After this.fire("menuitem:select") On Def. Behavior After After e.stopPropagation()
Notas del editor
- Started 2005. Open sourced in 2006. 2.7.0 is current release. Mature and stable framework deployed across Yahoo! and all over the world. Incredible documentation. Active developer community.
- YUI 3 is the next generation of the YUI codebase. It's the culmination of all the lessons we've learned from building YUI 2, and reflects the years of developer feedback we have received, as well as the latest and greatest front-end best practices. Lighter Emphasis on Code Reuse: Common Base, Plugins, Extensions Finer Grained Modules/Sub-Modules Easier Developer conveniences: flatter namespace, chainability, language enhancements, batch operations Consistent API Faster Loading Runtime performance
- Our sandbox model provides your own protected YUI environment with a built-in closure.
- The seed file defines the YUI global object. The YUI() statement returns an instance of YUI, which we call Y. The use() statement: Defines the modules to be loaded Loads them into the environment
- An asynchronous call is made to load the files without blocking. The dependencies are managed for you. By default, all the files are minified and combo-handled into a single HTTP request.
- Instances are now tied to a specific version of YUI. For example, if a web pages has a &quot;finance&quot; application on a portal page it will be tied to YUI version 3.4. If a &quot;movies&quot; application is loaded later on the same page, its code is tied to YUI version 3.0. Each sandbox's YUI version is protected from other code on the page. Currently your YUI() instance is tied to the library version at execution-time. In the future, we expect to support dynamic versioning.
- The YUI Buffet In YUI 3, you can pick and choose with a lot more granularity what you want to load on your page wth our new sub-module architecture.
- Sub-modules allow you to target specific functionality, without loading code you don't need. For instance, the IO utility consists of 5 sub-modules. You can load sub-modules independently in conjunction with one another as a rollup
- Not only is IO smaller in YUI 3 than in YUI 2, pulling in only the sub-modules you need can save you significant bandwidth as well. You'll see this kind of footprint optimization across every component in the library.
- In YUI, the Overlay class was harded coded with this set of functionality. Tooltip, which is a subclass of Overlay only needed a subset of the functionality but inherited the whole set anyway. In YUI 3, we have refactored classes and functionality to be more loosely coupled. Overlay now consists of 4 class extensions. Anim and IO are now instance plugins. Tooltip no longer needs to extend Overlay, it can use just the extensions that it needs.
- Node is a wrapper API for DOM elements. It provides a centralized, convenient, securable interface for working with DOM elements.
- In YUI 3 you are working with Node instances rather than directly with the DOM element. You can call methods on it directly rather than having to call a static method. You can add event handlers direclty also. These methods are chainable.
- Node supports the standard methods and properties of the HTMLElement API. Most methods are mapped directly. Properties are accessed through getter and setter methods.
- Certain DOM APIs are implemented inconsistently across the a-grade browsers. Node normalizes these inconsistencies into a single API.
- Node adds convenience APIs that are not in the DOM spec. Node exposes change events.
- Plugins add application-specific features to Nodes.
- A single point of access to the DOM API makes YUI 3 ideal as a trusted source in &quot;constrained&quot; environments such as Caja and Ad-Safe.
- The NodeList API is used to batch Node operations. The static method Node.all() returns a NodeList. The each() method accepts a custom batch function. A NodeList is not a live collection like a DOM collection. It is an array of Nodes that is a snapshot in time.
- The Custom Event system has been enhanced in YUI 3 to be lighter and more useful. This system drives the modular code architecture of the rest of the library.
- Event facades are normalized event objects passed to event handlers. They also pass important data values to custom event handlers.
- There are several different ways to detach event handlers in YUI 3: The on() method returns a value that can be stored and used to detach later. The on() method accepts a namespace prefix to an event that can be used to detach handlers. A wildcard may be used to detach all handlers assigned to a namespace.
- stopImmediatePropagation() stops any subsequent on and after listeners, but does not affect the default behavior. (also prevents bubbling.) preventDefault() prevents the default behavior. stopPropagation() only affects bubbling.
- Event delegation is a technique where events are handled by a single parent element instead of many child elements. Here, a Menu class manages multiple menuitem children. When the class initializes, it listens for the &quot;menuitem:select&quot; event to execute the selection function. In addItem(), each menuitem is registering the parent Menu as an event bubble target with addTarget(). Now whenever a menuitem fires a select event, it is handled by the parent Menu class. We can code a specific override as well, so that if the third menuitem is selected, that doesn't get bubbled to the parent's handler. Ideal for parent/child or manager/managed relationships
- Bubble notification flow for Menu/MenuItem example.