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的控制台中看到方法名和类名和调用栈