打造高品质前端-YUI&YUI3

打造高品质前端 – YUI 应用张克军 http://hikejun.com http:// twitter.com/kejunz 资料下载 http://hikejun.com/sharing/YUI@tuling/yui.ppt

张克军 (Kejun)

前端工程师 /D2 委员会成员

雅虎中国 UED – 前端开发小组

主要负责前端开发流程、开发标准、品质提升

[email_address]

http://hikejun.com

http://twitter.com/kejunz

YIM: listenpro

GTalk: listenpro

1999.10

2002.12

2005.2

2007.5 (YUI) http://flickr.com/photos/kejun/521035874/sizes/o/in/set-72157594522105362/

雅虎中国的前端开发 2005 专职 F2E= 0 表格布局简单的 DHTML 无组织、无纪律的开发专职 F2E= 2 DIV 布局支持 GBS Ajax/ 丰富的交互体验建立规范 2008 专职 F2E= 12 ( 还在招募中… ) 团队协作开发品质提升统一的 FDP 2007 推广 YUI 至全部产品线

163.com qq.com sina.com.cn sohu.com xiaonei.com kaixin001.com youku.com cn.yahoo.com my.cn.yahoo.com

facebook.com gmail.com ymail.com yahoo.com msn.com myspace.com youtube.com

http://www.slideshare.net/cheilmann/the-role-of-java-script Christian Heilmann@WDN

伴随前端技术的演变开发中的问题也在随之改变

"The page is an application with a data connection to a server." - Douglas Crockford (Yahoo! 资深架构师 )

当前前端开发中要解决的问题协作开发高级页面布局 RIA 组件 (tabview, carousel, slideshow…) 高级 UI 效果 ( 圆角 , 阴影 , …) 性能体验 (UPP, PLT, CPU 消费 , 内存占用… ) 数据处理 (Ajax)

YUI 提供了一套完整的解决方案 http://YUILibrary.com

结构 ( 布局 ) 模块交互行为优化 / 测试维护提供超过 1000 种布局（详细 , 介绍）提供桌面软件风格的页面布局（详细） CSS Grids Layout Manager

结构 ( 布局 ) 模块交互行为优化 / 测试维护 RIA 控件 Button Calendar Color Picker Container (Module, Overlay, Panel, ToolTip, Dialog, SimpleDialog) Menu Slider Paginator Rich Text Editor Carousel AutoComplete TabView TreeView Charts DataTable Image Cropper Uploader

结构 ( 布局 ) 模块交互行为优化 / 测试维护 DOM Event Selector Global Object YAHOO.namespace, YAHOO.lang, YAHOO.env, YAHOO.log Element YUI Loader Get DataSource Browser History Manager Animation Drag&Drop Resize 基本开发元件 (Utility) StyleSheet Connection Manager JSON Cookie

结构 ( 布局 ) 模块交互行为优化 / 测试维护 Logger Control Profiler Profiler Viewer YUI Test Utility YUI Compressor

结构 ( 布局 ) 模块交互行为优化 / 测试维护 YUI Doc

YUI 是覆盖前端开发各个环节最全面的开源框架

YUI 太大 ?

YUI 2.6.0

开始使用 YUI 进行开发

YUI Grids Builder 快速创建页面布局更多介绍 http://layouts.ironmyers.com/

使用 YUILoader 管理项目文件 http://cn.yui.yahooapis.com/2.6.0/build/yuiloader/yuiloader-min.js (27.6K) Global Object YAHOO.namespace, YAHOO.lang, YAHOO.env, YAHOO.log YUI Loader Get

var loader = new Y.util.YUILoader({ base: 'http://cn.yui.yahooapis.com/2.6.0/build/', loadOptional: true, require: ['event', 'selector', 'carousel'], onSuccess: function(){ YS = Y.util.Selector; YD = Y.util.Dom; YE = Y.util.Event; YD.addClass(document.body, 'yui-skin-sam'); Y.flickrSearch.init(); } }); loader.insert();

