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 ...
随机推荐
- Oracle Minus关键字
Oracle Minus关键字 SQL中的MINUS关键字 SQL中有一个MINUS关键字,它运用在两个SQL语句上,它先找出第一条SQL语句所产生的结果,然后看这些结果有没有在第二个SQL语句的结果 ...
- OpenCV学习笔记(二)——OpenCV环境变量配置
1. 假定电脑上已经安装了VS2010程序,若没有,首先安装vs2010. 下载OpenCV,下载的文件名为"OpenCV-2.3.1-win-superpack". 2. 解 ...
- sphinx全文检索 安装配置和使用
公司项目刚刚导入大量产品数据,然后发现网站的产品搜索很卡,原本是原生sql的like来做模糊搜索,数据量20W的时候还可以接受,但是上百万就很卡了,所以需要做优化. 经过考虑,打算采用全文检索 sph ...
- css实现定高的元素在不定高的容器中水平垂直居中(兼容IE8及以上)
容器设置相对定位 元素设置宽高,并使用绝对定位,上下左右值均为0,margin:auto 如下所示: <!DOCTYPE html> <html> <head lang= ...
- leetcode刷题全纪录(持续更新)
2.Add Two Numbers 原题链接https://leetcode.com/problems/add-two-numbers/ AC解: public ListNode addTwoNumb ...
- js文件如何最后加载
总结一下,大概有三种方式 1.最简单粗暴的:将js文件放在最后写 2.window.onload当一个文档完全下载到浏览器中时,才会触发window.onload事件.这意味着页面上的全部元素对js而 ...
- 在iframe父界面获取iframe里面的标签
上一篇里边介绍了在里边利用iframe引入另一个html导航文件,有兴趣的朋友可以看一看 http://www.cnblogs.com/simba-lkj/p/6031662.html 目前遇到一些问 ...
- 关于BP网络的一些总结
背景 前段时间,用过一些模型如vgg,lexnet,用于做监督学习训练,顺带深入的学习了一下相关模型的结构&原理,对于它的反向传播算法记忆比较深刻, 就自己的理解来描述一下BP网络. 关于BP ...
- rpm 软件安装
安装 vi 软件 rpm q查询 a全部软件 e 卸载 i 安装 v 显示进度 h 以#显示 首先确定软件时候安装 rpm 实现软件的安装 卸载 升级 查询等 1)查询是否已经安装过 rpm -qa ...
- springMVC 错误页面配置
在Spring MVC应用程序中,404 error code 被合适的配置.web.xml文件中配置如下所示: <!-- spring mvc start --> <servlet ...