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

简介: 在构建 Ext.Class 之时,它会分配既细又专的处理器(processors),专门处理构成类定义的每一个部分。当前Ext缺省提供了一些处理器,包括有:mixins 多态的,配置项函数的,以及处理类扩展的都是必备的。

在构建 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 都承认这点。他说,虽然比较复杂,但为了灵活性和易用性,就是算上这些代价,也是值得的。

参考资料:

目录
相关文章
|
6天前
|
JavaScript 安全 前端开发
乾坤js隔离机制
乾坤js隔离机制
|
11天前
|
Web App开发 JavaScript 前端开发
JavaScript 类(class)
JavaScript 类(class)
15 2
JavaScript 类(class)
|
9天前
|
JavaScript 前端开发 Java
JavaScript 类知识点概览
概览JavaScript中类的知识点,包括类的定义和实现、添加方法和get/set方法、类的继承和静态方法的使用。通过学生类和人员类的例子,演示了类的构造器、方法定义、继承关系和静态方法的调用。
JavaScript 类知识点概览
|
9天前
|
JavaScript 前端开发 开发者
JavaScript 类继承
JavaScript 类继承
12 1
|
12天前
|
JavaScript 安全
ES6中JS类实现的解读
ES6中JS类实现的解读
15 2
|
1月前
|
JavaScript 前端开发
JavaScript基础知识-构造函数(也称为"类")定义
本文介绍了JavaScript中构造函数(也称为“类”)的定义和使用方法。
26 1
JavaScript基础知识-构造函数(也称为"类")定义
|
17天前
|
JavaScript 前端开发 索引
|
24天前
|
JavaScript 前端开发
JS中Promise的类式实现写法
JS中Promise的类式实现写法
|
6天前
|
C++ Windows
HTML+JavaScript构建C++类代码一键转换MASM32代码平台
HTML+JavaScript构建C++类代码一键转换MASM32代码平台
|
6天前
|
缓存 JavaScript 前端开发
常见的 JavaScript 隔离机制
常见的 JavaScript 隔离机制