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

简介: 上次的资料中我们跟大家介绍了Ext JS 4 的类机制大概如何,主要围绕传统 OO 机制而设计,从而打算弥补了 Prototype 继承的不足。虽然性质上仍为模拟手段,但包含了比旧版本更为完整的 OO 特征。

上次的资料中我们跟大家介绍了Ext JS 4 的类机制大概如何,主要围绕传统 OO 机制而设计,从而打算弥补了 Prototype 继承的不足。虽然性质上仍为模拟手段,但包含了比旧版本更为完整的 OO 特征。Ext JS 4(连同 Ext Core)提供的新功能有:

  • 继承方面用 Ext.defined 代替了原来 Ext.extend 的写法。
  • 自动计算依赖关系及动态类加载。
  • 多态
  • 静态成员
  • 为配置项自动生成的 getter/setter 方法

如果还是感觉理解得不够透彻,一点的建议就是花多点时间浏览一下资料,还有在线的例子。今天我们将会更深入到类机制其背后的原理去看看。

继承

大体从外观来说,新的类机制会是这样子的:

Ext.define('Ext.Window', { extend: 'Ext.Panel', requires: 'Ext.Tool', mixins: { draggable: 'Ext.util.Draggable' }, config: { title: "Window Title" } });

以上演示的是 Ext.Window 类的简化版本,Windows 的写法就是这样子了。首先要设置 Windows 为 Panel 的子类(extend),并依赖于 Ext.Tool 类(requires),然后混入(mixns)Ext.util.Draggable。嗯,过程大致这样。下面我们要展开分析,并穿插几个新的概念。其一、“extend”的声明就如你所料的,告诉 ExtWindows 应该是 Panel 对象的子类。extend 不是新的概念,它跟过去我们比较熟悉的 Ext.extend() 无异,这里就不展开复述了。其二、“requires”告诉 Ext 在 Window 类出现之前应该要准备那些类。该类依赖的类就是 Ext.Tool。如不出现则 Windows 无法工作。其三、“mixins”就是 Ext OO 多态的应用了,下一节会讲。最后部分,也会讲到 config 配置项及其用法。

旧版 Ext 中,调用父类必须完全写出父类的地址,如 Ext.Panel.superclass.initComponent.call(this); 不仅写法冗长,且难记忆,加上连串访问 hash 的操作起来也消耗性能不少。于是新版中作了简化,支持通过 this.parent() 即可返回父类对象。当然旧的方式在代码可读性、直观性上却颇为可取,而且还可以做到跨越一层父类的直接访问(尽管用得比较少)。

另外关于扩展功能的两点:

  • require 项的功能与 Ext.require()功能一致。当前 Ext.require 只能获取 JS 文件,若拓展至其它类型的文件(如 css/tpl 资源),可能要观察新版本的改进。
  • Ext.define/Ext.require 支持送入一个回调函数。那么回调函数会传入什么的参数呢?当前 Ext.require() 的回调函数没有参数传入,不过Ext.define()就有一个,参数是刚创建的类,且回调函数的作用域也是创建好的类。

多态 mixins

多态是 Ext JS 4前所未有过的概念。简单讲,所谓多态就是几个函数或属性合并到一个类之中去。例如在上面的例子,Ext.util.Draggable 作为多态的类混入到 Ext.Window,那么,Ext.Window 就拥有了本来在 Draggable 的“startDragging”方法。结果是,任何一个窗体实例都有 startDragging() 可执行。

var win = Ext.create( 'Ext.Window' ); win.startDragging(); // "开始拖动"

相比较传统的单根继承,多态灵活很多。多态实质是多继承的概念。Ext.Windows 是一个可拖动的组件,如同 Sliders、Grid 头部等等都是可拖动的组件。在不同的组件中都可能使用到“拖动”的功能,如果把它做成一个单独被继承的类就显得不太方便和合理,因为不同的组件极可能不是继承于同一个父类。硬是弄在一起也很麻烦。所以创建一个 Draggable 的接口来解决此类问题是很有必要的,而且使用多态也是相当优雅的写法。

多态的类是否有构造器以供创建实例时候调用?当前没有,但是你可以透过“主类”的构造器调用 mixin 即多态类的构造器,这样也行。官方打算在后面的版本中提供一个 autoInstantiateMixin 的参数是否调用多态类的构造器。

目录
相关文章
|
30天前
|
JavaScript
js开发:请解释什么是ES6的类(class),并说明它与传统构造函数的区别。
ES6的类提供了一种更简洁的面向对象编程方式,对比传统的构造函数,具有更好的可读性和可维护性。类使用`class`定义,`constructor`定义构造方法,`extends`实现继承,并可直接定义静态方法。示例展示了如何创建`Person`类、`Student`子类以及它们的方法调用。
21 2
|
1月前
|
JavaScript 前端开发
js开发:请解释原型继承和类继承的区别。
JavaScript中的原型继承和类继承用于共享对象属性和方法。原型继承利用原型链查找属性,节省内存但不支持私有成员。类继承通过ES6的class和extends实现,支持私有成员但占用更多内存。两者各有优势,适用于不同场景。
18 0
|
1月前
|
设计模式 JavaScript 前端开发
深入理解 JavaScript 中的绑定机制(下)
深入理解 JavaScript 中的绑定机制(下)
|
1月前
|
JavaScript 前端开发
深入理解 JavaScript 中的绑定机制(上)
深入理解 JavaScript 中的绑定机制(上)
|
1月前
uni-app 65egg.js聊天类chat.js封装(二)
uni-app 65egg.js聊天类chat.js封装(二)
25 1
|
27天前
|
开发框架 JavaScript 前端开发
描述JavaScript事件循环机制,并举例说明在游戏循环更新中的应用。
JavaScript的事件循环机制是单线程处理异步操作的关键,由调用栈、事件队列和Web APIs构成。调用栈执行函数,遇到异步操作时交给Web APIs,完成后回调函数进入事件队列。当调用栈空时,事件循环取队列中的任务执行。在游戏开发中,事件循环驱动游戏循环更新,包括输入处理、逻辑更新和渲染。示例代码展示了如何模拟游戏循环,实际开发中常用框架提供更高级别的抽象。
11 1
|
28天前
|
JavaScript 前端开发 算法
深入探讨前端框架Vue.js中的虚拟DOM机制
本文将深入探讨前端框架Vue.js中的虚拟DOM机制,分析其原理、优势以及在实际开发中的应用场景,帮助读者更好地理解Vue.js框架的核心特性。
|
1月前
|
消息中间件 前端开发 JavaScript
深入理解JavaScript中的事件循环机制
JavaScript作为一种前端开发必备的编程语言,在处理异步操作时常常涉及到事件循环机制。本文将深入探讨JavaScript中事件循环的工作原理,帮助读者更好地理解和运用这一关键概念。
|
1月前
|
自然语言处理 JavaScript 前端开发
深入探索 JS 的提升机制、函数与块作用域以及函数表达式和声明(下)
深入探索 JS 的提升机制、函数与块作用域以及函数表达式和声明(下)
|
1月前
|
JavaScript 前端开发
深入探索 JS 的提升机制、函数与块作用域以及函数表达式和声明(上)
深入探索 JS 的提升机制、函数与块作用域以及函数表达式和声明(上)