ExtJS 4 类系统

ExtJS 4的类系统（class system）进行了一次重大重构，ExtJS4的新架构就是基于这套新的类系统构建的，因此有必要先了解以下这个class system
这篇文章分为四章

• I: “Overview” 解释健壮类系统的重要性
• II: “Naming Conventions” 最佳命名规范实践（其实是要求必须遵照它的规范）
• III: “Hands-on” 详细的例子
• IV: “Errors Handling & Debugging” 一些处理问题的实用提示

I. Overview 概览

ExtJS 4 有300多个类，社区里有20w+不同背景的开发者，提供一个好的代码架构是个巨大的挑战：

• 易学，学习成本低
• 快速开发，容易调试和发布
• 组织良好，可扩展可维护

JavaScript是个基于原型链继承的语言，没有类的概念。而且JavaScript语言特点就是松散和自由，实现一个同样的功能，可以有很多种方式，但是如果放任它的松散和自由，就很难维护和重用代码。
面向对象编程绝大部分都是基于类的。基于类的编程语言通常需要强类型，提供代码封装，并且有标准的编码习惯，说了一堆废话，不翻译了，总结以下就是能做到既有面向对象编程的规范性，又能做到JavaScript的灵活性

II. Naming Conventions 命名规范

命名规范，使用一致的命名规范可以让你的代码结构清晰，可读性强。

1. Classes 类

类名只能包含字母数字，不推荐使用数字，除非是常用词。不要用下划线中化纤等非字母数字字符。

• MyCompany.useful_util.Debug_Toolbar 不合法
• MyCompany.util.Base64 合法

类应该组织在包或者说命名空间下面，并且至少要有一个顶层命名空间，例如：

MyCompany.data.CoolProxy
MyCompany.Application

顶层命名空间和真正的类，应该采用驼峰式命名，其他一律小写，例如：

MyCompany.form.action.AutoLoad

非Ext官方类，不可以在Ext顶层命名空间下（这是为了防止冲突）
首字母组合词也要采用驼峰式命名，例如：

• Ext.data.JsonProxy 而不是 Ext.data.JSONProxy

• MyCompany.util.HtmlParser 而不是 MyCompary.parser.HTMLParser
• MyCompany.server.Http 而不是 MyCompany.server.HTTP

2. Source Files 源文件

类的命名和源文件存放路径是对应的，例如：

• Ext.util.Observable 存放在 path/to/src/Ext/util/Observable.js

• Ext.form.action.Submit 存放在 path/to/src/Ext/form/action/Submit.js
• MyCompany.chart.axis.Numeric 存放在 path/to/src/MyCompany/chart/axis/Numeric.js

这里面的path/to/src就是程序跟目录下的那个app目录，所有类都应该这样组织，保证维护性

3. Methods and Variables 方法和成员变量

• 和类名一样只能用字母和数字，其他符号不可以

• 同样是驼峰命名，但是首字母小写，首字母组合词也如此

例如：

• 合法的方法名：encodeUsingMd5(),getHtml()代替getHTML(),getJsonResponse()代替getJSONResponse(),parseXmlContent()代替parseXMLContent()

• 合法的变量名：var isGoodName;, var base64Encoder, var xmlReader, var httpServer

4. Properties 属性

• 跟成员变量一致

• 如果是常量

Ext.MessageBox.YES = "Yes"
Ext.MessageBox.NO = "No"
MyCompany.alien.Math.PI = "4.13"

III. Hands-on 实践一下

1. Declaration 声明

1.1 老的方式

如果你使用过ExtJS 3或者之前的版本，可能会熟悉Ext.extend，可以用来创建一个类

1

var MyWindow = Ext.extend(Object, { ... });

这个方法很容易就可以声明一个类并继承自另一个类，但是也有缺陷

1

My.cool.Window = Ext.extend(Ext.Window, { ... });

这个例子中我们需要把类定义在命名空间里，并继承自Ext.Window类，但是有两个问题：

1. My.cool必须之前定义过，这个命名空间必须已经存在

2. Ext.Window必须已经加载

