[Extjs 4] 类系统

概述

Ext JS 4 有300多个类。

JavaScript 是一个原型驱动的语言。这种语言的优势就是弹性大，可以使用不同的方法，不同的代码风格和技术实现同样的功能，缺点就是难预见，没有统一的结构，难于理解，维护和重用。

面向对象的编程方式需要强类型，提供封装和强调代码标准规范，它需要开发者需遵循一大堆规则，编写的代码是更可能是可预测的，可扩展的，可扩展的。但是就是不过动态和零活。

Ext JS4 号称是结合了两者的长处，规避了两者的弱点。

命名规则

在代码库的类，命名空间和文件中使用统一的命名规范有助于使代码组织化，结构化和可读化。

1） 类

类名仅包含字母和数字字符； 虽然数字字符是允许的，但是除非类名是一个技术术语，否则尽量不要使用。不要使用下划线，连字符和其他的非数字字母的字符。

比如：

MyCompany.useful_util.Debug_Toolbar  ==》 不推荐使用

MyCompany.util.Base64  ==》 可以使用(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）源文件

类的命名和定义的源文件的路径要对应起来。比如：

• Ext.util.Observable保存在 src/Ext/util/Observable.js
• Ext.form.action.Submit保存在 src/Ext/form/action/Submit.js

3） 方法和变量

命名规则和类的命名规则是完全一样的。

4）属性

静态的常量全部使用大写字母，其他的用驼峰法命名，比如：

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

实例

1.  声明

1.1） 旧的方式

在旧版的Ext JS(3.0) 中， 使用如下方式定义类

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

这种定义方式有两个问题：

1. My.cool 这个对象需要存在(使用Ext.namespace (aliased byExt.ns)定义)

2. Ext.Window 必须要定义(或以及导入)

1.2）新的方式

Ext.define(className, members, onClassCreated);

举个例子：

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

这样的话， 在旧的方式下遇到的问题也就解决了。

定义了类型，如何new 一个类的实例呢？

var aaron = Ext.create('My.sample.Person', 'Aaron');

使用Ext.create  方式， 而不使用 new My.sample.Person() , 好处就是可以动态加载。

2. 配置

Ext JS 4配置的新特性有：

1) 配置完全的封装

2) 每个配置属性自动产生Getter  和Setter 方法

3) 自动为每个配置属性产生apply 方法。自动产生的setter 方法在设值之前调用apply 方法。如果apply 方法没有返回值则setter 就不会设置值了。例如：

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);         return this;    },     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 

3.  静态

可以使用 static 配置静态成员，例如：

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 ++;         return this;    }}); 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"

错误处理和调试

Ext JS 4 提供了一些有用的特性用来调试和错误处理

 使用 Ext.getDisplayName()  得到方法的显示名称， 使用方式：

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