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

在构建 Ext.Class 之时,它会分配既细又专的处理器(processors),专门处理构成类定义的每一个部分。当前Ext缺省提供了一些处理器,包括有:mixins 多态的,配置项函数的,以及处理类扩展的都是必备的。除了缺省处理器外,还可以随便自定义预处理器,预处理器是完全交给开发者可控的。因为通过分解类处理单元,就可以达到了扩展性的目的,以便允许我们针对不同的场景,去制定更合适的处理器从而满足需求(具体组装的过程可仿照下面介绍的 static 处理器举一反三)。

一图胜千言,下图即官方所出的 Ext.Class 流程图。欲了解其中原理?不妨进入流程看看大致的轮廓吧!先从最左上角的前头起前进,以此为出发点,按箭头方向走,走完就是从处理器的角度看的流程。至于还有一个角度,就是正下方的“Define”到“Callback”的流程,这是站在 Ext.Class 其总体上“输入、输出”的角度来来看。无论出于哪个角度,皆是围绕于 Ext.Class 的内部工作流进行的。

处理器(processors)分预处理器(preprocessors)和后处理器两种(postprocessors)。按照原作者Ed解释道,一旦类“准备好了(ready)”就是认为是预处理器执行完毕的阶段,这时候可以把类实例化了可称为 “ready”;剩下的就属于后处理器的阶段——两者就是根据这样来区分的。典型地,后处理器负责如类简写方式 xtype,兼容旧版,还有向 Manager 登记之类的任务,总之都是围绕类的后期工作,而绝对不会影响类的逻辑行为。

Ext.Class 构造器内部中透过送入回调函数来达成处理器之间的接力,也就是说,其过程不是同步的。之所以执行处理器的每一步都是异步的(asynchronously)是为了便于实现异步加载。排在预处理器列表中第一个便是 Loader,用于加载页面上却还没有的类。我们前面的教程中已经为大家介绍过关于Loader的用法,而其中异步加载的秘密正在于此!

运行完 Loader 之后,Ext.Class 安排 Extend 的预处理器接着进行,然后是 Mixins 多态、Config 等等,最后就是 static 处理的部分。流程如上图所示。

预处理器其运行是完全可控的,可以随便自定义预处理器的每一步。好比静态的处理器,我们就详细的看看 static 预处理器是如何写的:

Ext.Class.registerPreprocessor('statics', function(cls, data, callback) {
if (Ext.isObject(data.statics)) {
var statics = data.statics,
name;
// 原理只是简单地拷贝一下
for (name in statics) {
if (statics.hasOwnProperty(name)) {
cls[name] = statics[name];
}
}
}
delete data.statics;
// 已经完成好了当前预处理器,可进入下一个预处理器。
if (callback) {
callback.call(this, cls, data);
}
});
// 改变数组的顺序便可以改变加载预处理器的顺序。
Ext.Class.setDefaultPreprocessors(['extend', 'mixins', 'config', 'statics']);

上述过程其实非常直观易明。我们登记了Ext.Class 的一个预处理器名曰 “static”,同时一定要传入的就是这个 static 所对应的函数(第二个参数),它会传入刚刚建立的Ext.Class,也就是那个新类,以及类的配置参数和回调函数(在预处理器执行后的回调函数),构成三个的参数传入。由代码可见,static 预处理器的工作量其实没什么,只是看看我们有否声明了 static 属性,有的话便拷贝 static  配置项对象到类对象身上。例如我们打算写一个 getNextId 的静态方法分配给类。写法如下:

Ext.define('MyClass', {
statics: {
idSeed: 1000,
getNextId: function() {
return this.idSeed++;
}
}
});

静态处理器产生的是静态成员,所以直接可以在类身上调用方法,不用创建 MyClass 实例。

MyClass.getNextId(); //1000
MyClass.getNextId(); //1001
MyClass.getNextId(); //1002
... 等等

最后一步,就是就是运行 callback 的回调函数(在上图中有指示的)。此时此刻,您就可以在程序中使用这个类了。于是,我们就在这个回调中实例化 MyClass,如果成功也就明确了 Ext.Window 所依赖的对象均加载回来了。

Ext.define('MyClass', {
extend: 'Ext.Window'
}, function() {
// MyClass此时此刻可用了
var cls = new MyClass();
cls.setTitle('Everything is ready');
cls.show();
});

最后一点,性能。毋庸讳言,复杂的代码会降低性能——连主程 Ed 都承认这点。他说,虽然比较复杂,但为了灵活性和易用性,就是算上这些代价,也是值得的。

参考资料:

时间: 2024-08-23 23:59:11

透视Ext JS 4类背后的机制与特点(下)的相关文章

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

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

Ext JS 4的倒数:动态加载和新的类机制 Count down to Ext JS 4: Dynamic Loading and New Class System (上)

