Ext JS 4 的类系统

前言

我们知道，JavaScript中没有真正的类，它是一种面向原型的语言 。这种语言一个强大的特性就是灵活，实现一个功能可以有很多不同的方式，用不同的编码风格和技巧。但随之也带来了代码的不可预测和难以维护等问题。代码量很大时，由于JavaScript 没有统一的结构，代码变得很难理解和阅读，不方便维护和重用。

而像C#这种基于类的面向对象语言，它是强类型的，具有封装、继承和多态的OOP基本特征，而且都有标准的编码约定。它通过强制开发者遵循一系列的原则，让编写的代码更具有可预测性和可扩展性等优点。然而，这种语言却不能像JavaScript语言一样可以灵活使用。
这两种语言各自都有他们的缺点和优点，能不能集合两者的优点而摒弃它们的缺点呢？在 Ext JS 4 身上似乎能看到这种结合体的影子，让我们来一看究竟。

命名规则

Ext JS 中命名空间、包和类的层次关系如下图所示：

基于类、命名空间和文件名的一致的命名规范则，可以帮助我们良好地组织代码，使其有清晰的层次结构，并且容易阅读。Ext JS 框架中的所有类都基于这种命名规则，同时官方建议用户自定义的类也遵照这样的规则。这个规则如何约定，具体如下：

1）类的命名约定

类名只可含字母和数字，数字虽然允许，但不推荐类的名字中含有数字，除非类名本身是一个专业术语。不要使用下划线（_）、连字符（-）等其他非字母数字的字符。如：
MyCompany.util.Toolbar1 类名含数字，不推荐；
MyCompany.useful_util.Debug_Toolbar 含下划线，不推荐；
MyCompany.util.Base64 Base64 合理。

类应该用包进行分组，至少有一个父层，且顶层一定是命名空间，如：
MyCompany.util.Toolbar 合理；
MyCompany.Application 合理。

命名空间和类的命名遵循CamelCased风格，包括简写词，其它都应小写，如：
MyCompany.form.action.AutoLoad 合理；
Ext.data.JsonProxy 合理；
Ext.data.JSONProxy 不推荐。

另外，为避免和Ext JS框架内部类发生冲突，用户自定义类的顶层最好不要用Ext。

2）代码文件

代码文件的存放目录应该和类的全名一一对应，最好是一个类存放一个文件，如：
Ext.util.Observable 应存放在：项目源码目录/Ext/util/Observable.js ；
Ext.form.action.Submit 应存放在：项目源码目录/Ext/form/action/Submit.js；
MyCompany.chart.axis.Numeric 应存放在：项目源码目录/MyCompany/chart/axis/Numeric.js。

3）方法、变量和属性的命名约定

和类的命名规则类似，方法、变量和属性的命名只可包含字母和数字，数字是允许的，但不推荐，除非专业术语。
方法和变量都应遵循camelCased风格，包括简写。
除了当属性是常量时需全部大写，其他情况完全和方法、变量的命名相同。
如：
合理的方法命名：encodeUsingMd5(), getHtml(), getJsonResponse(), parseXmlContent() ；
合理的变量命名：var isGoodName, var base64Encoder, var xmlReader, var httpServer 。
合理的属性命名：Ext.MessageBox.YES = "Yes", MyCompany.alien.Math.PI = "4.13", MyCompany.Person.Name="Jim" 。

类的声明/创建

在以前的 Ext JS 版本中用 Ext.extend 来创建一个类，在我另一篇博文ExtJS框架基础：事件模型及其常用功能中有Ext.extend的例子。在以前的版本中为了遵循命名规范，我们可能这样来创建一个类：

Ext.ns('My.cool');//Ext.ns是Ext.namespace 的简写.
My.cool.Window = Ext.extend(Ext.Window, { ... });

老方法中，My.cool.Window必需依赖于另一个已经存在的类创建。但在Ext JS 4中，创建一个类，只需一个方法，且可以不依赖另一个类创建，语法如下：

Ext.define(className, members, onClassCreated);

