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

Posted 周一, 01/24/2011 - 10:16 by admin


今天，我们很高兴在这里第一次发布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

  • 要发表评论，请先登录