Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

yui3 is Sexy - 使用 YUI 3 的 Sexy Part !

11,284 views

Published on

還沒寫完的投影片,先丟出來。

Published in: Technology
  • Login to see the comments

yui3 is Sexy - 使用 YUI 3 的 Sexy Part !

  1. 1. yui3 is sexy
  2. 2. Use yui3 Sexy Part
  3. 3. Most programming languagescontain good parts and bad parts. Idiscovered that I could be a betterprogrammer by using only the goodparts and avoiding the bad parts. Yahoo! JavaScript Architect Douglas Crockford http://www.yuiblog.com/blog/2008/05/05/crockford-inheritance/
  4. 4. YUI3JavaScript YUI miiiCasa
  5. 5. Seed and Loader
  6. 6. YUI().use() CDN Sexy YUI().use() + pulling code off of Yahoos CDN is damn sexy and should be promoted *VERY* heavily. The creator of jQueryJohn Resighttp://www.quora.com/How-could-YUI3-improve-its-image-compared-to-jQuery-MooTools-etc
  7. 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. 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. 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. 10. YUI Dialhttp://josephj.com/training/hinet/yui-dial.html YUI().use(“dial”) modules (new Y.Dial()).render(<selector>); YUI 3 Dial
  11. 11. YUI 3 Loaderyui-min.js CSS Sexy ?
  12. 12. OOP JavaScript Developer
  13. 13. • Attribute• Base Attribute Utility• Plugin Base Instance• Extension Base Class• Widget Base Widget
  14. 14. http://josephj.com/entry.php?id=257
  15. 15. JavaScript set attribute Object
  16. 16. YUI YUI
  17. 17. jQuery $(“#foo”).content(); $(“#foo”).content(“blah blah”); $(“#foo-link”).attr(“title”); $(“#foo-link”).attr(“title”, “blah blah”); setget Native JavaScript Unit Test
  18. 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”); NativeJavaScript Douglas Crockford“YUI helps you learn JavaScript.” :)
  19. 19. http://hax.iteye.com/blog/850778
  20. 20. Scalability Stacks
  21. 21. YUI For scalable web applications, YUI really excels. Principal Front End Engineer, Yahoo! Nicholas Zakashttp://www.nczonline.net/blog/2010/11/03/response-to-john-resigs-comments-about-yui/
  22. 22. Yahoo! JavaScript Semantic Accessibility WidgetCustomization Usability ProgressiveEnhancement Performance
  23. 23. • YUI Test • YUI DataType JavaScript• YUI Docs JavaScript API• YUI Profiler• YUI Build Building Blocks• YUI Compressor JS/CSS• YUI I18N
  24. 24. Progressive Enhancement module
  25. 25. YUI Historyhttp://developer.yahoo.com/yui/3/historyHTML 5, Flash, Google Gear
  26. 26. YUI 2 Storagehttp://developer.yahoo.com/yui/storageHTML 5, SWF, Google Gear
  27. 27. Sematic & Standard
  28. 28. Thank Youhttp://developer.yahoo.com/yui/ josephj6802@gmail.com

×