Ext JS 4的倒数:动态加载和新的类机制 Count down to Ext JS 4: Dynamic Loading and New Class System (上)   January 19, 2011 by Ed Spencer 翻译 Ext中文网(ajaxjs.com) Frank http://www.sencha.com/blog/2011/01/19/countdown-to-ext-js-4-dynamic-loading-and-new-class-system/ Ext

《Ext JS权威指南》——1.4节Ext JS的开发工具的获取、安装与配置介绍

1.4 Ext JS的开发工具的获取.安装与配置介绍 1.4.1 Ext DesignerExt Designer是一个所见即所得的创建Ext JS界面的工具软件,目前版本是1.2版,支持Ext JS 3.x和4.x版本,可在http://www.sencha.com/products/designer/download/下载试用版本. 安装双击下载文件将看到如图1-6所示的语言选择窗口. 选择简体中文后,单击"OK"按钮后将看到如图1-7所示的设定窗口. 单击"前进&quo

《Ext JS实战》——2.2 Ext.Element类

2.2 Ext.Element类 所有使用了JavaScript的Web应用程序都会围绕着一个核心,也就是HTML的Element.JavaScript对DOM节点的访问能力让我们能够随意.灵活地操作DOM,包括增加.删除.美化或者修改文档中的任意节点内容.通过ID引用一个DOM节点的传统方法是: 这个getElementById方法很好用,可以执行一些类似改变innerHTML的内容,或者美化和配置一个CSS类这样的基本任务.不过要是想对该节点做更多的事情,例如管理它的事件,在有鼠标点击时应用

Ext JS 4官方文档之三 -- 类体系概述与实践_基础知识

Ext JS 4从底层对类体系进行了重构,这是Ext JS历史上的第一次对类体系的巨大重构.新的架构几乎被应用到每一个Ext JS 4的类中,所以希望您在开始编码前能对它有一定的了解,这是非常重要的. 这篇手册适用于任何想创建新类或者继承Ext JS 4中现存类的开发人员,分为4部分: 第一部分: "概述" -- 解释了创建一个强健的类体系的必要性 第二部分: "命名规范" -- 讨论了对类.方法.属性.变量和文件的最佳命名规范 第三部分: "实践&quo

《Ext JS 4 First Look》翻译之一:新特性

第一章 新特性   Extjs 4相对于之前的版本作出了重大的修正.其中包括全新的类系统.新平台的引入.API的修整和加强还有新组件的引入(如新的图表和图形组件).Extjs 4提供更快速.更稳定的用户体验,并且让开发人员更容易上手. 在本章我们将学习到下列内容: 1.1. 入手Extjs 4 1.1.1. 包和命名空间的改进 1.1.2. API文档的使用(日后经常和它打交道) 1.2. Extjs新平台的架构 1.3.  Extjs 4的类系统 1.3.1. 类定义与对象实例化 1.3.2

《Ext JS实战》——第1章 独特的框架 1.1 认识Ext JS

第一部分 Ext JS介绍 欢迎阅读<Ext JS实战>,本书是对Ext JS世界的深度之旅.在本书中,不仅要学习如何利用Ext JS框架完成各种任务,还会学习构成框架的各种组件和部件之间的差异. 通过第1章到第3章的学习,我们能够对框架的基础部分有必要的理解.我们的旅途从第1章正式起航,在第1章会学习框架的基础知识.第2章是"热身"章,会了解一些能让应用程序正确运行的关键要素.第3章会涉及框架的一些内部机制,例如组件模型和容器模型. 学完这一部分后,就可以探索Ext JS

《Ext JS实战》——1.4 Ext JS 3.0的新特性

1.4 Ext JS 3.0的新特性 Ext JS 2.0中引入的一些变化是颠覆性的,这就导致从级到2.0相当困难.这主要是因为这一版引入了一个更加现代的布局管理器以及一个崭新的.健壮的组件层次,许多Ext JS 1.x的代码都会因此而崩溃.值得庆幸的是,由于Ext JS 2.0的良好的工艺设计,从Ext JS 2.0到3.0的移植就非常容易了.尽管Ext JS 3.0新增的内容并不怎么神奇,不过最新的版本还是可圈可点的,有些新增的特性还是值得讨论的. 1.4.1 Ext JS通过Direct完

Ext JS 4的倒数:程序员预览 Countdown to Ext JS 4: Developer Preview

February 16, 2011 | Ed Spencer 翻译 Ext中文网(ajaxjs.com) Frank http://www.sencha.com/blog/ext-js-4-developer-preview/ Ext 4终于发布了,咱们可以下载源码看看.俺也第一时间.二话不说,搞份汉化的发布博文.Ext中文网定会持续跟进.frank 谨代表全体的ExJS项目开发组成员,我本人非常由衷地宣布Ext JS 4开发者预览版本,正式可用了!ExtJS4 不但为历来变革最大的一次版本,而