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

1. YUI Rocks!
鲁超伍
@adamlu

2. YUI是什么？

3. 我们今天
说的当然
不是她
~~~

4. YUI ~ Yahoo! User Interface
• YUI2发布于2006年并广泛被使用
• YUI3发布于2009年，YUI3被重新设计用来
构建快速、强大和高效的工具箱

5. YUI2感觉体积好大啊！
有人说：
其实这种思想在早前很多使用YUI的人心里都扎下了根

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 -->
<script
src="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. YUI3和YUI2是完全不一样的！
我要说：
我想让大家重新认识一下YUI

8. http://developer.yahoo.com/yui2/
YUI2网站快照

9. http://yuilibrary.com/
YUI3官网

10. YUI项目
• JavaScript库(YUI)
• CSS基础(Grid)
• 文档工具(yuidoc)
• 构建工具(shifter/yogi/yme)
• 测试工具(yuitest)
• 浏览器自动化测试工具(yeti)
• 性能优化工具(yui compressor)
• 开发者培训(Theater/Blog/YUIConf)

12. 前端工程师面对的两个问题
• 开发
• 维护

13. 基本的JS模块化
文件依赖、并发下载、维护性
YUI
RequireJs

14. 模块化
• DRY
• 代码抽象
• 前端性能

15. 模块/代码加载器
• RequireJs
• LabJs
• SeaJs
• HeadJs
• YUI Loader

16. 模块加载
• 种子文件
• 种子小，作用大
– 模块注册系统
– 核心YUI工具方法
– Lang, Object, Array类
– Loader(动态模块加载)
<script src="http://yui.yahooapis.com/3.10.1/build/yui/yui-min.js"></script>

17. 模块注册
YUI.add('hello', function (Y) {
Y.namespace('Hello');
Y.Hello.sayHello = function () {
return 'GREETINGS
PROGRAMS';
};
});

18. 模块使用
YUI().use('node-base', 'hello', function (Y) {
Y.one('#demo').setHTML(Y.Hello.sayH
ello());
});
使用YUI模块前你需要知道模块名！

19. 一个简单的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/

20. YUI Loader
合并加载

21. 有用的工具函数
• Y.merge
• Y.mix
• Y.later
• Y.log
• Y.Lang
• Y.Array
• Y.Object
• Y.UA
• Y.Escape
http://jsfiddle.net/adamlu/LEEdc/

22. YUI vs. jQuery
Y.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')

23. YUI vs. jQuery
http://www.jsrosettastone.com/

24. YUI的node, io, event等某些模块基
本就能把jQuery所做的事情搞定了

25. YUI还有更多你意想不到的

26. YUI改进了JavaScript编码风格
你有没有遇到过这样的情况：
在jQuery代码中:
if ($(‘.empty-node’)) {//如果存在这个节点则执行下面这段代码
//没有这个节点也会执行，坑爹啊
}
在YUI中，完全按照你所想的：
在YUI代码中:
if (Y.one('.empty-node')) {//如果存在这个节点则执行下面这段代码
//没有这个节点不会执行，Good
}

27. 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)
还有强大的面向对象编程支持!

28. YUI中的面向对象
• 伪类/原型继承
• 增强
• 插件
• 类扩展
• MVC

29. 原生的继承实现
function Child() {
}
Child.prototype = new Parent();
Child.prototype.method = function() {};
在YUI中：
伪类继承：
Y.extend(Child, Parent, {
method: function(){}
});
提供了强大的继承关系如superclass，保持instanceof不变

30. 原生的继承实现
原型继承：
Y.Object = (function() {
function F() {};
return function() (obj) {
F.prototype = obj;
return new F();
}
})();
避免拷贝过多的属性，相当于Object.create()

31. 增强
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的构造
函数，可以合并多个类。

32. 插件
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就可以使用插件

33. 类扩展
提高了代码重用率
Y.Base.create = function(name, base, extensions, px, sx)
Y.Electron = Y.Base.create('electron', Y.Base, [Y.Relativestic],
{
getSpeed: function() {}
}, {
ATTRS: {}
});
类的NAME属性
基类(必须是扩展自Base)
扩展列表 原型和静态对象

34. YUI App Framework
• 由App, Model, Model List, Router和View组
成的包
• 写单页面JavaScript应用程序的MVC风格的
框架
• 基于URL的路由
• 类似BackboneJs框架

35. YUI App Framework的一个例子
http://adamlu.com/fe/ContactApp/
https://github.com/adamlu/YUIAppDemo
ContactListView ContactView

36. 使用组件
YUI本身已经自带很多丰富组件如
AutoComplete, Calendar, DataTable等

37. YUI组件核心
• Attribute
• Base
• Custom Event

38. 基于Base创建组件
• Base是底层的基础类，同时具备Attribute
和Event特性
• 提供了创建基于属性对象的标准模板
• 提供了一致的init()和destroy()方法
http://jsfiddle.net/adamlu/7hXCV/

39. Attribute类
• 对一些状态值和自定义逻辑功能相关配置的封装
• 提供监听状态改变的机会
• Gettters
• Settters
• 默认值
• Change事件

40. //实例化时设置属性的初始
值
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

41. YUI提供的事件
• DOM事件
• 特别的DOM事件
• 合成事件
• 自定义事件

42. 事件支持
• 控制事件传播和冒泡
• 阻止默认行为
• 委托事件
• EventTarget
– publish()
– on()/detach()
– fire()
– addTarget()/removeTarget()
http://jsfiddle.net/adamlu/5C5CC/

43. 组件
组件(widget)是一个通用的可视元件设计在不同网
站被重用，如表格、日历、菜单或图表等。
set(), get(), value, valueFn, setter, getter...
publish(), fire(), on(), after(), before()
plug(), unplug()

44. 扩展组件
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()

45. YUI on Mobile
• Touch/Guesture
• History
• Offline Cache
• Transition
• Autocomplete
• ScrollView

46. 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可用的

47. YUI on Node
npm install yui@stable
var YUI = require(‘yui’).YUI;
YUI().use(‘yql’, function() {
Y.YQL(‘select * from …’);
});
var Y = require(‘yui/yql’);
Y.YQL(‘select * from …’);

48. YUI目标平台
Internet
Explorer
6.0 7.0 8.0 9.0 10.0
Chrome † Latest stable
Firefox † Latest stable
Safari iOS 5.† iOS 6.† Latest stable (desktop)
WebKit Android
2.3.†
Android 4.†
Node.js* 0.8.† 0.10.†
Windows
(Native)
Windows 8 Apps
http://yuilibrary.com/yui/environments/

49. 拥抱开源世界

50. 拥抱开源世界
• YUI App Framework
• Y.Handlebars
• YUI Loader
• cssnormalize
• Y.Promise
• ScrollView
• YUI on Node
• https://github.com/yui/yui3

51. YUI Gallery

52. AlloyUI
http://alloyui.com/

53. 总结：使用YUI的好处
• 协作开发
• 功能齐全
• 稳定
• 提高编写JavaScript水平
• 有益于前端工程师自身成长

54. 什么情况可以不用YUI呢？
• 如果是原生JavaScript可以处理的话
• 如果是临时项目不太考虑维护的话
• 除了不是以上这些情况

55. 不要为工具所限定，只要能满足您
需求的忠于用户的就好。

56. 赶快加入到使用YUI的行列吧！
YUI Really Rocks!

57. YUI 3 Cookbook 中文版

58. @adamlu

59. Q&A