jQuery MiniUI,快速开发WebUI界面

Ext JS 4倒计时:动态加载和新的类系统


今天,我们很高兴在这里第一次发布Ext 4的一系列新特性。在接下来的几个星期里,我们将推出由包封装的Ext JS 4 Beta版本。虽然我们原计划是在现在发布一个完整的测试版本,但一部分框架进度比预期慢,因此我们不得不逐步发布,而不是通过单一包发布。今天,我们将开始使用全新的Ext JS 4类系统。

JavaScript没有自己的类系统,因而对新开发者来说是一个陌生的语言环境。 Ext JS一直通过JavaScript强大的原型模型为开发者提供它自己的类系统,,从而让开发者可以编写一个更传统的面向对象的代码。

在Ext JS 4中,我们提供一个全新特性的类系统,从而让开发更简单,更灵活。Ext 4将推出4个新特性:类定义、mixins、输入和输出配置及依赖加载。


上图重点介绍我们新的类系统的好处,最引人注目的是Draggable和Resizable将成为mixin。

类定义
我们来比较一下在Ext JS 3和Ext JS4中是如何创建一个新类的。在例子中,我们将创建一个扩展自Ext.Window的登录窗口类:

//Ext JS 3.x class definition
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 JS 3中的类定义方式。如果Ext.Widow没有定义,那么当我们创建我们自己的类的时候,我们将会得到一个错误甚至应用可能崩溃。同样,如果MyApp没有定义,我们也会得到一个错误。这些问题在新的系统都将得到解决。

//Ext JS 4.x class definition
Ext.define('MyApp.LoginWindow', {
    extend: 'Ext.Window',
 
    title: 'Log in',
 
    initComponent: function() {
        Ext.apply(this, {
            items: [
                //as above
            ]
        });
 
        MyApp.LoginWindow.superclass.initComponent.apply(this, arguments);
    }
});

在Ext JS 4,类可以通过它们的字符串名被引用,这意味着我们将永远不会得到上述错误。类管理器会很聪明地检查Ext.Window是否已被定义,如果没有,则直到它已被定义的时候才创建MyApp.LoginWindow。因此,我们不再需要维持一个严格的加载顺序,使框架能照顾更多其它事情。

Mixins
这仅仅是个开始,新的类系统将给Ext JS 类带来一系列新的特性。首先是在框架中加入mixins特性。Mixins定义了一套可重用的行为和配置,它可以混合到类中。要在你的类中充分利用这个新特性,只需要简单的套用在你的类定义中。例如,要在你的类中加入拖动功能,可将拖动mixin混合到你的类中。你可以在你的类中混合更多的mixin,这样你就可通过该方式实现多重继承。在大多数javascript框架中,这一支难以实现。Mixins的定义请看下面代码:

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

另外,所有这些类名都是通过字符串引用的,因而,如果mixins还没有被加载,你也不会获得任何错误。一个类可以混合许多mixins,而每一个mixin可以简单的按以下方式定义:

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

在Ext JS中许多类都可自定义配置选项。一般来说,这些配置选项都可在运行时使用getter和setter方法修改和获取。这些都必须在库中维持并不断扩充。Ext Js 4带有一个特别的命名约定配置选项,它可以自动为你创建这些功能。这将节省你的开放时间,并确保下载的文件的API是一致的,以及减少文件大小。让我们看一个例子:

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

在例子中,我们定义了一个类,类中有一个“title”的配置选项,而且已经将“Default Title”定义为它的默认值。在Ext JS 4新类定义中,新的getter和setter函数将自动创建,而在Ext JS 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) {
         //custom code here
    }
});

所以上述4个函数都将由框架自动生成。在许多情况,仅仅更新变量是不足够的,譬如有时候配置改变时我们需要执行特定的操作。例如,如果新类需要将title显示在DOM元素中,我们可以通过以下定义更新元素:

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

所以这些函数在Ext JS 4中都能自动生成,当然,我们也可以很容易的重载这些函数,就如上面的applyTitle函数一样。这不仅减少了你书写类时的代码量,也大大减少Ext JS和你应用程序的文件大小,这意味着可以为用户提供更小的下载文件。

动态加载
我们已经看到了新的类系统所带来的好处,不过,这在后面还有很多。现在,是时候介绍在Ext JS 4中全新的东西:动态加载。
到目前为止的任何Ext版本,在使用之前,你都要在使用之前加载整个框架。譬如,你要创建一个Ext.window,你必须保证它已被下载,不然你会得到一个错误。在Ext JS 4中可通过动态加载加载,这很简单:

Ext.require('Ext.Window', function() {
    new Ext.Window({
        title : 'Loaded Dynamically!',
        width : 200,
        height: 100
    }).show();
});

在代码中,我们要求Ext JS加载Ext.Window类,并在加载完成执行一个函数。我们可以通过数组的方式,使用Ext.require加载任何类。这对Ext JS来说只是简单的工作,真正的魔法是在幕后。Ext JS 4的动态加载纯粹是客户端的,不需要在服务器端安装,而且它会自动下载加载类所有的依赖类。譬如,假设Ext.Window定义如下:

Ext.define('Ext.Window', {
    extend: 'Ext.Panel',
    requires: ['Ext.util.MixedCollection'],
    mixins: {
        draggable: 'Ext.util.Draggable'
    }
});

只要Ext JS加载Ext.Window类,它将列出它的依赖类、requires和minxins定义的类。如果页面中不存在这些类,它将在定义Ext.Window类之前下载它们。加载程序将根据约定的类文件名自动下载这些类。在上面的例子中,以下类将被下载:

?src/Window.js
?src/Panel.js
?src/util/MixedCollection.js
?src/util/Draggable.js

加载器是递归的。如果这些文件还有它依赖的文件,加载器将持续加载直到不再有任何依赖的文件为止。虽然在部署时要避免这种情况,但是在使用开发时解决ext-all-debug.js文件过长是非常有用的。

直至现在,我们推荐在开发时使用ext-all-debug.js,在部署时使用ext-all.js。不过,调试文件虽然包含整个框架的可读格式,但它包含大约60000行代码,这使它难以调试。譬如,堆栈跟踪器告诉你在ext-all-debug.js在47657行有一个例外对你来说并没有任何帮助。而使用动态加载,问题将被报告为src/data/JsonReader.js的56行,这样,你可以通过堆栈跟踪到具体文件和行号。

当你在调试应用时,这是一个巨大的进步,而且它运行得非常好。在本地开发,你很难看出框架是动态加载的。加载器还提供了死锁检查,可用于同步或异步加载文件。

如果这些都不是你需要的,不要担心,新的类系统完全向后兼容。你的扩展类依然可以使用,我们也会继续提供包含整个框架的ext-all.js文件。

在线演示
我们已经为你准备了一个简单的在线演示程序。例子由浅到深,逐步增加动态加载的文件数。完整的例子可以下载zip文件和在本地运行,这仅仅需要一个web服务器和所需要的文件。

新的类系统是整个Ext JS 4增强框架的基础。框架中每一个重要的类都已经被升级得更快、更可靠和更容易扩展。在接下来的几个星期里,我们将继续我们的Ext JS 4倒数,每次介绍一个包。在本周晚些的时候,将会看到Ext JS 4新的数据包。

英文原文:Countdown to Ext JS 4: Dynamic Loading and New Class System

翻译:黄灯桥
转自:http://blog.csdn.net/tianxiaode/archive/2011/01/20/6154940.aspx