`
yiminghe
  • 浏览: 1466529 次
  • 性别: 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)
 
分享到:
评论

相关推荐

    yuicompressor-2.4.8.jar

    3. 运行构建:保存配置后,执行构建操作,Idea会自动调用yuicompressor对指定文件进行压缩。 除了基本的压缩功能,yuicompressor还有其他优势。例如,它支持多种语言的输入,包括JavaScript、CSS以及HTML,并且兼容...

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

    3. **安装**:运行`python setup.py install`安装库到你的Python环境。 然而,由于没有提供库的具体文档或描述,我们无法详细阐述"ore.yui"库的功能和用途。通常,一个Python库可以涵盖诸如数据处理、网络通信、...

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

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

    yui3-master.zip

    《深入理解YUI3:基于yui3-master.zip的探讨》 YUI(Yahoo! User Interface Library)是由雅虎公司开发的一套开源JavaScript库,它为Web开发者提供了丰富的功能和工具,以创建交互性强、性能优秀的网页应用。YUI3是...

    yui-hotel-calendar.rar

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

    yuicompressor-maven-plugin

    **yuicompressor-maven-plugin详解** `yuicompressor-maven-plugin`是一款强大的Maven插件,主要用于优化前端资源,特别是JavaScript和CSS文件。这个插件是基于YUI Compressor,一个由Yahoo开发的开源工具,它能...

    模块化的JavaScript库:Tangram.pdf

    2007年起,部分产品逐渐开始基于开源库(Prototype、YUI等)进行修改,形成产品内部的JS库,积累也逐渐增加。但是开源库的功能相对百度的需求都过于复杂、体积庞大,部门内出现需要百度JavaScript库的呼声。2008年初...

    grunt-yui-compressor-源码.rar

    3. **grunt-yui-compressor的配置** 在Gruntfile.js中,开发者需要配置grunt-yui-compressor插件,指定待压缩的文件、输出目录以及压缩选项。例如: ```javascript grunt.initConfig({ yui_css: { options: { ...

    org.apache.servicemix.bundles.spring-jdbc-4.0.2.RELEASE_1.zip

    Minify Maven Plugin可以自动处理这些任务,它支持YUI Compressor和Google Closure Compiler等工具进行压缩,能有效减小文件体积,提升网站性能。 总结起来,这个压缩包包含了Apache ServiceMix中的Spring JDBC模块...

    webstorm_phpstorm_yuicompressor-2.4.8.jar

    标题中的"webstorm_phpstorm_yuicompressor-2.4.8.jar"正是YUI Compressor的一个版本,适用于WebStorm和PhpStorm。这个文件是Java可执行的JAR包,包含YUI Compressor的核心压缩算法,可以处理并压缩JavaScript和CSS...

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

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

    Yahoo.Yui.Compressor.dll

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

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

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

    YUI js方法使用列子

    它通过`yui.yahooapis.com`的CDN服务提供,也可以下载到本地使用。YUI主要由以下几个部分组成: 1. **Core(核心)**:这是YUI的基础,包含了类系统、事件基础、Dom操作和I/O等基本功能。 2. **DOM(文档对象模型...

    YUI3.7.3 最新版本 带API

    3. **CSS样式工具**:YUI3包含了一套CSS工具,如样式类名管理器(YUI.addClass, YUI.removeClass等),这有助于在JavaScript中动态控制元素的样式。 4. **DOM操作**:YUI3提供了丰富的DOM操作接口,如查找元素(YUI...

    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...

Global site tag (gtag.js) - Google Analytics