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 JS 4 发布在即，官方Sencha.com/blog近期也发出介绍4.0新特性、新功能的稿子。Ext中文网过去几期都有对4.0的深入文章，希望可以做到与官网同步，为大家跟进新版本的信息。——至于何时能够释出代码，以及为啥推迟，，官方给我们的理由是为争取稳定性不惜花更多的时间去内部测试，故所以一再押后。我个人的印象是，Ext做东西从不贸然举动，为了较好的代码质量宁可不采纳那些不稳定的方案，推敲不起的代码……当然，届时出来了，表现怎么样还是一回事，就让我们耐心地拭目以待吧！

下为译文

JavaScript自己并没有类，所以一些新手开发者来的这儿就感觉环境很不熟悉。但是通过语言其自身强大的原型机制（prototype pattern） ，Ext JS实现一套成熟丰满的类机制系统，务求可以进一步照顾我们的开发者，能够以他们熟悉的面向对象方法论（Object Oriented approach）写代码！

我们为Ext JS 4注入更多的新功能，期待让你们的开发更轻松亦更灵活。Ext 4将会有引入四大新功能——类机制、多态Mixin、配置项的读写器Setter/Getter和动态加载。

上面的插图形象地介绍了类的系统，比较关注的是Draggable和Resizable变为Mixin形式了。

类的定义 Class Definition

为显示不同，我们拿Ext JS 3 创建类的方式来作比较。这是一个登陆功能的窗口，以Ext.Windows为基类来扩展：

// Ext JS 3.x 类的定义 MyApp.LoginWindow = Ext.extend(Ext.Window, { title: 'Log in', initComponent: function() { Ext.apply(this, { items: [ { xtype: 'textfield', name : 'username', fieldLabel: 'Username' }, ... ] }); MyApp.LoginWindow.superclass.initComponent.apply(this, arguments); } });

一般来讲，这样子定义一个类是没有问题的。但是如果遇到Ext.Windows父类未曾定义的话就创建新子类，岂不会出现错误？的确，同样如果我们没定义过命名空间的话也是会出现错误的。在新的方式中，便解决了以上两个问题：

// Ext JS 4.x 类的定义方式 Ext.define('MyApp.LoginWindow', { extend: 'Ext.Window', title: 'Log in', initComponent: function() { Ext.apply(this, { items: [ // 如上 ] }); MyApp.LoginWindow.superclass.initComponent.apply(this, arguments); } });

Ext JS 4的类名可以以字符串的形式写出，这样就保证不会上面的错误了。类管理器（Class Manager）会聪明地看出Ext.Windows是否已定义，如果还没有，就等待定义好了Windows才创建MyApp.LoginWindow这个类，也就是说内部会有”延时创建“的这么一个过程。我们在程序中不再需要严格按照加载的顺序，框架帮我们都处理好了。

多态 Mixins

行文至此才刚开始，Ext JS的类还有许多的功能留待你发现。其中首推介绍的是这个框架的“多态（Mixins）”能力。从多态的定义讲，是为了复用将多个动作和配置参数组合一起，再”混入（Mixed）“到某个类之中。要在您创建的类里面实现这种能力，只要引入多态的类到到您的类即可。例如，要使的你的类可拖动，混入Draggable Mixin类吧。不限定混入类的数量，也就是说，这是一种多重继承的实现方案，能较好地解决JavaScript多态的难题。可这样定义多态的类：

Ext.define('Sample.Musician', { extend: 'Sample.Person', mixins: { guitar: 'Sample.ability.CanPlayGuitar', compose: 'Sample.ability.CanComposeSongs', sing: 'Sample.ability.CanSing' } });

跟类定义的类似，引用类名称的都是字符串，故所以哪怕页面没加载的类也不会报错的。一个类允许加入多个混入，多态的那个类写法如下：

Ext.define('Sample.ability.CanPlayGuitar', { playGuitar: function() { // code to play } });

配置项自动的读写器 Auto Setters and Getters for Configurations

通过送入多种配置项，就可以客制化Ext JS类。然后透过getter和setter的方法也可以读取、修改这些配置项参数，运行时的时候也可以作修改。整个库之中会大量出现这种需求，怎么去维护好便是一个问题。Ext JS 4针对配置项参数的读、写、默认值、实时应用等这些具体的问题，提出了自动getter和setter的方案，务求凸显方便性，加速您的开发进程！我们看看例子：

Ext.define('MyClass', { config: { title: 'Default Title' } });

这里我们设置的类只有一个单独的配置项参数title，分配了titile的默认值“Default Title”。在Ext JS 4的类机制下自动分配getter/setter的方法。而在旧的3.3版本中，要达到等价的方法，我们必须僵硬地写出那些手工代码：

MyClass = Ext.extend(MyBaseClass, { title: 'Default Title', getTitle: function() { return this.title; }, resetTitle: function() { this.setTitle('Default Title'); }, setTitle: function(newTitle) { this.title = this.applyTitle(newTitle) || newTitle; }, applyTitle: function(newTitle) { // 这儿自定义代码 } });

框架会自动生成上面的四个函数。在许多情况中，更新变量（属性）尚足够了，可是我们想通过特定的方式改变某个配置项，这样会比较好。例如新类中有标题需要在DOM元素中显示，我们可以告知DOM更新，便是这样子：

Ext.define('MyClass', { extend: 'MyBaseClass', config: { title: 'Default Title' }, applyTitle: function(newTitle) { Ext.get('titleEl').update(newTitle); } });

类机制会自动生成上面四个函数，并且我们可以如上例的applyTitle方法来炮制方法的重写（override）。好处是不但能够节约您写代码时间上细微的花销，还能节约您程序的体积大小，换言之能让你的程序更快地被下载到客户端上。

（未完待续……）

----------------------------------------------------------------------------->

下半部分，将为大家介绍Ext 4的动态加载，并解释官方自带的四个例子——这是Ext从1.0以来用户便强烈需求的功能之一，或者觉得是“最最”需求的功能也不为过。因为单个ext-all.js的块头实在太大了，客户不仅下载得慢，而且还有冗余的代码——虽然网上有提供了多种方案，但多年来用户一直忍着，就是想让官方提供的方案，进行有益的指导。