首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

YUI 3.x的代码重用步骤

2012-09-08 
YUI 3.x的代码重用方法转载: http://hikejun.com/blog/2009/05/19/yui-3-x%E7%9A%84%E4%BB%A3%E7%A0%81%E9

YUI 3.x的代码重用方法
转载: http://hikejun.com/blog/2009/05/19/yui-3-x%E7%9A%84%E4%BB%A3%E7%A0%81%E9%87%8D%E7%94%A8%E6%96%B9%E6%B3%95/


YUI 3.x的代码重用方法




面向对象的代码设计,本质上是追求代码的重用率。YUI 3中提供了不少令人惊喜的方法,在开发都是非常有用的。
Y.mix方法
Y.merge, Y.aggregate和Y.extend都用到Y.mix方法,所以它是一个基础方法(基础意味着参数较多,用法灵活不好记住)。格式:
Y.mix(r, s, ov, wl, mode, merge);
其中参数mode:
default(0): object to object
1: prototype to prototype (old augment)
2: prototype to prototype and object props (new augment)
3: prototype to object
4: object to prototype
ov – 属性重复是否覆盖。默认不覆盖。
wl – 属性白名单,数组形式。注:mix方法用的形式跟augment方法用的形式不同。
感觉下面这行跟Y.augment(fun1, fun2)的作用相同:
Y.mix(fun1, fun2, 0, null, 1);
将fun1的prototype上的属性添加到obj上:
Y.mix(obj, fun1, 0, null, 3);
将obj的属性添加到fun1的prototype上:
Y.mix(fun1, obj, 0, null, 4);
Y.mix实现了相当灵活的代码重用。一个object或function可以被mix到任意地方。
Y.merge和Y.aggregate的区别
Y.merge将任意个object({…})合并成一个新的object,属性重名后者的覆盖前者的。如:
var newObj = Y.merge(obj1, obj2, obj3, …objn);
产生的新对象不是reference到旧对象的关系,所以改变obj1属性的值不会影响到newObj。
Y.aggregate实现从一个object({…})向另一个object添加属性。格式:
Y.aggregate(r, s, true, ['prop1', 'prop2']);
将对象s的属性prop1和prop2(白名单方式)添加到对象r上,重名覆盖。
Y.augment和Y.extend的区别
作用都是实现function之间方法的重用。区别是extend是实现继承(类之间有上下级关系),而augment仅仅是从一个function向另一个function添加方法和属性。
Y.extend从fun2的原型链上继承方法和属性,同时扩展新的。扩展时有重名的覆盖。
Y.extend(fun1, fun2, {…扩展fun1原型链上的方法…}, {…扩展fun1的静态方法…});
在fun1的constructor中写入,则可继承fun2自己的属性和方法:
fun1.superclass.constructor.apply(this, arguments);
Y.augment仅仅从fun2的原型链上添加方法和属性。有重名的默认跳过。
Y.augment(fun1, fun2);
重名覆盖需指定第三参数,如:
Y.augment(fun1, fun2, true);
指定白名单,只添加白名单中指定的,如:
Y.augment(fun1, fun2, true, {‘prop3′: true});
Y.bind绑定新的scope
Y.bind会返回一个新的function。格式:var newfunc = Y.bind(func, scope, arg1, arg2, …, argn);
var o1 = {
prop: 10
};
var o2 = {
prop: 20
};
var func = function(){
alert(this.prop);
};
var newfunc = Y.bind(func, o1);
newfunc(); //alert 10
var newfunc = Y.bind(func, o2);
newfunc(); //alert 20
Y.clone克隆方法
上面介绍的Y.merge可以实现简单的克隆一个object,Y.bind可以克隆一个function。
Y.clone方法的格式:var newObj = Y.clone(o, safe, f, c, owner);
o – 要克隆的object或function
safe – (通过看源码,没搞明白,留待以后解决了)
f – 会传给回调方法key和value,通过return false;可以阻止copy,从而实现克隆过程中对一些属性的过滤
c – 指定f执行的scope
owner – 克隆function时,指定的上下文对象
Y.Base.build方法
文档中是这样说的:从主方法(类),和一组扩展方法(类)中创建一个新的构造方法(类)。
YUI 3.x的overlay组件就是一个典型的例子,非常精简,只有两行。可见YUI 3的代码重用效率很高。
Y.Overlay = Y.Base.build(Y.Widget, [Y.WidgetPosition, Y.WidgetStack, Y.WidgetPositionExt, Y.WidgetStdMod]);
Y.Overlay.NAME = “overlay”;

热点排行