Mais conteúdo relacionado Semelhante a Yui rocks (20) Yui rocks4. YUI ~ Yahoo! User Interface
• YUI2发布于2006年并广泛被使用
• YUI3发布于2009年,YUI3被重新设计用来
构建快速、强大和高效的工具箱
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)
16. 模块加载
• 种子文件
• 种子小,作用大
– 模块注册系统
– 核心YUI工具方法
– Lang, Object, Array类
– Loader(动态模块加载)
<script src="http://yui.yahooapis.com/3.10.1/build/yui/yui-min.js"></script>
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/
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)
还有强大的面向对象编程支持!
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框架
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
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/
50. 拥抱开源世界
• YUI App Framework
• Y.Handlebars
• YUI Loader
• cssnormalize
• Y.Promise
• ScrollView
• YUI on Node
• https://github.com/yui/yui3