透视Ext JS 4类背后的机制与特点(中)

  1. 云栖社区>
  2. 博客>
  3. 正文

透视Ext JS 4类背后的机制与特点(中)

sp42 2011-02-21 13:20:00 浏览345
展开阅读全文

配置项config

最后要说明的是“config”配置项对象。配置项对象就是Ext组件的参数,它以对象的key/value形式出现。大多数的配置项可以在运行时作改变。上面的例子中,我们声明了Ext.Windows的“title”配置项,默认值为“Window Title”。设置类的期间就会有这四个方法给我们: getTitle(),setTitle(),resetTitle()和applyTitle()。

  • getTitle – 返回当前标题。
  • setTitle – 设置新的标题。
  • resetTitle – 恢复标题的默认值(“Window Title”)
  • applyTitle – 这是一个你可以定义的模板方法。当执行setTitle时就会执行。

也就说,当改变标题的时候随之就会执行applyTitle方法。例如我们想更新标题的DOM元素如下。

Ext.define(‘Ext.Window’, { //..如上, config: { title: 'Window Title' }, // 更新标题其所在的DOM innerHTML。 applyTitle: function(newTitle) { this.titleEl.update(newTitle); } });

这一切都是自动化的,节省了编码时间之余还带来可维护性的提高。

tips:若不能读取配置项,可在构造器中执行:Ext.Base.initConfig()。

走近点去看

以上这些多态、静态项、配置项getter/setter都不是魔法,却给基于Prototype OO相对简单的JavaScript带来神奇般的效果,原因在于:

  • Ext.Base – 任何一个类都会继承的Ext.Base。它是居于最底层的一个类。
  • Ext.Class – 创建新的类工厂。
  • Ext.ClassLoader – 加载器用于保证页面上找不到类所进行的工作。
  • Ext.ClassManager –启动类的创建过程和管理依赖关系。

所列对象都是幕后的功臣,它们为你定义和使用某一个类都作出自己应有的贡献,而你却不一定要全部知晓它们内部细节怎么样,懂得如何运用即可。但是对于充满好奇心的俺们怎能够满足于此呢?还是让在下为我们揭开魔法的奥秘吧!其实,你常所用的两个函数 Ext.define和Ext.create不约而同地都来自Ext.ClassManager的方法,而背后的思路,就是利用其他三个类来综合打造你所写的类。

要注意Ext.Class和Ext.Base之间的区别才能搞清楚问题。Ext.Base是为每一个类而设的最顶层超类,换言之,每一个类都继承于Ext.Base(所有类的抽象类)。Ext.Class就只是一个单独意义上的类(仅为类本身所服务。可认为类的类),每一个类对象都是 Ext.Class的实例,当然,还是Ext.Base的子类(Ext.Class的超类有Ext.Base)。为说明清楚,我们创建一个最简单的类。没有继承其他类。

Ext.define( 'MyClass' , { someFunction: function () { console.log( 'Ran some function' ); } });

因为没有继承其他类,所以MyClass的基类就是Ext.Base。我们可以透过一个树状的关系图来认识上述的关系。

该树状图由上至下演示了类的整个继承结构,根对象就是Ext.Base,每一个类都继承于Ext.Base,所以说,图中所指的全部对象,它既是Ext.Base的子类,又为Ext.Class的实例。类本身也是一种对象,其类型就是Ext.Classs,故所以对类这个对象我们还可以接着修改之,例如为MyClass加入Observable功能。

// 这里我先声明了多态observable, Ext.define('MyClass', { mixins: { observable: 'Ext.util.Observable' } }); // 然后,在其他地方,还可以继续的对MyClass添加新功能 MyClass.mixin('draggable', 'Ext.util.Draggable');

 

可以说,动态类就是这么生成的了。该技术点在旧版本中难以实现的,现在却可以轻松做到,甚至元数据的编程。

在透视Ext JS 4类背后的机制与特点(下),我们对构成Ext类元素作更深入的分解,值得大家留意!

网友评论

登录后评论
0/500
评论
sp42
+ 关注