其中：className是类的全名；members是大括号括起来的一些键值对；onClassCreated是一个可选回调函数，当该类创建完毕时调用。来看个实际的例子：

Ext.onReady(function () {
    Ext.define('My.sample.Person', {
        name: 'Unknown',
        constructor: function (name) {
            if (name) {
                this.name = name;
            }
        },
        eat: function (foodType) {
            alert(this.name + " is eating: " + foodType);
        }
    }, function () {
        alert("Person's instance has created!");
    });

    var jim = Ext.create('My.sample.Person', 'Jim');//alert("Person's instance has created!")
    jim.eat("Salad"); // alert("Jim is eating: Salad")
});            

我们一般用Ext.create()来创建一个类的实例，也可以通过new关键字来创建，但推荐使用Ext.create()，Ext.create()能根据依赖关系动态加载创建新类所需要的类。

Ext JS 4中的OOP特性

我们知道，继承、封装和多态是OOP的三个基本特性。为让大家能用大家熟悉的OOP思想编程，Ext JS 4也很好的实现了继承、封装和多态。
我们先来看看Ext JS 4 中的继承，在上面的创建My.sample.Person类的例子中，我们再新建一个 My.sample.Student 类，并让它继承 My.sample.Person 类，如下：

Ext.define('My.sample.Student', {
    //继承父类：My.sample.Person
    extend: 'My.sample.Person',
    //子类的构造器，如果子类有config配置项，则这项必需有。
    constructor: function (config) {
        this.initConfig(config);
        this.callParent([config]);
    },
    major: function (speciality) {
        //子类继承了父类的所有属性，比如下面的name。
        alert(this.name + " majored in: " + speciality);
        return this;
    }
});

//创建子类实例，父类的构造器先于子类构造器被调用。
var lily = Ext.create('My.sample.Student', 'Lily');
//调用父类中的eat方法
lily.eat('rice'); //alert("Lily is eating: rice")
//调用自己的major方法
lily.major('Computer'); //alert("Lily majored in: Computer")

要继承一个父类，如果子类中有config配置项，则子类的constructor是必需的，不能省略。除了语法上的差别，Ext JS 4 中的继承非常类似于C#中的继承。

Ext JS 4 既然有继承，那么就肯定有OOP的另一个特性：多态。最明显的是方法的覆盖。在上面的Student例子中，如果要覆盖父类的eat方法，只需加上自己的eat配置项：

...
eat: function (foodType, tool) {
    alert(this.name + " is eating " + foodType + " by " + tool+".");
},
...
//调用子类的eat方法
lily.eat('rice', 'tachyon');

在后面讲的Mixins部分，其实也是一种多态。

封装的特性就没什么好说的了，比如，Ext使用Ext.lib.Event、Ext.EventManager和Ext.EventObject对原生浏览器事件进行了封装，最后给我们用的是一套统一的跨浏览器的通用事件接口。使用的时候我们无需关心其内部的实现。

相信对于学过OOP语言的朋友来说，这些特性应该非常好理解，大家在使用Ext JS 4 编程的时候再好好体会吧。下面让我们继续深入对 Ext JS 4 类的学习。

读写器的实现 - Config

Ext JS 4中的读写器意义上类似于C#属性的读写器，只是语法上大不相同。Ext JS 4可通过config配置项实现对私有成员的封装和对成员的读写控制。看下面的例子：

Ext.onReady(function () {
    Ext.define('My.own.Window', {
        isWindow: true,//只读属性。
        config: {
            //config中的配置项都可通过 getXxx()来读取值。
        title: 'Title Here'
        },
        //构造器，初始化config
    　　constructor: function (config) {
            this.initConfig(config);
        },
        //applyTitle，Title对应config中的配置项title，写值时内部自动调用。
        applyTitle: function (title) {
            //这里可对写值做一些控制
            if (!Ext.isString(title) || title.length === 0) {
                alert('Error: Title must be a valid non-empty string');
            }
            else {
                //在这里可以对写入的值进行加工。
                return title;
            }
        }
    });

    var myWindow = Ext.create('My.own.Window', {
        title: 'Hello World'
    });

    alert(myWindow.getTitle()); // alerts "Hello World"
    myWindow.setTitle('Something New');
    alert(myWindow.getTitle()); // alerts "Something New"
    myWindow.setTitle(null); // alerts "Error: Title must be a valid non-empty string"
});

