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. Redis教程(三) list类型

     一.概述: redis的list类型其实就是一个每个子元素都是string类型的双向链表.所以[lr]push和[lr]pop命令的算法时间复杂度都是O(1) 另外list会记录链表的长度.所以ll ...

  2. sshfs三步走----实用(mac)

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #ffffff } p.p2 { margin: 0.0px 0. ...

  3. 【转】 C++模板详解

    C++模板 模板是C++支持参数化多态的工具,使用模板可以使用户为类或者函数声明一种一般模式,使得类中的某些数据成员或者成员函数的参数.返回值取得任意类型. 模板是一种对类型进行参数化的工具: 通常有 ...

  4. javadoc相关问题

    欢迎和大家交流技术相关问题: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://g ...

  5. 强大的打印功能jatoolsPrinter使用总结

    最近功能做项目,需要实现打印条码标签的功能,对于第一次接触打印机的小白来说简直是折磨死我拉,公司采购的打印机是斑马的GK888T,其实,如果单纯的想实现能打印出来标签的话,直接用window.prin ...

  6. MongoDB 备份(mongodump)与恢复(mongorestore)

    MongoDB数据备份 在Mongodb中我们使用mongodump命令来备份MongoDB数据.该命令可以导出所有数据到指定目录中. mongodump命令可以通过参数指定导出的数据量级转存的服务器 ...

  7. yii2-basic后台管理功能开发之三:自定义GridView列显示

    在第二篇 yii2-basic后台管理功能开发之二:创建CRUD增删改查 中,我们利用gii工具生成的结果一般并不是我们想要的结果. 我们需要根据自己的需求自定义列显示.我遇到的主要是一下变更: 时间 ...

  8. 第一个Asp.net小项目,主页写了下后台代码

    一个比较完善的登录模块,就目前的知识范围来说应该算是完美的. 涉及到:cookies,Session,验证码等知识面 Cookies存放一组值: HttpCookie cook = new HttpC ...

  9. DEVExpress GridControl|TableView |FormatConditions 按一定格式设置相应内容

    Get到一个新技能,感觉好棒.摘自DEV官网:https://www.devexpress.com/Support/Center/Example/Details/T135593 <Window ...

  10. 关于classList的API

    <body class="a b c"> ...... </body> document.body.classList可以取得body的classList属 ...