loader.addModule({ name:'crumb', type:'js', fullpath:'http://cn.yimg.com/i/sns/js/crumb_1_0_0_min.js' }); loader.addModule({ name:'sns_base', type:'js', fullpath:'http://cn.yimg.com/i/sns/js/snsbase_1_0_8_min.js', requires:['dom', 'event'] }); loader.addModule({ name:'msg', type:'js', fullpath:'http://cn.yimg.com/i/sns/js/msg_1_0_0_min.js', requires:['dom', 'event', 'dragdrop','animation'] }); loader.addModule({ name:'sns_events', type:'js', fullpath:'http://cn.yimg.com/i/sns/js/events_1_0_3_min.js' }); loader.addModule({ name:'sns_share', type:'js', fullpath:'http://cn.yimg.com/i/sns/js/share_1_0_0_min.js' });

cn.yahoo.com qq.com 163.com http://hikejun.com/sharing/YUI@tuling/example/stat_js.php

实例 1 ： Flickr 搜索 DEMO ： http://hikejun.com/sharing/YUI@tuling/example/flickr.html YUI Loader 按需加载 Selector 代替 Dom Get 实现跨站请求 YQL

实例 2 ： Flickr 搜索 . 增强版 DEMO ： http://hikejun.com/sharing/YUI@tuling/example/flickr.carousel.html Carousel 增强展示效果

实例 3: 复杂应用 UI http://developer.yahoo.com/yui/examples/layout/adv_layout_source.html

不断向前演变的 YUI

2006/2/13 - YUI beta 1(0.9) 正式发布 2006/5/9 - YUI beta 2 发布 2006/7/10 - YUI 0.11 发布 2006/8/28 - YUI 0.11.3 发布 2006/10/16 - YUI 0.11.4 发布 2006/11/13 - YUI 0.12.0 发布 2006/12/18 - YUI 0.12.1 发布 2007/1/8 - YUI 0.12.2 发布 2007/2/20 - YUI 2.2.0 发布 2007/4/9 - YUI 2.2.1 发布 2007/4/18 - YUI 2.2.2 发布 2007/7/31 - YUI 2.3.0 发布 2007/9/19 - YUI 2.3.1 发布 2007/12/4 - YUI 2.4.0 发布 2007/12/19 - YUI 2.4.1 发布 2008/2/20 - YUI 2.5.0 发布 2008/3/19 - YUI 2.5.1 发布 2008/5/28 - YUI 2.5.2 发布 2008/10/1 - YUI 2.6.0 发布 2008/8/13 - YUI 3 PR1 发布 2008/12/9 - YUI 3 PR2 发布 2009/2/18 – YUI 2.7.0 发布

http://www.xtimeline.com/timeline/YUI-Timeline

http://yuilibrary.com/

http://developer.yahoo.com/yui/docs/index.html

http://developer.yahoo.com/yui/examples/ >300 个实例供学习

http://developer.yahoo.com/yui/theater/

http://yuiblog.com/

http://twitter.com/yuilibrary

YUI In The Wild http://yuiblog.com/blog/category/in-the-wild/

下一代 YUI http://developer.yahoo.com/yui/3/

YUI 2: popup.innerHTML = desc.innerHTML; YD.setStyle(popup,‘opacity’, 0.9); YD.setStyle(popup,‘top’, (ev.clientY + 10) + ‘px’); YD.setStyle(popup,‘left’, (ev.clientX + 10) + ‘px’); YUI 3 ： popup.set('innerHTML', desc.get('innerHTML')) .setStyles({ opacity: 0.9, top: (ev.clientY + 10) + "px", left: (ev.clientX + 10) + "px" }); jQuery ： popup.html(desc.html()) .show() .css("opacity", 0.9) .css("top", (ev.clientY + 10) + "px") .css("left", (ev.clientX + 10) + "px");

