yui3 is Sexy - 使用 YUI 3 的 Sexy Part !
9 likes•9,060 views
This document discusses the benefits of using the YUI library for JavaScript development. It highlights features like the YUI loader, widget architecture based on Base and plugins, and utilities for DOM manipulation, events, animation and more. The document also mentions how YUI supports progressive enhancement, accessibility, internationalization and building scalable web applications.
yui3 is Sexy - 使用 YUI 3 的 Sexy Part !
- 1. yui3 is sexy
- 2. Use yui3 Sexy Part
- 3. Most programming languages contain good parts and bad parts. I discovered that I could be a better programmer by using only the good parts and avoiding the bad parts. Yahoo! JavaScript Architect Douglas Crockford http://www.yuiblog.com/blog/2008/05/05/crockford-inheritance/
- 4. YUI3 JavaScript YUI miiiCasa
- 6. YUI().use() CDN Sexy YUI().use() + pulling code off of Yahoo's CDN is damn sexy and should be promoted *VERY* heavily. The creator of jQuery John Resig http://www.quora.com/How-could-YUI3-improve-its-image-compared-to-jQuery-MooTools-etc
- 7. YUI Seed <script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script> YUI Wigets Dial <script> YUI().use(“dial”, function (Y) { (new Y.Dial()).render(); }); </script>
- 8. <!DOCTYPE html> <html> <meta charset=”utf-8”> <script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script> <script> YUI().use(“dial”, function (Y) { (new Y.Dial()).render(); }); </script> <body class=”yui3-skin-sam”></body> </html> Wow! JavaScript CSS? ?
- 9. YUI3 <!DOCTYPE html> <html> <meta charset=”utf-8”> <script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script> <script> YUI().use(“dial”, function (Y) { (new Y.Dial()).render(); }); </script> <body class=”yui3-skin-sam”></body> </html>
- 10. YUI Dial http://josephj.com/training/hinet/yui-dial.html YUI().use(“dial”) modules (new Y.Dial()).render(<selector>); YUI 3 Dial
- 11. YUI 3 Loader yui-min.js CSS Sexy ?
- 13. • Attribute • Base Attribute Utility • Plugin Base Instance • Extension Base Class • Widget Base Widget
- 15. JavaScript set attribute Object
- 16. YUI YUI
- 17. jQuery $(“#foo”).content(); $(“#foo”).content(“blah blah”); $(“#foo-link”).attr(“title”); $(“#foo-link”).attr(“title”, “blah blah”); set get Native JavaScript Unit Test
- 18. YUI Y.one(“#foo”).get(“innerHTML”); Y.one(“#foo”).setContent(“blah blah”); Y.one(“#foo-link”).getAttribute(“title”); Y.one(“#foo-link”).setAttribute(“title”, “blah blah”); Native JavaScript Douglas Crockford “YUI helps you learn JavaScript.” :)
- 20. Scalability Stacks
- 21. YUI For scalable web applications, YUI really excels. Principal Front End Engineer, Yahoo! Nicholas Zakas http://www.nczonline.net/blog/2010/11/03/response-to-john-resigs-comments-about-yui/
- 22. Yahoo! JavaScript Semantic Accessibility Widget Customization Usability Progressive Enhancement Performance
- 23. • YUI Test • YUI DataType JavaScript • YUI Docs JavaScript API • YUI Profiler • YUI Build Building Blocks • YUI Compressor JS/CSS • YUI I18N
- 24. Progressive Enhancement module
- 25. YUI History http://developer.yahoo.com/yui/3/history HTML 5, Flash, Google Gear