Yui3简介
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Yui3简介

  • 1,879 views
Uploaded on

YUI3

YUI3

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,879
On Slideshare
1,833
From Embeds
46
Number of Embeds
1

Actions

Shares
Downloads
52
Comments
0
Likes
4

Embeds 46

http://wiki.ued.taobao.net 46

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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