`
yiminghe
  • 浏览: 1431536 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

理解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)
 
分享到:
评论

相关推荐

    Python库 | ore.yui-0.4.1.tar.gz

    python库。 资源全名:ore.yui-0.4.1.tar.gz

    在线剪切图片:cropbx.js插件的源代码

    cropbox.js 是一个实现了图像在线剪裁的 jQuery 、YUI 插件和 JavaScript 库。上传的图片可以使用滚轮放大与缩小当前选择的图片,也可以点击按钮“+”、“”-“实现放大缩小,”后点击“裁切”后显示裁减的图片

    yui-hotel-calendar.rar

    #酒店价格日历 ####基于YUI3开发的价格日历组件 @name:Y.PriceCalendar @requires:['node', 'base-base', 'event-mouseenter']

    yuicompressor-2.4.8.jar

    yuicompressor.jar是JS压缩工具、前端优化神器、yuicompressor-2.4.8.jar

    淘宝开发的Javascript文件压缩工具

    3. css文件中含有中文时,如果css编码和页面编码不一致,需要手动将中文替换为\xxxx, 详细说明请参考compressor.cmd中的说明 4. 如果不需要native2ascii, 可以只安装JRE即可(需要手动修改下compressor.cmd) Ref: ...

    yui3-master.zip

    yui3-master.zip

    grunt-yui-compressor-源码.rar

    grunt-yui-compressor-源码.rar

    基于yuicompressor压缩js、css、scss、html、jsp

    yuicompressor压缩html、js、css、scss、jsp 方法:Monitoring.init 初始化基本参数: suffix : 压缩的后缀,如min,common.js压缩后为common.min.js,html与jsp不参与 filterDir:过滤目录,正则表达式,如(./...

    yuicompressor-yui compressor

    yuicompressor-2.4.2.jar yuicompressor-2.4.7.jar jsZip.exe yuicompressor yui compressor js压缩工具 javascript压缩工具 css压缩工具 ------------------------------------ //压缩JS java -jar yui...

    YUI v3.17.2 RC1.zip

    UI Library (YUI) 是一个开放源代码的 JavaScript 函数库,为了能建立一个高互动的网页,它采用了AJAX, DHTML 和 DOM 等程式码技术。它也包含了许多 CSS 资源。使用授权为 BSD许可证   工具 动画 协助达成位置...

    Yahoo.Yui.Compressor.dll

    Yahoo.Yui.Compressor.dll文件下载,解决找不到Yahoo.Yui.Compressor.dll的问题 Yahoo.Yui.Compressor.dll控件常规安装方法(仅供参考): 一、如果在运行某软件或编译程序时提示缺少、找不到Yahoo.Yui....

    v_yui_blog:博客的源代码和仓库本体(srclib)。博客在线地址见:https:v-yui.github.io

    博客在线地址: : 之后一些练习可能也会丢进来。本博客未采用框架,直接采用webpack组织构建,写法上不太严谨。 目录结构 dist :webpack打包后的项目文件; src : main.html :标题栏及主页内容展示入口; ...

    yuicompressor-2.3.5.jar

    压缩效果如下: 压缩前: /** * @author:aliued-wd junbiao.zhujb */ function zipJs(parameter1,parameter2,parameter3,parameter4){ var parameter5 = parameter1; var parameter6 = parameter2; var parameter7 =...

    yuicompressor-2.4.jar

    压缩JS所使用jar包!...压缩JS:java -jar yuicompressor-2.4.jar --type js xxx.js -o xxx.js --charset utf-8 压缩CSS:java -jar yuicompressor-2.4.jar --type css xxx.css -o xxx.css --charset utf-8

    淘宝旅行YUI通用日期日历控件.zip

    淘宝旅行YUI通用日期日历控件是一款由淘宝前端开发人员昂天开发,基于雅虎YUI3实现,界面简洁清晰,功能非常强大,不仅可以显示单日历,双日历,三日历,甚至四日历,还可以显示节日信息以及指定日期显示范围,非常...

    yuicompressor-2.4.2.jar

    yuicompressor.jar js/css压缩 //压缩JS java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -v src.js &gt; packed.js //压缩CSS java -jar yuicompressor-2.4.2.jar --type css --charset utf-8 -v src...

Global site tag (gtag.js) - Google Analytics