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

Yui3简介

on

  • 1,653 views

YUI3

YUI3

Statistics

Views

Total Views
1,653
Views on SlideShare
1,607
Embed Views
46

Actions

Likes
4
Downloads
52
Comments
0

1 Embed 46

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

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简介 Yui3简介 Presentation Transcript

    • 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就是这个Scope中 的YUI实例,可以通过Y来 获取相关方法 */ Y.get(#demo);});</script>
    • 传统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.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写的 });
    • 同一个页面中多个App的实现 http://my.yahoo.com/
    • 同一个页面中多个App的实现 http://xiaoshuo.taobao.com/
    • Instace-based 的优势1,一个页面上有多个程序2,每个Scope有自己的YUI Instance,只带 有所需的组件3,每个Instance相互独立,方便多人开发4,Sandbox可以提供安全的闭包5,每个Instance的YUI3.x的版本可以不同
    • 观念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,function(Y){ $(#foo).toggle(myClass);});
    • 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);• YUI 3.x var items = Y.all(#foo li.selected);
    • 对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
    • 封装前后的比较 YUI Node HTMLElementappendChild() appendChild()removeChild() removeChild()parentNode parentNodecontains() contains()insertBefore() insertBefore()children childrenaddClass()toggleClass()region
    • 统一的接口• Node – addClass方法 var el = Y.one(#foo) el.addClass(red);• NodeList – addClass方法 var items = Y.all(#foo li); items.addClass(red);
    • 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);//阻止冒泡 });• YUI 3.x Y.on(click,function(e){ alert(e.type);//undefined e.halt();//阻止冒泡 },#foo);
    • 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){ //.. });
    • • 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.mix(混淆)
    • • 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