转载: 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”;
分享到:
相关推荐
<script src="http://yui.yahooapis.com/3.x.x/build/yui/yui-min.js"></script> YUI().use('node', function (Y) { // 在这里编写你的代码,此时Y对象包含了node模块的所有功能 }); ``` ### 4. 学习路径 ...
4.x版本引入了许多新特性,比如可重用的组件模型、改进的数据包、全新的图表库和更强大的布局管理器。SPket对Ext JS 4.x的支持意味着开发者可以利用这些特性的同时,享受到IDE的便利。 3. **MyEclipse**: MyEclipse...
例如,使用Yahoo提供的`yuiCompressor`工具,不仅可以合并文件,还能压缩代码,进一步减小文件大小。 2. **CSS Sprites**: - CSS精灵技术允许将多个小图片合并到一张大图中,通过设置CSS背景图像的位置来显示所...
3. **公开与私有成员**:只有希望公开的方法才会被暴露出来,其他私有方法都被隐藏起来,确保了数据的安全性和代码的整洁性。 #### 三、Module模式的历史背景 Module模式的概念最早由YUI团队的成员Eric Miraglia...
这个模式最早由YUI团队的Eric Miraglia提出,通过利用JavaScript的匿名函数和闭包特性,实现了模块化的代码组织。 **基本特征** 1. **模块化**:Module模式允许我们将相关的功能组织在一起,形成独立的模块,每个...
为了提高代码的可重用性和可维护性,模块化是必不可少的。常用的模块化工具包括: - **YUI3**:Yahoo! 提供的一套模块化库。 - **Require.js**:异步加载模块,支持AMD规范。 - **Sea.js**:轻量级模块加载器,同样...
2. 可重用:一旦定义,模块可以在程序的任何地方多次重用。 3. 封装性:通过闭包实现了变量和函数的私有封装,不与全局命名空间直接交互。 4. 松耦合:模块对外提供的接口简洁明了,内部实现细节对外部隐藏,减少...