首页 > 代码库 > ExtJS 4 类系统

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

技术分享

ExtJS 4 类系统