第一条通常可以使用Ext.namespace（同Ext.ns）解决，这个方法会把不存在的命名空间都创建出来，无聊的是你必须记得在Ext.extend之前加上这句话

Ext.ns('My.cool');
My.cool.Window = Ext.extend(Ext.Window, { ... });

第二个问题，ExtJS4以前的版本都不好解决依赖问题，因此通常是引入ext-all.js

1.2 新的方式

ExtJS 4 消除了这些弊端，只需要记住一个方法：Ext.define，基本语法如下

Ext.define(className, members, onClassCreated);

• className 要声明的类的名字

• members 一个对象，包含类成员
• onClassCreated 一个可选的回调函数，因为新的异步加载机制，这个回调函数会很有用，当所有依赖已经引入，并且类完全创建好了之后，这个函数会被调用

例子

Ext.define('My.sample.Person', {
    name: 'Unknown',

    constructor: function(name) {
        if (name) {
            this.name = name;
        }
    },

    eat: function(foodType) {
        alert(this.name + " is eating: " + foodType);
    }
});

var aaron = Ext.create('My.sample.Person', 'Aaron');
    aaron.eat("Salad"); // alert("Aaron is eating: Salad");

注意这里创建一个新的My.sample.Person实例使用的是Ext.create()方法，使用new关键字也可以创建实例（new My.sample.Person()），但是不推荐使用new，应该养成使用Ext.create的习惯，因为这样可以利用到动态加载的好处，有关动态加载可以参看我的另外一篇教程 ExtJS 4 入门

2. Configuration 配置（实例成员）

ExtJS 4 中引入了一个专用的config属性，这个属性在类创建之前，会被Ext.Class预先处理，并有一下特性：

• 配置项被封装起来，和类的其他属性方法不混杂在一起了

• 自动生成了属性的getter和setter
• 自动生成了一个apply方法，apply方法在setter之前调用，可以通过apply方法定制setter的行为，如果apply方法没有返回值，setter就不会起作用，可以参见下面的例子中applyTitle

Ext.define('My.own.Window', {
   /** @readonly */
    isWindow: true,

    config: {
        title: 'Title Here',

        bottomBar: {
            enabled: true,
            height: 50,
            resizable: false
        }
    },

    constructor: function(config) {
        this.initConfig(config);
    },

    applyTitle: function(title) {
        if (!Ext.isString(title) || title.length === 0) {
            alert('Error: Title must be a valid non-empty string');
        }
        else {
            return title;
        }
    },

    applyBottomBar: function(bottomBar) {
        if (bottomBar && bottomBar.enabled) {
            if (!this.bottomBar) {
                return Ext.create('My.own.WindowBottomBar', bottomBar);
            }
            else {
                this.bottomBar.setConfig(bottomBar);
            }
        }
    }
});

这是如何使用上面的例子

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

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"

myWindow.setBottomBar({ height: 100 }); // Bottom bar's height is changed to 100

3. Statics 静态成员

静态成员通过statics属性设置：

Ext.define('Computer', {
    statics: {
        instanceCount: 0,
        factory: function(brand) {
            // 'this' in static methods refer to the class itself
            return new this({brand: brand});
        }
    },

    config: {
        brand: null
    },

    constructor: function(config) {
        this.initConfig(config);

        // the 'self' property of an instance refers to its class
        this.self.instanceCount ++;
    }
});

var dellComputer = Computer.factory('Dell');
var appleComputer = Computer.factory('Mac');

alert(appleComputer.getBrand()); // using the auto-generated getter to get the value of a config property. Alerts "Mac"

alert(Computer.instanceCount); // Alerts "2"

IV. Errors Handling & Debugging 错误处理和调试

ExtJS 4 引入了很多有用的特性帮助调试和错误处理

可以使用Ext.getDisplayName()获得函数名称，例如

1

throw new Error('['+ Ext.getDisplayName(arguments.callee) +'] Some message here');

在用Ext.define()定义出来的类中抛出（throw）错误（error），可以在safari或者chrome的控制台中看到方法名和类名和调用栈