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

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

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

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

参考资料:

目录
相关文章
|
2月前
|
存储 JavaScript 前端开发
深入理解JavaScript中的事件循环(Event Loop):机制与实现
【10月更文挑战第12天】深入理解JavaScript中的事件循环(Event Loop):机制与实现
84 3
|
3月前
|
JavaScript 安全 前端开发
乾坤js隔离机制
乾坤js隔离机制
|
20天前
|
JavaScript 安全 中间件
深入浅出Node.js中间件机制
【10月更文挑战第36天】在探索Node.js的奥秘之旅中,中间件的概念如同魔法一般,它让复杂的请求处理变得优雅而高效。本文将带你领略这一机制的魅力,从概念到实践,一步步揭示如何利用中间件简化和增强你的应用。
|
1月前
|
消息中间件 JavaScript 中间件
深入浅出Node.js中间件机制
【10月更文挑战第24天】在Node.js的世界里,中间件如同厨房中的调料,为后端服务增添风味。本文将带你走进Node.js的中间件机制,从基础概念到实际应用,一探究竟。通过生动的比喻和直观的代码示例,我们将一起解锁中间件的奥秘,让你轻松成为后端料理高手。
28 1
|
2月前
|
JSON JavaScript 中间件
深入浅出Node.js中间件机制
本文将带你探索Node.js中一个核心概念——中间件机制。我们将通过浅显的语言和生动的比喻,揭示中间件如何作为请求和响应之间的“交通枢纽”,在应用程序中起到至关重要的作用。从基础原理到实际应用,你将了解到中间件不仅简化了代码结构,还提高了开发效率,是Node.js开发不可或缺的一部分。
53 1
|
2月前
|
JavaScript 前端开发 开发者
原型链深入解析:JavaScript中的核心机制
【10月更文挑战第13天】原型链深入解析:JavaScript中的核心机制
33 0
|
2月前
|
JavaScript 安全 中间件
深入浅出Node.js中间件机制
【10月更文挑战第4天】在探索Node.js的海洋中,中间件机制犹如一座灯塔,为开发者指引方向。本文将带你一探究竟,从浅入深地理解这一核心概念。我们将通过生动的比喻和实际代码示例,揭示中间件如何在请求和响应之间搭建桥梁,实现功能的扩展与定制。无论你是初学者还是有经验的开发者,这篇文章都将为你提供新的视角和深入的理解。
50 0
|
2月前
|
移动开发 JavaScript 前端开发
【JavaScript】JS执行机制--同步与异步
【JavaScript】JS执行机制--同步与异步
21 0
|
2月前
|
前端开发 JavaScript 开发者
深入理解JavaScript中的对象与类
深入理解JavaScript中的对象与类
16 0
|
3月前
|
C++ Windows
HTML+JavaScript构建C++类代码一键转换MASM32代码平台
HTML+JavaScript构建C++类代码一键转换MASM32代码平台