博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS 4 新特性:混合属性(mixins)
阅读量:5064 次
发布时间:2019-06-12

本文共 3721 字,大约阅读时间需要 12 分钟。

 

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类。
*/

上代码了:

1 Ext.onReady(function() {   2              3             Ext.define('MyClass.A', { 4              5                     show: function(){ 6                             console.log("输出A"); 7                     } 8                 }); 9             10             Ext.define('MyClass.B', {11             12                     show: function(){13                             console.log("输出B");14                     }15              });16             17             Ext.define('MyClass.CC', {18             19                     show: function(){20                             console.log("输出C爸");21                     }22              });23         24             Ext.define('MyClass.C', {25                     26                     extend: 'MyClass.CC',27                     28                     mixins:{29                         classA : 'MyClass.A',30                         classB : 'MyClass.B',31                     },32                     33                     show: function(){34                             console.log("输出C");35                     }36     37             });    38             39             var classc = Ext.create('MyClass.C');40             classc.show();        //在控制台输出C41             42                 43 });

结论二:方法的调用遵循最近优先原则,优先级顺序从自己到别人——首先是当前自己类、自己的父类、最后去找别人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()

 

 

转载于:https://www.cnblogs.com/caoshangfei/p/3190718.html

你可能感兴趣的文章
SQL优化
查看>>
利用Highcharts插件制作动态图表
查看>>
用C语言操纵Mysql
查看>>
轻松学MVC4.0–6 MVC的执行流程
查看>>
4.9 Parser Generators
查看>>
[10月18日的脚本] 从Access中导入多个表到Excel
查看>>
centos下安装nginx
查看>>
redis集群如何清理前缀相同的key
查看>>
linux的学习系列 9--网络通信
查看>>
redis7--hash set的操作
查看>>
20.字典
查看>>
Python 集合(Set)、字典(Dictionary)
查看>>
oracle用户锁定
查看>>
(转)盒子概念和DiV布局
查看>>
Android快速实现二维码扫描--Zxing
查看>>
获取元素
查看>>
nginx+lighttpd+memcache+mysql配置与调试
查看>>
ubuntu12.04 启动apache2 对.htaccess 的支持
查看>>
proxy写监听方法,实现响应式
查看>>
前端工具----iconfont
查看>>