JS 4 新特性:混合属性(mixins)
Ext JS4的新特征1:混合属性(mixins)
组合是Extjs4的新特性,可用于实现多继承的情况。该属性会以同步方式加载类文件,并实例化该类(译者推理其内部使用Ext.create方法)。直接上实例吧!
基本用法:
/*JS4新特性:混合属性(mixins)使用情况是用于同级类引用,很明显这是JS4的一种新的特性,完全不同于extend继承,A类、B类、C类为同一等级。C类可以任意调用它的mixins属性定义中的类函数。*/
Ext.onReady(function() {
Ext.define('MyClass.A', {
showA: function(){
console.log("输出A");
}
});
Ext.define('MyClass.B', {
showB: function(){
console.log("输出B");
}
});
Ext.define('MyClass.C', {
mixins:{
classA : 'MyClass.A',
classB : 'MyClass.B',
},
showC: function(){
console.log("输出C");
}
});
var classc = Ext.create('MyClass.C');
classc.showA(); //在控制台输出A
classc.showB(); //在控制台输出B
classc.showC(); //在控制台输出C
});
结论一:定义了mixins类,C类很简单的就可以去调用A类、B类的中的任意函数了。
二、A类、B类、C类中具有相同的方法show()时,
/*JS4新特性:混合属性(mixins)使用情况2:第2种情况:C类也有show(),C类的mixins中的A类、B类也都拥有相同的方法show()时,自己最先
C类没有show(),c.show()就会去它的父类CC.show().
如果C类自己没有show(),父类也没有,就会去找mixins中的A类、B类的顺序寻找,
这也是很好理解的。其执行顺序为:当前类->父类->mixins类。
*/
上代码了:
Ext.onReady(function() {
Ext.define('MyClass.A', {
show: function(){
console.log("输出A");
}
});
Ext.define('MyClass.B', {
show: function(){
console.log("输出B");
}
});
Ext.define('MyClass.CC', {
show: function(){
console.log("输出C爸");
}
});
Ext.define('MyClass.C', {
extend: 'MyClass.CC',
mixins:{
classA : 'MyClass.A',
classB : 'MyClass.B',
},
show: function(){
console.log("输出C");
}
});
var classc = Ext.create('MyClass.C');
classc.show(); //在控制台输出C
});
结论二:方法的调用遵循最近优先原则,优先级顺序从自己到别人——首先是当前自己类、自己的父类、最后去找别人mixins类。
三、在当前类中引用mixins类中的方法
Ext.onReady(function() {
Ext.define('MyClass.A', {
show: function(){
console.log("输出A");
}
});
Ext.define('MyClass.C', {
mixins:{
classA : 'MyClass.A'
},
alert: function(){
this.mixins.classA.show();
}
});
var classc = Ext.create('MyClass.C');
classc.alert(); //在控制台输出A
classc.show(); //这就是调用mixins的好处,简单一句话胜似多出转折。
/*classc本身是没有show()函数的,就是没有加了mixins,所以它有了。*/
});
结论三:classc本身是没有show()函数的,就是因为加了mixins,所以它就非常简单了拥有了A类中的函数show()
JS 4 新特性:混合属性(mixins)的更多相关文章
- Ext JS 6 新特性和工具
Ext JS 6 新特性和工具 Ext JS 6 带来很多新特性.工具和改进.以下是一些亮点: • 合并了 Ext JS & Sencha Touch - 在 Ext 6, 你可以访问 Ext ...
- Ext JS 4 新特性2:配置项属性(config)之二
Ext JS 4 新特征2:配置项属性config之二 ☞ Config(自动的setters和getters) Ext JS 4介绍了config声明方式,在Ext JS 中也有几个例子:在运行程序 ...
- Ext JS 4 新特性2:配置项属性(config)之一
Ext JS 4 新特征2:配置项属性config 最新版本的Ext JS 4.2的另外一个伟大的新特征就是增加了configuration配置项属性,当我们在创建一个新类的时候,经常性的要设置某某属 ...
- html5新特性contenteditable 属性更容易实现动态表单
介绍html5新特性的一个属性:contenteditable 作用域全局.所有的块标签都可以,例如:span.p.div.td等标签.但是,不可以作用域<br/>类型的标签. conte ...
- css3的新特性选择器-------属性选择器
自己学css的时候比较乱,这次趁着复习把css3的新特性选择器和css2以前不怎么用的选择器做一个总结 <div id="parent"> <p>I'm a ...
- JS 4 新特性:混合属性(mixins)之二
Mixins many classes[混合许多个类] 迄今为止,我们已经学会了简单的继承,我们还能够通过使用mixins处理机制来混合许多类.源于这种理念是非常简单的:我们能够把许多个类最终混合到一 ...
- C#语言的新特性及相关信息
.ENT版本 NET 2.0 :CLR, WinForms ,Wed Services,ASP.NET NET 3.0 :WCF,WF,WPF,CardSpace NET 3.5 :LINQ ,AJ ...
- vs2015 新特性
vs2015 新特性 自动属性的增强 http://www.kwstu.com/ArticleView/manong_201411200854239378
- css3新特性学习系列 -- border
css3新特性 border属性(border-radius.border-image.box-shadow)详解 1.border-radius 圆角 支持:IE9+ 用法: border-rad ...
随机推荐
- HTML的基本骨架
HTML:生命html网页当前范围,所有内容写在该标签中 head:用来设置当前页面的一些属性及样式等等.这部分是用户看不到的,title除外. body:网页的内容部分,网页中所有布局写在该标签中. ...
- build.fxbuild打不开 Failed to create the part's controls
Failed to create the part's controls 以文本形式打开之后,发现编码的地方不是常用编码 将之修改为GBK 然后就可以正常打开了 最后把eclipse中的编码统一设置为 ...
- OpenCV 计算区域的内部参数
对于一个区域,怎么进一步针对区域内部特征进行处理呢 ? 首先,我们要提取出来内部的某些特征才能说话,下面提取一些简单的特征,话不多说见代码: 1.平均数及方差参数: Mat tempMean, tem ...
- 分布式事务二阶提交DTS系统
前端时间写新交易系统时,经常碰到事务一致性问题,网上搜了一下,有一些解决方法,采用了扫表补偿的方式来完成,刚开始只有几个接口需要处理,工作量还可以,但是后续随着需求的增加,这些场景错综复杂,导致大量时 ...
- Ajax聊天
结构: index.html <!DOCTYPE html> <html> <head> <title>index.html</title> ...
- Oracle ORA-12154: TNS: 无法解析指定的连接标识符”错误
主要原因: 1.监听服务没有起起来.windows平台个一如下操作:开始---程序---管理工具---服务,打开服务面板,启动oraclehome92TNSlistener服务. 2.database ...
- HTTP性能小测试
一直说node.js如何如何好,就来测试一下吧~~ 首先接受一个小工具 Apache Bench简称ab 可以用来测试http性能 利用Apache Bench测试Web引擎性能关于此工具的详细介绍参 ...
- swiper横向轮播(兼容IE8)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- django中css问题
django中加载的css,js,图片其中js和图片可以加载出来,而css没有效果.原因如下: 这是因为你安装的某些IDE 或者其他更改了注册表导致的系统的注册表\HKEY_CLASSES_ROOT\ ...
- (转)css3-box-sizing属性详解
box-sizing是CSS3的box属性之一.一说到CSS的盒模型(Box model)我想很多人都会比较烦,特别是对于新手,然而这个Box model又是我们CSS运用中比较重要的一个属性.那么C ...