原图： http://farm4.static.flickr.com/3465/3289407277_c8837454ca_o.png

dom-base(4.9k) dom-screen(4.6k) dom-style(4.7k) selector(6.0)k) dom (21k) event(22.4k) node-base(6.0k) node-event-simulate(0.3k) node-screen(0.8k) node-style(0.3k) node(6.6k) anim-base(4.4k) anim-xy(0.4k) anim-color(0.9k) anim-curve(0.7k) anim-easing(2.3k) anim-scroll(0.5k) anim-node-plugin(0.4k) anim(8.4k) attribute(3.9k) base(4.0k) classnamemanager(0.4k) console(8.0k) cookie(3.2k) dd-ddm-base(2.2k) dd-ddm(1.4k) dd-ddm-drop(3.4k) dd-drag(8.1k) dd-drop(4.4k) dd-proxy(1.7k) dd-constrain(3.5k) dd-plugin(0.4k) dd-drop-plugin(0.4k) dd(24.7k) dump(0.8k) get(3.3k) io-base(3.5k) io-xdr(0.8k) io-form(1.1k) io-upload-iframe(1.9k) io-queue(0.8k) io(6.1k) json-parse(1.2k) json-stringify(1.7k) json(2.9k) loader(12.2k) node-menunav(11.5k) oop(1.7k) overlay(0.4k) plugin(0.9k) profiler(3.4k) queue(1.4k) slider(8.6k) substitute(0.9k) widget-position(1.5k) widget-position-ext(2.3k) widget-stack(3.6k) widget-stdmod(4.9k) widget(8.6k) yui(23.3k) yui-base(8.0k) yuitest(22.0k) yui(23.3k) dom (21k) event(22.4k) attribute(3.9k) base(4.0k) yui-base(8.0k) yuitest(22.0k) node(6.6k) anim(8.4k) classnamemanager(0.4k) console(8.0k) cookie(3.2k) dd(24.7k) dump(0.8k) get(3.3k) io(6.1k) json(2.9k) loader(12.2k) node-menunav(11.5k) oop(1.7k) overlay(0.4k) plugin(0.9k) profiler(3.4k) queue(1.4k) slider(8.6k) substitute(0.9k) widget(8.6k) YUI 3 PR2 高度模块化

http://developer.yahoo.com/yui/3/configurator/

YUI 3.x 追求的目标

Lighter

Faster

More Consistent

More Powerful

More Securable

开始用 YUI 3.x (1) (function(){ // 你的代码 })(); YUI().use(‘*’, function(Y){ // 你的代码 });

开始用 YUI 3.x (2) (function(){ var tip = document.createElement(“div”); tip.className = “tip”; tip.innerHTML = “ 欢迎学习 YUI! ” document.body.appendChild(tip); })(); YUI().use(‘node’, function(Y){ Y.get(“body”).appendChild(Y.Node.create(‘<div class=“tip”> 欢迎学习 YUI!</div>’)); });

开始用 YUI 3.x (3) var MY_CONF = { base: ‘/yui3/build/’, combine: false, charset: ‘utf-8’, loadOptional: true, modules:{ my_module: { fullpath: “http://.....my_module-min.js”, requires: [“node”,“base”] } } }; …… YUI.namespace('example.yui3.demo1'); YUI.namespace('example.yui3.demo2'); YUI.namespace('example.yui3.demo3'); …… YUI(MY_CONF).use(‘node’, ‘my_module’, YUI.example.yui3.demo1.init); YUI(MY_CONF).use(‘node’, ‘base’, ‘anim’, YUI.example.yui3.demo2.init); YUI(MY_CONF).use(‘node’, ‘io’, ‘slider’, YUI.example.yui3.demo3.init);

实例一 : 简单开始 YUI 3 DEMO: http://hikejun.com/sharing/YUI@tuling/example/yui3.html