理解YUI3 extension:Base.create

YUI3中为了避免不必要的类继承层次,以及摆脱利用原型链模拟的单继承模型,除了利用Y.augment 来扩充单一类功能的机制,对用多功能扩充更提出了扩展类的概念(另一个和augment的不同点在于扩充功能类的构造函数调用时机),能够方便的将功能分解,对应 Base.create。


利用官方例子解释:

 

比如某个类继承了Widget但是它想有Stack,Position的功能,那么按照传统设计就要该做继承WidgeStackPosition,而WidgeStackPosition再继承Widget,这两个功能实际上绑定在一起了,而对于使用者这种深层的类链是不必要的,使用者只需知道这是个Widget,它有stack,position的功能即可。于是yui3有了Base.create功能:

 

var Positionable = Y.Base.create("positionable", Y.Widget, 
	                            [Y.WidgetStack,Y.WidgetPosition]);

 

动态生成了一个类,这个类是Widget的子类,但并不是WidgetStack或WidgePositon的子类,并且这两个功能互相独立,WidgetStack,Position也很简单只是一个单纯类,描述了功能,其并没有继承Widget,这样就完成了是Widget的子类但具有Stack,Positon功能这一需求,避免了继承的滥用以及功能的灵活配置。


原理:

 

简单的说:利用了脚本语言的动态特性,将extension class的prototype混合在新生成类的prototype中,使新生成类具有了扩展类的特有功能。


但是这样的话,就丧失了传统类继承时yui3 oop的一些特性,比如Stack可以利用静态 ATTRS 来设置自己的属性,更关键的是只赋值功能代码的话,Stack的构造初始化函数没有机会运行,而构造函数中也许存在他的功能函数所依赖的状态。


具体的说:create干了很多事,并且需要Base的配合,这也就是为什么create要求的基类一定要继承自Base:


1。不仅要复制extension class的prototype功能函数到新生成类,还要复制extension class的静态属性到新生成类。


2。在初始化新生成类的实例时,要调用extension class的构造函数,这点正是 Base 基类初始化所考虑的,所以新生成类一定要以Base为基类,那么在初始化新生成类实例时,调用Base的初始构造函数,这时再调用新生成类所有 extension class 的构造函数,于是执行了扩展类的初始化:

 

//Base._initHierarchy :
//......
for (ci = classes.length - 1; ci >= 0; ci--) {
    constr = classes[ci];
    constrProto = constr.prototype;
    //初始化继承链上对应类的扩展类
    if (constr._yuibuild && constr._yuibuild.exts) {
        for (ei = 0, el = constr._yuibuild.exts.length; ei < el; ei++) {
            constr._yuibuild.exts[ei].apply(this, arguments);
        }
    }
//.....
}

 


换个实现看:


根据以上的分析,对应于:

 

var Positionable = Y.Base.create("positionable", Y.Widget, 
	                            [Y.WidgetStack,Y.WidgetPosition]);

 

也即简化为这样的实现,加深理解:

 

function Positionable() {
    Positionable.superclass.constructor.apply(this, arguments);
}
Positionable._yuibuild = Positionable._yuibuild || {};
Positionable._yuibuild.exts = Positionable._yuibuild.exts || [];
//Base调用初始化
Positionable._yuibuild.exts.push(Y.WidgetStack);
Positionable._yuibuild.exts.push(Y.WidgetPosition);
Positionable.NAME = "positionable";
Y.extend(Positionable, Y.Widget);
//属性
Y.mix(Positionable, Y.WidgetStack);
//功能代码prototype
Y.mix(Positionable.prototype, Y.WidgetStack.prototype);
Y.mix(Positionable, Y.WidgetPosition);
Y.mix(Positionable.prototype, Y.WidgetPosition.prototype)
 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值