YUI Rocks!鲁超伍@adamlu
YUI是什么?
我们今天说的当然不是她~~~
YUI ~ Yahoo! User Interface• YUI2发布于2006年并广泛被使用• YUI3发布于2009年,YUI3被重新设计用来构建快速、强大和高效的工具箱
YUI2感觉体积好大啊!有人说:其实这种思想在早前很多使用YUI的人心里都扎下了根
<!-- Dependencies --><script src="http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js" type="text/ja...
YUI3和YUI2是完全不一样的!我要说:我想让大家重新认识一下YUI
http://developer.yahoo.com/yui2/YUI2网站快照
http://yuilibrary.com/YUI3官网
YUI项目• JavaScript库(YUI)• CSS基础(Grid)• 文档工具(yuidoc)• 构建工具(shifter/yogi/yme)• 测试工具(yuitest)• 浏览器自动化测试工具(yeti)• 性能优化工具(yui co...
前端工程师面对的两个问题• 开发• 维护
基本的JS模块化文件依赖、并发下载、维护性YUIRequireJs
模块化• DRY• 代码抽象• 前端性能
模块/代码加载器• RequireJs• LabJs• SeaJs• HeadJs• YUI Loader
模块加载• 种子文件• 种子小,作用大– 模块注册系统– 核心YUI工具方法– Lang, Object, Array类– Loader(动态模块加载)<script src="http://yui.yahooapis.com/3.10.1/b...
模块注册YUI.add(hello, function (Y) {Y.namespace(Hello);Y.Hello.sayHello = function () {return GREETINGSPROGRAMS;};});
模块使用YUI().use(node-base, hello, function (Y) {Y.one(#demo).setHTML(Y.Hello.sayHello());});使用YUI模块前你需要知道模块名!
一个简单的YUI程序<div id="test"></div><button id="button">Turn Red</button>YUI().use(node, function(Y){Y.one(#button).on(click, f...
YUI Loader合并加载
有用的工具函数• Y.merge• Y.mix• Y.later• Y.log• Y.Lang• Y.Array• Y.Object• Y.UA• Y.Escapehttp://jsfiddle.net/adamlu/LEEdc/
YUI vs. jQueryY.one(div.foo)Y.all(div.foo)Y.one(#foo).on(click, fn)Y.io(url, {data: data,on: {success: successFn}});.setHT...
YUI vs. jQueryhttp://www.jsrosettastone.com/
YUI的node, io, event等某些模块基本就能把jQuery所做的事情搞定了
YUI还有更多你意想不到的
YUI改进了JavaScript编码风格你有没有遇到过这样的情况:在jQuery代码中:if ($(‘.empty-node’)) {//如果存在这个节点则执行下面这段代码//没有这个节点也会执行,坑爹啊}在YUI中,完全按照你所想的:在YUI...
YUI改进了JavaScript编码风格$.each([1, 2, 3], fn(index, value))$.each({ key: value }, fn(key, value))Y.Array.each([1, 2, 3], fn(va...
YUI中的面向对象• 伪类/原型继承• 增强• 插件• 类扩展• MVC
原生的继承实现function Child() {}Child.prototype = new Parent();Child.prototype.method = function() {};在YUI中:伪类继承:Y.extend(Child,...
原生的继承实现原型继承:Y.Object = (function() {function F() {};return function() (obj) {F.prototype = obj;return new F();}})();避免拷贝过多...
增强Y.ModelList = Y.extend(function() {ModelList.superclass.constructor.apply(this, arguments);},Y.Base,{/*原型*/}, {/*静态方法*/}...
插件var overlay = new Y.Overlay({..});overlay.plug(Y.Plugin.Drag);overlay.dd.set(lock, true);overlay.unplug(dd);Y.Plugin.Hos...
类扩展提高了代码重用率Y.Base.create = function(name, base, extensions, px, sx)Y.Electron = Y.Base.create(electron, Y.Base, [Y.Relativ...
YUI App Framework• 由App, Model, Model List, Router和View组成的包• 写单页面JavaScript应用程序的MVC风格的框架• 基于URL的路由• 类似BackboneJs框架
YUI App Framework的一个例子http://adamlu.com/fe/ContactApp/https://github.com/adamlu/YUIAppDemoContactListView ContactView
使用组件YUI本身已经自带很多丰富组件如AutoComplete, Calendar, DataTable等
YUI组件核心• Attribute• Base• Custom Event
基于Base创建组件• Base是底层的基础类,同时具备Attribute和Event特性• 提供了创建基于属性对象的标准模板• 提供了一致的init()和destroy()方法http://jsfiddle.net/adamlu/7hXCV/
Attribute类• 对一些状态值和自定义逻辑功能相关配置的封装• 提供监听状态改变的机会• Gettters• Settters• 默认值• Change事件
//实例化时设置属性的初始值obj = new MyClass({name:value});obj.addAttr(name, value);obj.set(name, value);obj.get(name);obj.on(nameChang...
YUI提供的事件• DOM事件• 特别的DOM事件• 合成事件• 自定义事件
事件支持• 控制事件传播和冒泡• 阻止默认行为• 委托事件• EventTarget– publish()– on()/detach()– fire()– addTarget()/removeTarget()http://jsfiddle.ne...
组件组件(widget)是一个通用的可视元件设计在不同网站被重用,如表格、日历、菜单或图表等。set(), get(), value, valueFn, setter, getter...publish(), fire(), on(), aft...
扩展组件Y.Electron = Y.Base.create(electron, Y.Widget, [],{destructor: function () { },renderUI: function () {},bindUI: functi...
YUI on Mobile• Touch/Guesture• History• Offline Cache• Transition• Autocomplete• ScrollView
YUI on Mobile特性加载:use(transition-native) 手动使用transition原生模块use(node) 从手机来的请求不会加载IE6相关的触摸事件:event-touch 原生touch和guesture事件e...
YUI on Nodenpm install yui@stablevar YUI = require(‘yui’).YUI;YUI().use(‘yql’, function() {Y.YQL(‘select * from …’);});var...
YUI目标平台InternetExplorer6.0 7.0 8.0 9.0 10.0Chrome † Latest stableFirefox † Latest stableSafari iOS 5.† iOS 6.† Latest stab...
拥抱开源世界
拥抱开源世界• YUI App Framework• Y.Handlebars• YUI Loader• cssnormalize• Y.Promise• ScrollView• YUI on Node• https://github.com/...
YUI Gallery
AlloyUIhttp://alloyui.com/
总结:使用YUI的好处• 协作开发• 功能齐全• 稳定• 提高编写JavaScript水平• 有益于前端工程师自身成长
什么情况可以不用YUI呢?• 如果是原生JavaScript可以处理的话• 如果是临时项目不太考虑维护的话• 除了不是以上这些情况
不要为工具所限定,只要能满足您需求的忠于用户的就好。
赶快加入到使用YUI的行列吧!YUI Really Rocks!
YUI 3 Cookbook 中文版
@adamlu
Q&A
Yui rocks
Upcoming SlideShare
Loading in …5
×

Yui rocks

1,300 views

Published on

主要介绍一下YUI的基础结构和使用YUI如何构建可扩展的Web应用,同时会有一些YUI和其它类库的对比以及其自身特点,并阐述为什么学习使用YUI对前端工程师来说可以在一定程度上提高编写代码的质量。

Published in: Technology, Art & Photos
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,300
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Yui rocks

  1. 1. YUI Rocks!鲁超伍@adamlu
  2. 2. YUI是什么?
  3. 3. 我们今天说的当然不是她~~~
  4. 4. YUI ~ Yahoo! User Interface• YUI2发布于2006年并广泛被使用• YUI3发布于2009年,YUI3被重新设计用来构建快速、强大和高效的工具箱
  5. 5. YUI2感觉体积好大啊!有人说:其实这种思想在早前很多使用YUI的人心里都扎下了根
  6. 6. <!-- Dependencies --><script src="http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"></script><!-- Source file --><scriptsrc="http://yui.yahooapis.com/2.8.2r1/build/animation/animation-min.js" type="text/javascript"></script>var element = document.getElementById(test);var myAnim = new YAHOO.util.Scroll(element, {scroll: {to: [ 500, test.scrollTop ]}});myAnim.animate();我们印象中的YUI(2)
  7. 7. YUI3和YUI2是完全不一样的!我要说:我想让大家重新认识一下YUI
  8. 8. http://developer.yahoo.com/yui2/YUI2网站快照
  9. 9. http://yuilibrary.com/YUI3官网
  10. 10. YUI项目• JavaScript库(YUI)• CSS基础(Grid)• 文档工具(yuidoc)• 构建工具(shifter/yogi/yme)• 测试工具(yuitest)• 浏览器自动化测试工具(yeti)• 性能优化工具(yui compressor)• 开发者培训(Theater/Blog/YUIConf)
  11. 11. 前端工程师面对的两个问题• 开发• 维护
  12. 12. 基本的JS模块化文件依赖、并发下载、维护性YUIRequireJs
  13. 13. 模块化• DRY• 代码抽象• 前端性能
  14. 14. 模块/代码加载器• RequireJs• LabJs• SeaJs• HeadJs• YUI Loader
  15. 15. 模块加载• 种子文件• 种子小,作用大– 模块注册系统– 核心YUI工具方法– Lang, Object, Array类– Loader(动态模块加载)<script src="http://yui.yahooapis.com/3.10.1/build/yui/yui-min.js"></script>
  16. 16. 模块注册YUI.add(hello, function (Y) {Y.namespace(Hello);Y.Hello.sayHello = function () {return GREETINGSPROGRAMS;};});
  17. 17. 模块使用YUI().use(node-base, hello, function (Y) {Y.one(#demo).setHTML(Y.Hello.sayHello());});使用YUI模块前你需要知道模块名!
  18. 18. 一个简单的YUI程序<div id="test"></div><button id="button">Turn Red</button>YUI().use(node, function(Y){Y.one(#button).on(click, function() {Y.one(#test).addClass(red);});});#test {height: 30px;background: gray;}#test.red {background: red;}<script src="http://yui.yahooapis.com/3.9.0/build/yui/yui-min.js"></script>http://jsfiddle.net/adamlu/YdBbL/show/
  19. 19. YUI Loader合并加载
  20. 20. 有用的工具函数• Y.merge• Y.mix• Y.later• Y.log• Y.Lang• Y.Array• Y.Object• Y.UA• Y.Escapehttp://jsfiddle.net/adamlu/LEEdc/
  21. 21. YUI vs. jQueryY.one(div.foo)Y.all(div.foo)Y.one(#foo).on(click, fn)Y.io(url, {data: data,on: {success: successFn}});.setHTML(foo)$(div.foo:first)$(div.foo)$(#foo).click(fn)$.ajax({url: url,success: successFn});.html(foo)
  22. 22. YUI vs. jQueryhttp://www.jsrosettastone.com/
  23. 23. YUI的node, io, event等某些模块基本就能把jQuery所做的事情搞定了
  24. 24. YUI还有更多你意想不到的
  25. 25. YUI改进了JavaScript编码风格你有没有遇到过这样的情况:在jQuery代码中:if ($(‘.empty-node’)) {//如果存在这个节点则执行下面这段代码//没有这个节点也会执行,坑爹啊}在YUI中,完全按照你所想的:在YUI代码中:if (Y.one(.empty-node)) {//如果存在这个节点则执行下面这段代码//没有这个节点不会执行,Good}
  26. 26. YUI改进了JavaScript编码风格$.each([1, 2, 3], fn(index, value))$.each({ key: value }, fn(key, value))Y.Array.each([1, 2, 3], fn(value, index))Y.Object.each({ key: value }, fn(value, key))$.isPlainObject(obj)Y.Lang.isObject(obj)还有强大的面向对象编程支持!
  27. 27. YUI中的面向对象• 伪类/原型继承• 增强• 插件• 类扩展• MVC
  28. 28. 原生的继承实现function Child() {}Child.prototype = new Parent();Child.prototype.method = function() {};在YUI中:伪类继承:Y.extend(Child, Parent, {method: function(){}});提供了强大的继承关系如superclass,保持instanceof不变
  29. 29. 原生的继承实现原型继承:Y.Object = (function() {function F() {};return function() (obj) {F.prototype = obj;return new F();}})();避免拷贝过多的属性,相当于Object.create()
  30. 30. 增强Y.ModelList = Y.extend(function() {ModelList.superclass.constructor.apply(this, arguments);},Y.Base,{/*原型*/}, {/*静态方法*/});Y.augment(Y.ModelList, Y.ArrayList);var list = new Y.ModelList({..});list.each(function(item) {..});延迟构造函数,只有each执行时才会执行ArrayList的构造函数,可以合并多个类。
  31. 31. 插件var overlay = new Y.Overlay({..});overlay.plug(Y.Plugin.Drag);overlay.dd.set(lock, true);overlay.unplug(dd);Y.Plugin.Host.prototype.plug = function(Plugin, config) {..if (Plugin && Plugin.NS) {..config.host = this;this[ns] = new Plugin(config);this._plugins[ns] = Plugin;}}只要继承了Y.Plugin.Host的类如Y.Base就可以使用插件
  32. 32. 类扩展提高了代码重用率Y.Base.create = function(name, base, extensions, px, sx)Y.Electron = Y.Base.create(electron, Y.Base, [Y.Relativestic],{getSpeed: function() {}}, {ATTRS: {}});类的NAME属性基类(必须是扩展自Base)扩展列表 原型和静态对象
  33. 33. YUI App Framework• 由App, Model, Model List, Router和View组成的包• 写单页面JavaScript应用程序的MVC风格的框架• 基于URL的路由• 类似BackboneJs框架
  34. 34. YUI App Framework的一个例子http://adamlu.com/fe/ContactApp/https://github.com/adamlu/YUIAppDemoContactListView ContactView
  35. 35. 使用组件YUI本身已经自带很多丰富组件如AutoComplete, Calendar, DataTable等
  36. 36. YUI组件核心• Attribute• Base• Custom Event
  37. 37. 基于Base创建组件• Base是底层的基础类,同时具备Attribute和Event特性• 提供了创建基于属性对象的标准模板• 提供了一致的init()和destroy()方法http://jsfiddle.net/adamlu/7hXCV/
  38. 38. Attribute类• 对一些状态值和自定义逻辑功能相关配置的封装• 提供监听状态改变的机会• Gettters• Settters• 默认值• Change事件
  39. 39. //实例化时设置属性的初始值obj = new MyClass({name:value});obj.addAttr(name, value);obj.set(name, value);obj.get(name);obj.on(nameChanged,callback);obj.after(nameChanged,callback);YUI().use("attribute", function(Y){function MyClass() {}MyClass.ATTRS = {};Y.augment(MyClass,Y.Attribute);});好的抽象,好的代码组织,一致的API
  40. 40. YUI提供的事件• DOM事件• 特别的DOM事件• 合成事件• 自定义事件
  41. 41. 事件支持• 控制事件传播和冒泡• 阻止默认行为• 委托事件• EventTarget– publish()– on()/detach()– fire()– addTarget()/removeTarget()http://jsfiddle.net/adamlu/5C5CC/
  42. 42. 组件组件(widget)是一个通用的可视元件设计在不同网站被重用,如表格、日历、菜单或图表等。set(), get(), value, valueFn, setter, getter...publish(), fire(), on(), after(), before()plug(), unplug()
  43. 43. 扩展组件Y.Electron = Y.Base.create(electron, Y.Widget, [],{destructor: function () { },renderUI: function () {},bindUI: function () {},syncUI: function () {}}, {ATTRS: {}});}, 1.1, {requires: [base-build, widget]});http://jsfiddle.net/adamlu/AQ8mg/生命周期方法:initializer(), destructor(),renderUI(), bindUI(), syncUI()
  44. 44. YUI on Mobile• Touch/Guesture• History• Offline Cache• Transition• Autocomplete• ScrollView
  45. 45. YUI on Mobile特性加载:use(transition-native) 手动使用transition原生模块use(node) 从手机来的请求不会加载IE6相关的触摸事件:event-touch 原生touch和guesture事件event-move 处理touch和mouse输入的事件event-flick 捕捉鼠标或手势的”flick”事件上面三个合在一起组成了event-guestrues模块Widget:Scrollview, Slider, Tabview等YUI组件都是mobile可用的
  46. 46. YUI on Nodenpm install yui@stablevar YUI = require(‘yui’).YUI;YUI().use(‘yql’, function() {Y.YQL(‘select * from …’);});var Y = require(‘yui/yql’);Y.YQL(‘select * from …’);
  47. 47. YUI目标平台InternetExplorer6.0 7.0 8.0 9.0 10.0Chrome † Latest stableFirefox † Latest stableSafari iOS 5.† iOS 6.† Latest stable (desktop)WebKit Android2.3.†Android 4.†Node.js* 0.8.† 0.10.†Windows(Native)Windows 8 Appshttp://yuilibrary.com/yui/environments/
  48. 48. 拥抱开源世界
  49. 49. 拥抱开源世界• YUI App Framework• Y.Handlebars• YUI Loader• cssnormalize• Y.Promise• ScrollView• YUI on Node• https://github.com/yui/yui3
  50. 50. YUI Gallery
  51. 51. AlloyUIhttp://alloyui.com/
  52. 52. 总结:使用YUI的好处• 协作开发• 功能齐全• 稳定• 提高编写JavaScript水平• 有益于前端工程师自身成长
  53. 53. 什么情况可以不用YUI呢?• 如果是原生JavaScript可以处理的话• 如果是临时项目不太考虑维护的话• 除了不是以上这些情况
  54. 54. 不要为工具所限定,只要能满足您需求的忠于用户的就好。
  55. 55. 赶快加入到使用YUI的行列吧!YUI Really Rocks!
  56. 56. YUI 3 Cookbook 中文版
  57. 57. @adamlu
  58. 58. Q&A

×