Yui3 初探
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Yui3 初探

on

  • 3,988 views

 

Statistics

Views

Total Views
3,988
Views on SlideShare
3,888
Embed Views
100

Actions

Likes
8
Downloads
156
Comments
0

4 Embeds 100

http://www.haogongju.net 57
http://www.cnblogs.com 37
http://www.slideshare.net 4
http://blog.573114.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Yui3 初探 Presentation Transcript

  • 1. YUI 3.x 简介 拔赤 bachi@taobao.com http://www.uedagazine.com 2010-06-03
  • 2. YUI 体系 YUI 2.x YUI 3.x YUI Compressor Combo Handler YUI 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,dojo 2006 - jquery,yui,mootools 2007 - ext 2008 - QooXDoo 2009 - …
  • 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 pr1 2008/12/9 YUI3 pr2 2009/6/24 YUI3 beta1 2009/9/26 YUI3 1 2010 …
  • 13. 增强的YUI 1,加强工具集(强化了的工具集) 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 HTMLElement appendChild() appendChild() removeChild() removeChild() parentNode parentNode contains() contains() insertBefore() insertBefore() children children addClass() 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(绑定上下 文) 基础
  • 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、 Selector 3,易用性 和 专业性之间的权衡
  • 51. Q&A