0
YUI 3.x 简介  拔赤 bachi@taobao.comhttp://www.uedagazine.com        2010-06-03
YUI 体系   YUI 2.x             YUI 3.xYUI Compressor   Combo HandlerYUI PHP Loader     YUI Builder   YUI Test            Yslow
http://developer.yahoo.com/yui/3/
•   YUI 2.x的发展•   YUI 3.x初探•   YUI 3.x新手入门•   Node & NodeList•   YUI 3.x中的OO•   YUI 3.x中的杂项
• YUI 2.x的发展•   YUI 3.x初探•   YUI 3.x新手入门•   Node & NodeList•   YUI 3.x中的OO•   YUI 3.x中的杂项
库时代…2005 - prototype,dojo2006 - jquery,yui,mootools2007 - ext2008 - QooXDoo2009 - …
“库”所作的事情1,初级封装(Dom,Event,Ajax)2,中级封装(拖拽、动画)3,高级封装(widget)(日历,Treeview)4,扩展性(OOP,Plugin。。。)
YUI 2.x的发展• 2006/2/13 YUI beta(0.10.0)• ~• 2009/9/14 YUI 2.8.0
YUI 2.x 的特色1,完整的工具集(使用方便)2,颗粒化设计(团队开发)3,强沙箱(不仅仅是闭包)4,yui combo(性能提升)
• YUI 2.x的发展• YUI 3.x初探•   YUI 3.x新手入门•   Node & NodeList•   YUI 3.x中的OO•   YUI 3.x中的杂项
对YUI的一次彻底重构   YUI3.x的架构
YUI 3.x的发展2008/8/13 YUI3 pr12008/12/9 YUI3 pr22009/6/24 YUI3 beta12009/9/26 YUI3 12010 …
增强的YUI1,加强工具集(强化了的工具集)2,彻底的模块化设计(模块间的解耦)3,YUI组件模板(规格统一的组件模型)4,更简洁的语法(书写阅读更流畅)5,更完整的底层机制(AOP、CustomEvent、Plugin)
YUI 2.x 的书写风格
YUI 3.x的书写风格
YUI 3.x 架构•   Seed•   Core•   Component Framework•   Component•   Widgets
Seed种子开发者只需要加载种子就可以获得YUI的所有组件
Core库核心包含Dom,Event和新的Node
Component Framework       组件框架       开发widgets的基本框架
Component工具、控制包含工具、特效、控制项
• YUI 2.x的发展• YUI 3.x初探• YUI 3.x新手入门• Node & NodeList• YUI 3.x中的OO• YUI 3.x中的杂项
观念1• 使用YUI3.x有两种方法 – 用Seed加载 – 用传统的Script引用法
Seed方法<script src="yui/3.0.0/build/yui/yui‐min.js"></script><script>YUI().use(node,function(Y){       /*              Y就是这...
传统Script方法http://developer.yahoo.com/yui/3/configurator/
观念2• YUI3.x是Instance-based  – 每个Instance都是相互独立    且互不干扰的
Instace-based - 可实例化• YUI 2.x  – YAHOO作为全局变量,只能有一个,很容易    被修改  YAHOO.widget.Editor = DoSth;//开发者A写的  ...  YAHOO.widget.Edi...
同一个页面中多个App的实现    http://my.yahoo.com/
同一个页面中多个App的实现  http://xiaoshuo.taobao.com/
Instace-based 的优势1,一个页面上有多个程序2,每个Scope有自己的YUI Instance,只带 有所需的组件3,每个Instance相互独立,方便多人开发4,Sandbox可以提供安全的闭包5,每个Instance的YUI3...
观念3• YUI可以被用作构造器 – 轻易变身
YUI构造器• 推荐的写法 YUI().use(node,function(Y){        //.. });• 也可以这样写 var QQ = YUI();//生成一个新的YUI实例 QQ.use(node,function(Q){   ...
观念4• YUI3.x可以将任意库框架进来 – YUI3.x是框架,非库
YUI3.x可以将任意库框架进来YUI({     modules:{           jquery:{                fullpath:jquery.js           }     }}).use(jquery,fu...
YUI3.x的四大观念1,两种引入方式2,每个Scope中有独立的实例3,YUI的两种构造风格5,YUI3.x可以框架住任何库
• YUI 2.x的发展• YUI 3.x初探• YUI 3.x新手入门• Node & NodeList• YUI 3.x中的OO• YUI 3.x中的杂项
Selector• YUI 2.x  var D = YAHOO.util.Dom;  var el = D.get(foo);  var items =   D.getElementsByClassName(selected,li,el);•...
对Dom的Wrap• YUI 2.x 用DOM取到的依然是TMLElement  var D = YAHOO.util.Dom;  var el = D.get(foo);  alert(el.nodeName);• YUI 3.x  var ...
封装前后的比较   YUI Node       HTMLElementappendChild()    appendChild()removeChild()    removeChild()parentNode       parentNod...
统一的接口• Node  – addClass方法  var el = Y.one(#foo)  el.addClass(red);• NodeList  – addClass方法  var items = Y.all(#foo li);  i...
Event• 事件绑定方法1 Y.on(click,function(e){      //处理事件 },#foo);• 事件绑定方法2 var el = Y.one(#foo); el.on(click,function(e){      /...
Event - 被封装后的“事件”• YUI3.x对事件做了封装,而非单纯的DOM  Event
被封装后的“事件”• YUI 2.x  var E = YAHOO.util.Event;  E.on(foo,click,function(e){       alert(e);//click       E.stopEvent(e);//阻...
YUI3的所有事件都是CustomEvent• YUI 3.x var el = Y.one(#foo); el.on(click,function(e){      //.. }); var p = new Y.Calendar(#calen...
• YUI 2.x的发展• YUI 3.x初探• YUI 3.x新手入门• Node & NodeList• YUI 3.x中的OO• YUI 3.x中的杂项
YUI 3.x中的OO• 对象 – Y.clone(克隆) – Y.merge(合并) – Y.aggregate(挂载)• 函数 – Y.augment(扩充类) – Y.extend(继承) – Y.bind(绑定上下文)• 基础 – Y....
• YUI 2.x的发展•   YUI 3.x初探•   YUI 3.x新手入门•   Node & NodeList•   YUI 3.x中的OO• YUI 3.x中的杂项
YUI 3.x中的杂项• Debug• IO• Queue
Debug• YUI 2.x  – alert()  – YAHOO.log()  – console.log()  – YAHOO.dump()• YUI 3.x  – Y.log()  – Y.dump()
IO & Queue• IO  – YUI2.x的Connection,增加了flash跨域• Queue  – 异步队列
YUI 3.x的设计线索1,YUI2.x 分散式架构、初学者理解困难2,YUI3.x 内建YUI2.x的Loader、Element、 Selector3,易用性 和 专业性之间的权衡
Q&A
Upcoming SlideShare
Loading in...5
×

Yui3简介

1,681

Published on

YUI3

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,681
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
54
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Yui3简介"

  1. 1. YUI 3.x 简介 拔赤 bachi@taobao.comhttp://www.uedagazine.com 2010-06-03
  2. 2. YUI 体系 YUI 2.x YUI 3.xYUI Compressor Combo HandlerYUI 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,dojo2006 - jquery,yui,mootools2007 - ext2008 - QooXDoo2009 - …
  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 pr12008/12/9 YUI3 pr22009/6/24 YUI3 beta12009/9/26 YUI3 12010 …
  13. 13. 增强的YUI1,加强工具集(强化了的工具集)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 HTMLElementappendChild() appendChild()removeChild() removeChild()parentNode parentNodecontains() contains()insertBefore() insertBefore()children childrenaddClass()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(绑定上下文)• 基础 – Y.mix(混淆)
  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、 Selector3,易用性 和 专业性之间的权衡
  51. 51. Q&A
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×