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
cropbox.js 是一个实现了图像在线剪裁的 jQuery 、YUI 插件和 JavaScript 库。上传的图片可以使用滚轮放大与缩小当前选择的图片,也可以点击按钮“+”、“”-“实现放大缩小,”后点击“裁切”后显示裁减的图片
#酒店价格日历 ####基于YUI3开发的价格日历组件 @name:Y.PriceCalendar @requires:['node', 'base-base', 'event-mouseenter']
yuicompressor.jar是JS压缩工具、前端优化神器、yuicompressor-2.4.8.jar
3. css文件中含有中文时,如果css编码和页面编码不一致,需要手动将中文替换为\xxxx, 详细说明请参考compressor.cmd中的说明 4. 如果不需要native2ascii, 可以只安装JRE即可(需要手动修改下compressor.cmd) Ref: ...
yui3-master.zip
grunt-yui-compressor-源码.rar
yuicompressor压缩html、js、css、scss、jsp 方法:Monitoring.init 初始化基本参数: suffix : 压缩的后缀,如min,common.js压缩后为common.min.js,html与jsp不参与 filterDir:过滤目录,正则表达式,如(./...
yuicompressor-2.4.2.jar yuicompressor-2.4.7.jar jsZip.exe yuicompressor yui compressor js压缩工具 javascript压缩工具 css压缩工具 ------------------------------------ //压缩JS java -jar yui...
UI Library (YUI) 是一个开放源代码的 JavaScript 函数库,为了能建立一个高互动的网页,它采用了AJAX, DHTML 和 DOM 等程式码技术。它也包含了许多 CSS 资源。使用授权为 BSD许可证 工具 动画 协助达成位置...
Yahoo.Yui.Compressor.dll文件下载,解决找不到Yahoo.Yui.Compressor.dll的问题 Yahoo.Yui.Compressor.dll控件常规安装方法(仅供参考): 一、如果在运行某软件或编译程序时提示缺少、找不到Yahoo.Yui....
博客在线地址: : 之后一些练习可能也会丢进来。本博客未采用框架,直接采用webpack组织构建,写法上不太严谨。 目录结构 dist :webpack打包后的项目文件; src : main.html :标题栏及主页内容展示入口; ...
压缩效果如下: 压缩前: /** * @author:aliued-wd junbiao.zhujb */ function zipJs(parameter1,parameter2,parameter3,parameter4){ var parameter5 = parameter1; var parameter6 = parameter2; var parameter7 =...
压缩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通用日期日历控件是一款由淘宝前端开发人员昂天开发,基于雅虎YUI3实现,界面简洁清晰,功能非常强大,不仅可以显示单日历,双日历,三日历,甚至四日历,还可以显示节日信息以及指定日期显示范围,非常...
yuicompressor.jar js/css压缩 //压缩JS java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -v src.js > packed.js //压缩CSS java -jar yuicompressor-2.4.2.jar --type css --charset utf-8 -v src...