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. Android 之surfaceView (画动态圆圈)

      通过之前介绍的如何自定义View, 我们知道使用它可以做一些简单的动画效果.它通过不断循环的执行View.onDraw方法,每次执行都对内部显示的图形做一些调整,我们假设 onDraw方法每秒执行 ...

  2. MySQL 语句使用到的关键字 函数 记录

    一   处理重复数据 1  使用 UNIQUE 唯一键 (添加数据) 创建表的时候设置 2 使用 DISTINCT (查询数据--过滤) eg:SELECT DISTINCT `name` from ...

  3. onInterceptTouchEvent / onTouchEvent响应事件的详析

    onInterceptTouchEvent(),onTouchEvent() 默认返回false 注:事件分发机制是由 dispatchTouchEvent() 开始分发的 onInterceptTo ...

  4. Distributed Databases and Data Mining: Class timetable

    Course textbooks Text 1: M. T. Oszu and P. Valduriez, Principles of Distributed Database Systems, 2n ...

  5. nvmw安装,用于控制node版本;

    之前一直使用的是node v2.2.0版本,挺说新版本的node解决了npm安装插件产生文件夹结构过深的问题,所以就想更新试试: 上网一看才发现,尼玛的node已经到了6.+版本了,好吧,看来还是得跟 ...

  6. Linux下解压文件

    unzip + 文件名   (解压.zip文件到当前目录) gunzip –c filename.gz > filename   (解压.gz文件到当前目录,保留原文件) tar -zxvf - ...

  7. 如何实现自定义的android WebView错误页

    一般来说,可能第一时间想到的是自定义一个html来替代webview内置的异常页面.  但是实际操作时,这种方法比较困难. 这里介绍一个简单的替代方案,希望能有所帮助. 可以采用嵌套layout的方式 ...

  8. 在windows不能正常使用boost og

    现象: 1. 在两个不同的dll中使用static的boost.log.在一个dll中的设置在另一个dll中没有起作用 原因:core::get()返回的是一个单例.在不同的dll中是不同的对象 解决 ...

  9. Python 修饰符

    def hello(fn):    def wrapper():        print "hello"        fn()        print "goodb ...

  10. bootstrap中如何让响应式图片(img-responsive)水平居中

    我们在用bootstrap排版内容的时候,有的时候在内容中需要图片水平居中对齐. 一般情况下,我们的图片都使用了 .img-responsive 类来实现响应式图片.如果需要实现响应式图片水平居中,那 ...