注意，读、写器内部是自动执行的，所以要实现自动读写器一定要注意命名。如，config中的title配置项，它的写值属性一定是applyTitle，读值和取值方法分别是getTitle()和setTitle()。

静态成员 - Statics

我们知道，在C#中，我们可以直接通过类来访问类中的静态成员，而不需要实例化。在Ext JS 4 中也可以做到。如下代码所示：

Ext.onReady(function () {
    Ext.define('Computer', {
        statics: {
            instanceCount: 0,
            factory: function (brand) {
                //'this'在静态方法中代表Computer类本身
                return new this({ brand: brand });
            }
        },
        config: {
            brand: null
        },
        constructor: function (config) {
            this.initConfig(config);
            //'self'属性代表Computer类本身
            this.self.instanceCount++;
        }
    });

    //调用静态函数创建两个实例。
    var dellComputer = Computer.factory('Dell');
    var appleComputer = Computer.factory('Mac');

    //自动读取config配置项的brand属性。
    alert(appleComputer.getBrand()); // Alerts "Mac"
    //调用静态属性。
    alert(Computer.instanceCount); // Alerts "2"
});

他山之石 - Mixins

为了达到功能的复用，Ext JS 4中出现了混用的概念，即把某个类的功能"混"（Mixed）到另一个类之中。比如，我们要创建一个Musician类，让他具有唱歌和弹吉他的功能，则可以这样来实现：

Ext.onReady(function () {
    Ext.define('My.sample.Person', {
        name: 'Unknown',
        constructor: function (name) {
            if (name) {
                this.name = name;
            }
        },
        eat: function (foodType) {
            alert(this.name + " is eating: " + foodType);
        }
    });

    // 创建会唱歌的类
    Ext.define('My.sample.CanSing', {
        sing: function (songName) {
            alert("I'm singing " + songName);
        }
    });

    // 创建会弹吉他的类
    Ext.define('My.sample.CanPlayGuitar', {
        playGuitar: function () {
            alert("I'm playing guitar");
        }
    });

    Ext.define('My.sample.Musician', {
        extend: 'My.sample.Person',
        mixins: {
            //混入其他类中的功能
            canSing: 'My.sample.CanSing',
            canPlayGuitar: 'My.sample.CanPlayGuitar'
        }
    });

    var lily = Ext.create('My.sample.Musician', "Lily");
    //调用其他类中的方法
    lily.sing("November Rain"); // alerts "I'm singing November Rain"
    lily.playGuitar(); // alerts "I'm playing guitar"
});    

这里，我们还可以对My.sample.CanSing中的sing方法进行重写实现Musician自己的sing方法，只需要在Musician类中加上自己的sing配置项：

...
sing: function () {
    alert("Attention!");
    // this.mixins是指向所有mixins配置项的引用
    return this.mixins.canSing.sing.apply(this, arguments);
}
...

注意，这里为了演示我把所有类的代码放在一起写。在实际项目开发时，遵照Ext的命名约定，每个类应该根据全名放在特定的文件夹和文件中，如上面的My.sample.Person类存放的文件应该是My/sample/Person.js，My.sample.CanSing类存放的文件应该是My/sample/CanSing.js ，而Ext.onReady(...)中的内容应该放在和实际的业务页面名称相同的js文件中。

结束语

Ext JS 4 是一个含有300多个类的框架，它具有快速开发、可扩展，容易维护等优点。Ext JS 4 框架让开发者用他们熟悉面向对象方法进行开发。除了本文介绍的，Ext JS 4还有很多吸引人的功能，我将会在后面的博文中进行介绍。

参考：
http://docs.sencha.com/extjs/4.0.7/#!/guide/class_system