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)的更多相关文章

  1. Ext JS 6 新特性和工具

    Ext JS 6 新特性和工具 Ext JS 6 带来很多新特性.工具和改进.以下是一些亮点: • 合并了 Ext JS & Sencha Touch - 在 Ext 6, 你可以访问 Ext ...

  2. Ext JS 4 新特性2:配置项属性(config)之二

    Ext JS 4 新特征2:配置项属性config之二 ☞ Config(自动的setters和getters) Ext JS 4介绍了config声明方式,在Ext JS 中也有几个例子:在运行程序 ...

  3. Ext JS 4 新特性2:配置项属性(config)之一

    Ext JS 4 新特征2:配置项属性config 最新版本的Ext JS 4.2的另外一个伟大的新特征就是增加了configuration配置项属性,当我们在创建一个新类的时候,经常性的要设置某某属 ...

  4. html5新特性contenteditable 属性更容易实现动态表单

    介绍html5新特性的一个属性:contenteditable 作用域全局.所有的块标签都可以,例如:span.p.div.td等标签.但是,不可以作用域<br/>类型的标签. conte ...

  5. css3的新特性选择器-------属性选择器

    自己学css的时候比较乱,这次趁着复习把css3的新特性选择器和css2以前不怎么用的选择器做一个总结 <div id="parent"> <p>I'm a ...

  6. JS 4 新特性:混合属性(mixins)之二

    Mixins many classes[混合许多个类] 迄今为止,我们已经学会了简单的继承,我们还能够通过使用mixins处理机制来混合许多类.源于这种理念是非常简单的:我们能够把许多个类最终混合到一 ...

  7. C#语言的新特性及相关信息

     .ENT版本 NET 2.0 :CLR, WinForms ,Wed Services,ASP.NET NET 3.0 :WCF,WF,WPF,CardSpace NET 3.5 :LINQ ,AJ ...

  8. vs2015 新特性

    vs2015 新特性 自动属性的增强 http://www.kwstu.com/ArticleView/manong_201411200854239378

  9. css3新特性学习系列 -- border

    css3新特性 border属性(border-radius.border-image.box-shadow)详解 1.border-radius  圆角 支持:IE9+ 用法: border-rad ...

随机推荐

  1. 退役&&搬家

    牡丹江与鞍山两站作为最后的结束站.一银一铜就此结束了~ 此博客用来怀念ACM就此保留并不添加任何其它与其无关内容. ------------------------------------------ ...

  2. html小知识点汇总(浏览器导航上显示图标、div无高度时试着清除浮动、文字环绕图片、字体加粗、div按百分比分、已有的不合适的class,针对特定的标签进行修改)

    1.新点击的网页,在浏览器导航上显示图标: 像这种效果: <head> <meta charset="UTF-8"> <meta name=" ...

  3. 多个div同时居中的写法

    多个div在某个div的中间,他们个数不一定但是需要在那个父级div中显示(和margin:0 auto一样的效果) <!DOCTYPE html><html lang=" ...

  4. testlink部署与迁移

    几个特殊的文件: 1.D:\xampp\htdocs\testlink\config.inc  安装配置文件,此处需要修改安装目录(g_repositoryPath.log_path) 2.D:\xa ...

  5. MP3光标移动

    #include<iostream> #include<string.h> using namespace std; int main() { int N; cin>&g ...

  6. comparator接口与compare方法的实现

    刷leetcodecode时看到一道题需要利用自定义的比较器进行排序,最开始一头雾水,看了API终于懂了~ Arrays.sort(T[] a,Comparator<? super T>  ...

  7. CSS3--box-shadow

    box-shadow:属性向框添加一个或多个阴影: 语法:box-shadow:h-shadow v-shadow blur pread color inset; h-shadow:必需,水平阴影的位 ...

  8. Selenium ide录制回放错误Timed out after 30000ms

    [error] Timed out after 30000ms     该问题可能是速度控制条播放速度过快导致,调整播放速度至slow 

  9. linux查找进程,查找僵死进程,查找僵死进程并自动杀掉

    查找进程: ps -aux | grep  flume  /  netstat -anop | grep 8080(端口号) 常规杀进程: kill  pid 查看僵死进程: ps -A -o sta ...

  10. Redis常用命令入门2:散列类型

    散列命令 散列类型的键值其实也是一种字典解耦,其存储了字段和字段值的映射,但字段值只能是字符串,不支持其他数据类型,所以说散列类型不能嵌套其他的数据类型.一个散列类型的键可以包含最多2的32次方-1个 ...