Successfully reported this slideshow.

Yui3 初探

3,658 views

Published on

Published in: Technology, Business
  • Be the first to comment

Yui3 初探

  1. 1. YUI 3.x 简介 拔赤 bachi@taobao.com http://www.uedagazine.com 2010-06-03
  2. 2. YUI 体系 YUI 2.x YUI 3.x YUI Compressor Combo Handler YUI PHP Loader YUI Builder YUI Test Yslow
  3. 3. http://developer.yahoo.com/yui/3/
  4. 4. YUI 2.x的发展 YUI 3.x初探 YUI 3.x新手入门 Node & NodeList YUI 3.x中的OO YUI 3.x中的杂项
  5. 5. YUI 2.x的发展 YUI 3.x初探 YUI 3.x新手入门 Node & NodeList YUI 3.x中的OO YUI 3.x中的杂项
  6. 6. 库时代… 2005 - prototype,dojo 2006 - jquery,yui,mootools 2007 - ext 2008 - QooXDoo 2009 - …
  7. 7. “库”所作的事情 1,初级封装(Dom,Event,Ajax) 2,中级封装(拖拽、动画) 3,高级封装(widget)(日历,Treeview) 4,扩展性(OOP,Plugin。。。)
  8. 8. YUI 2.x的发展 2006/2/13 YUI beta(0.10.0) ~ 2009/9/14 YUI 2.8.0
  9. 9. YUI 2.x 的特色 1,完整的工具集(使用方便) 2,颗粒化设计(团队开发) 3,强沙箱(不仅仅是闭包) 4,yui combo(性能提升)
  10. 10. YUI 2.x的发展 YUI 3.x初探 YUI 3.x新手入门 Node & NodeList YUI 3.x中的OO YUI 3.x中的杂项
  11. 11. 对YUI的一次彻底重构 YUI3.x的架构
  12. 12. YUI 3.x的发展 2008/8/13 YUI3 pr1 2008/12/9 YUI3 pr2 2009/6/24 YUI3 beta1 2009/9/26 YUI3 1 2010 …
  13. 13. 增强的YUI 1,加强工具集(强化了的工具集) 2,彻底的模块化设计(模块间的解耦) 3,YUI组件模板(规格统一的组件模型) 4,更简洁的语法(书写阅读更流畅) 5,更完整的底层机制(AOP、CustomEvent、Plugin)
  14. 14. YUI 2.x 的书写风格
  15. 15. YUI 3.x的书写风格
  16. 16. YUI 3.x 架构 Seed Core Component Framework Component Widgets
  17. 17. Seed 种子 开发者只需要加载种子就 可以获得YUI的所有组件
  18. 18. Core 库核心 包含Dom,Event和新的 Node
  19. 19. Component Framework 组件框架 开发widgets的基本框架
  20. 20. Component 工具、控制 包含工具、特效、控 制项
  21. 21. YUI 2.x的发展 YUI 3.x初探 YUI 3.x新手入门 Node & NodeList YUI 3.x中的OO YUI 3.x中的杂项
  22. 22. 观念1 使用YUI3.x有两种方法 用Seed加载 用传统的Script引用法
  23. 23. Seed方法 <script src="yui/3.0.0/build/yui/yui-min.js"></script> <script> YUI().use('node',function(Y){ /* Y就是这个Scope中 的YUI实例,可以通过Y来 获取相关方法 */ Y.get('#demo'); }); </script>
  24. 24. 传统Script方法 http://developer.yahoo.com/yui/3/configurator/
  25. 25. 观念2 YUI3.x是Instance-based 每个Instance都是相互独立 且互不干扰的
  26. 26. Instace-based - 可实例化 YUI 2.x YAHOO作为全局变量,只能有一个,很容易 被修改 YAHOO.widget.Editor = DoSth;//开发者A写的 ... YAHOO.widget.Editor = DoNoth;//开发者B写的 YUI 3.x YUI() 闭包中的Y是一个全新的实例 YUI().use('editor',function(Y){ Y.Editor = DoSth;//开发者A写的 }); YUI().use('rich-editor',function(Y){ Y.Editor = DoNoth;//开发者B写的 });
  27. 27. 同一个页面中多个App的实现 http://my.yahoo.com/
  28. 28. 同一个页面中多个App的实现 http://xiaoshuo.taobao.com/
  29. 29. Instace-based 的优势 1,一个页面上有多个程序 2,每个Scope有自己的YUI Instance,只带有 所需的组件 3,每个Instance相互独立,方便多人开发 4,Sandbox可以提供安全的闭包 5,每个Instance的YUI3.x的版本可以不同
  30. 30. 观念3 YUI可以被用作构造器 轻易变身
  31. 31. YUI构造器 推荐的写法 YUI().use('node',function(Y){ //.. }); 也可以这样写 var QQ = YUI();//生成一个新的YUI实例 QQ.use('node',function(Q){ //.. });
  32. 32. 观念4 YUI3.x可以将任意库框架进来 YUI3.x是框架,非库
  33. 33. YUI3.x可以将任意库框架进来 YUI({ modules:{ jquery:{ fullpath:'jquery.js' } } }).use('jquery',function(Y){ $('#foo').toggle('myClass'); });
  34. 34. YUI3.x的四大观念 1,两种引入方式 2,每个Scope中有独立的实例 3,YUI的两种构造风格 5,YUI3.x可以框架住任何库
  35. 35. YUI 2.x的发展 YUI 3.x初探 YUI 3.x新手入门 Node & NodeList YUI 3.x中的OO YUI 3.x中的杂项
  36. 36. Selector YUI 2.x var D = YAHOO.util.Dom; var el = D.get('foo'); var items = D.getElementsByClassName('selected','li', el); YUI 3.x var items = Y.all('#foo li.selected');
  37. 37. 对Dom的Wrap YUI 2.x 用DOM取到的依然是TMLElement var D = YAHOO.util.Dom; var el = D.get('foo'); alert(el.nodeName); YUI 3.x var el = Y.one('#foo'); alert(el.nodeName);//undefined alert(el.get('NodeName'));//DIVs
  38. 38. 封装前后的比较 YUI Node HTMLElement appendChild() appendChild() removeChild() removeChild() parentNode parentNode contains() contains() insertBefore() insertBefore() children children addClass() toggleClass() region
  39. 39. 统一的接口 Node addClass方法 var el = Y.one('#foo') el.addClass('red'); NodeList addClass方法 var items = Y.all('#foo li'); items.addClass('red');
  40. 40. Event 事件绑定方法1 Y.on('click',function(e){ //处理事件 },'#foo'); 事件绑定方法2 var el = Y.one('#foo'); el.on('click',function(e){ //处理事件 });
  41. 41. Event - 被封装后的“事件” YUI3.x对事件做了封装,而非单纯的DOM Event
  42. 42. 被封装后的“事件” YUI 2.x var E = YAHOO.util.Event; E.on('foo','click',function(e){ alert(e);//click E.stopEvent(e);//阻止冒泡 }); YUI 3.x Y.on('click',function(e){ alert(e.type);//undefined e.halt();//阻止冒泡 },'#foo');
  43. 43. YUI3的所有事件都是CustomEvent YUI 3.x var el = Y.one('#foo'); el.on('click',function(e){ //.. }); var p = new Y.Calendar('#calendar'); p.on('range_select',function(e){ //.. });
  44. 44. YUI 2.x的发展 YUI 3.x初探 YUI 3.x新手入门 Node & NodeList YUI 3.x中的OO YUI 3.x中的杂项
  45. 45. YUI 3.x中的OO 对象 Y.clone(克隆) Y.merge(合并) Y.aggregate(挂载) 函数 Y.augment(扩充 类) Y.extend(继承) Y.bind(绑定上下 文) 基础
  46. 46. YUI 2.x的发展 YUI 3.x初探 YUI 3.x新手入门 Node & NodeList YUI 3.x中的OO YUI 3.x中的杂项
  47. 47. YUI 3.x中的杂项 Debug IO Queue
  48. 48. Debug YUI 2.x alert() YAHOO.log() console.log() YAHOO.dump() YUI 3.x Y.log() Y.dump()
  49. 49. IO & Queue IO YUI2.x的Connection,增加了flash跨域 Queue 异步队列
  50. 50. YUI 3.x的设计线索 1,YUI2.x 分散式架构、初学者理解困难 2,YUI3.x 内建YUI2.x的Loader、Element、 Selector 3,易用性 和 专业性之间的权衡
  51. 51. Q&A

×