YUI 3 Sugar
YUI Core中好用的方法
Y.log();
use ‘console’.
new Y.Console().render();
Y.log(’some message’);
Y.dump()把对象转成字符串，依赖’dump’模块
Y.later
对应setTimeout
var timer = Y.later(50, this, fn, args);
对应setInterval
var timer = Y.later(50, this, fn, args,true);
timer.cancel();
Y.cached 将一个方法cache起来
var newFn = Y.cached(oldFn);
newFn(arg1, arg2);
newFn(arg1, arg2); 第二次调用就返回cache的结果
Y.UA (user agents) 浏览器检测
Y.UA.air
Y.UA.caja
Y.UA.gecko
Y.UA.ie
Y.UA.mobile
Y.UA.opera
Y.UA.os
Y.UA.secure
Y.UA.webkit
safari下的测试结果：
air: 0
caja: undefined
gecko: 0
ie: 0
mobile: null
opera: 0
os: “macintosh”
secure: false
webkit: 531.9
Y.Lang
Y.Lang.isString(something)
Y.Lang.type(something)
Y.Lang.trim(something)
Y.Array
把参数转成数组 var args = Y.Array(arguments);
Y.Array.each 对应 javascript1.6 Array.forEach()
Y.Array.indexOf 对应 javascript1.6 Array.indexOf()
Y.Array.some 对应 javascript1.6 Array.some()
Y.Array.test() 测试数组 0-不是数组或类数组 1-是数组 2-是类数组(array-like collection)
Y.Array.hash()
var obj = Y.Array.hash(['n1', 'n2', 'n3'], [1, 2, 3, 4, 5]); 多余的值忽略
下面的方法依赖’collection’模块
Y.Array.lastIndexOf() 对应 javascript1.6 Array.lastIndexOf()
Y.Array.filter() 对应 javascript1.6 Array.filter()
var arr = Y.Array.filter([1,2,3,4], function(e){ return e % 2;}) //符合条件保留, arr为1,3
Y.Array.every() 对应 javascript1.6 Array.every()
Y.Array.every([1,2,3,4,5], function(e){return e < 3;}); 不满足条件退出
Y.Array.some([1,2,3,4,5], function(e){return e < 3;}); 满足条件退出
Y.Array.map() 对应javascript1.6 Array.map(), 产生一个新数组
var newArr = Y.Array.map([1,2,3], function(e){ return e + 1;}); //newArr为[2,3,4]
Y.Array.reduce() 对应javascript1.8 Array.reduce() (似乎有bug!)
Y.Array.zip() 把两个数组合并为一个新数组
var arr = Y.Array.zip([1,2,3], [1,2,3,4]); //arr为[[1,1],[2,2],[3,3],[undefind, 4]]
Y.Array.unique() 去掉重复的值
var arr = Y.Array.unique([4,1,2,3,3,2,4]); //arr为[4,1,2,3]
Y.Array.reject()与Y.Array.filter()相反, 不符合条件保留
Y.Array.partition() 会将匹配和不匹配的分出来
var result = Y.Array.partition([1,2,3,4,5], function(e){ return e % 2;}); //result为{matches:[1,3,5], rejects:[2,4]}
Y.Array.grep() 按正则过滤
var arr = Y.Array.grep([1,2,3,4,5], /[0-3]/); //arr为[1,2,3]
Y.Object
var obj2 = Y.Object(obj1); //clone一个新的对象
Y.Object.each()
Y.Object.each(obj1, function(v, k, o){});
Y.Object.keys()
Y.Object.keys(obj1) 返回所有属性名为数组
Y.Object.values()
Y.Object.values(obj1) 返回所有值为数组
Y.Object.size()
Y.Object.size(obj1) 返回成员数
Y.mix
Y.mix(obj1, obj2); //将obj2的成员添加到obj1中，重复不覆盖
Y.merge 将若干对象合并成一个新对象，重复的覆盖
var newobj = Y.merge(obj1, obj2, obj3, …);
面向对象方法，依赖’oop’模块
Y.clone
Y.merge(obj1)和Y.Object(obj1)都有clone的作用，当成员属性reference另一个对象时，当该对象值改变时会影响到新对象。
var newobj = Y.clone(obj1); //用Y.clone则完全clone一个新对象
Y.aggregate 对象合并，重复的追加
var obj1 = {
prop1: {
sub1: 1
}
prop2: ‘hi’
};
var obj2 = {
prop1: {
sub1: 2,
sub2: 3,
sub3: 4
}
};
Y.aggregate(obj1, obj2);
obj1为：
{
prop1: {
sub1: 1,
sub2: 3,
sub3: 4
}
prop2: ‘hi’
};
Y.augment 从一个function对象的原型链上添加方法到另一个function对象或实例，重复不覆盖
var fn1 = function(){};
fn1.prototype = {
foo1: function(){},
foo2: function(){}
};
var fn2 = function(){};
var fn3 = function(){};
fn3.prototype = {
foo3: function(){},
foo4: function(){}
};
Y.augment(fn2, fn1); //向function对象添加
var fn = new fn2();
fn.foo1();
Y.augment(fn, fn3); //向实例添加
fn.foo3();
Y.extend 从一个function对象上继承，包括原型链上和自身的方法和属性。
var fn1 = function(){
this.foo3 = function(){};
};
fn1.prototype = {
foo1: function(){},
foo2: function(){}
};
var fn2 = function(){
fn2.superclass.constructor.call(this);
};
Y.extend(fn2, fn1, {
//fn2原型链上的方法
});
var fn = new fn2();
fn.foo3();
Y.each
Y.each(obj1, function(v,k){}, context);
Y.bind 将一个对象绑到一个新context上，返回一个新方法
var newFn = Y.bind(fn, obj);
YUI Node中好用的方法
从字符串直接创建结点
var str = ‘<div class=”item”><input type=”text” name=”user.name” value=”username” size=”20″></div>’;
var node = Y.Node.create(str);
前面添加
Y.one(’body’).prepend(node);
后面添加
Y.one(’body’).append(node);
模板替换，依赖’substitute’模块
var html,
templ = ‘<li><a href=”{link}” title=”{title}”>{title}</a></li>’
data = [
{title: 'link 1', link: 'http://URL_1'},
{title: 'link 2', link: 'http://URL_2'},
{title: 'link 3', link: 'http://URL_3'},
{title: 'link 4', link: 'http://URL_4'},
{title: 'link 5', link: 'http://URL_5'}
];
html = ‘<ul>’;
Y.each(data, function(e){
html += Y.substitute(templ, {link: e.link, title: e.title});
});
html += ‘</ul>’;
Y.one(’body’).prepend(html);
连写
Y.one(’body’).prepend(html).all(’a').addClass(’foo’);
insert结点
Y.one(’#cont’).insert(html, ‘after’); //在#cont后插入
Y.one(’#cont’).insert(html, ‘before’); //在#cont前插入
Y.one(’#cont’).insert(html, ‘replace’); //替换#cont
Y.one(’#cont’).insert(html, 2); //在#cont的childNodes[2]前插入
Y.one(’#cont’).insert(html, refNode); //在refNode前插入
删除结点
node.remove();
替换结点
node.replace(newnode);
node.next() //node的下一个兄弟结点
node.previous() //node的前一个兄弟结点
node.ancestor(’.cont’) //找到第一个class名为cont的父结点
nodelist.filter(’a[title]‘); //符合条件的保留
nodelist.odd(); //奇数项保留
nodelist.even(); //偶数项保留
NodeList对象同样支持each和some遍历。
更好用的Event
mouseenter、mouseleave 解决了mouseover和mouseout冒泡频繁触发的问题
mousewheel 鼠标滚轮事件
windowresize
focus、blur
【常用方法】
e.halt(); //标签失去默认事件，一般用在a标签上
原址：http://developer.yahoo.com/yui/theater/video.php?v=kloots-yuiconf2009-sugar
转载：http://hi.baidu.com/haogemini/blog/item/69d46ef8fa774dd4b48f3192.html
