1. YUI介绍和使用YUI构建Web应
用
鲁超伍
http://adamlu.com
@adamlu

2. YUI是什么？
http://yuilibrary.com/

3. YUI项目
• JavaScript库(YUI)
• CSS基础(Grid)
• 文档工具(yuidoc)
• 构建工具(shifter)
• 测试工具(yuitest)
• 性能优化工具(yui compressor)
• 开发者培训(Theater/Blog)

4. https://github.com/yui/yui3

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

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

7. 模块使用
YUI().use('node-base', 'hello', function (Y) {
Y.one('#demo').setHTML(Y.Hello.sayHello()
);
});

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

9. 一个简单的YUI程序
<script src="http://yui.yahooapis.com/3.9.0/build/yui/yui-min.js"></script>
<div id="test"></div>
<button id="button">Turn Red</button>
#test {
height: 30px;
background: gray;
}
#test.red {
background: red; http://jsfiddle.net/adamlu/YdBbL/
}
YUI().use('node', function(Y){
Y.one('#button').on('click', function() {
Y.one('#test').addClass('red');
});
});

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

11. 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)
$(':radio')
Y.all('input[type=radio]')
还有强大的面向对象编程支持

12. 使用组件
• YUI本身已经自带很多丰富组件如
AutoComplete, Calendar, DataTable等
YUI基础结构

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

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

15. YUI().use("attribute", function(Y) { //实例化时设置属性的初始值
obj = new MyClass({name: value});
function MyClass() { obj.addAttr(name, value);
} obj.set(name, value);
MyClass.ATTRS = {}; obj.get(name);
Y.augment(MyClass, Y.Attribute); obj.on(nameChanged, callback);
}); obj.after(nameChanged, callback);

16. Attribute设置流程

17. YUI提供的事件
• DOM事件，让你的程序响应用户操作。
• 特别的DOM事件，当页面加载或渲染时可
以让你订阅有趣的瞬间。
• 合成事件，让你定义全新的DOM事件，扩
大了用户和你的程序沟通的渠道。
• 自定义事件，通过发出和订阅程序指定的
消息让组件之间互相通信。

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

19. 组件
• 组件(widget)是一个通用的可视元件设计在
不同网站被重用，如表格、日历、菜单或
图表。

20. 扩展组件
• 生命周期方法：initializer(), destructor(),
renderUI(), bindUI(), syncUI()
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/

21. YUI on Mobile
• Touch事件支持
• Guesture
• History
• Transition
• ScrollView
– 水平/垂直/拖动刷新/分页/滚动条
YUI().use('scrollview', function (Y) {
var scrollView = new Y.ScrollView({ srcNode: '#someContainer' });
scrollView.render();
});
http://yuilibrary.com/yui/docs/scrollview/scrollview-base-example.html

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

23. 使用App Framework的例子
http://adamlu.com/fe/ContactApp/
https://github.com/adamlu/YUIAppDemo

24. HTML页面

25. main.js

26. Y.App

27. ContactModel

28. ContactListModel

29. ContactView

30. ContactListView

31. YUI Cookbook

32. @adamlu
THANKS!