转载请注明翻译者为：曲奇饼， http://quqibing.iteye.com

 

ExtJS 4 官方指南中文翻译：类系统

在历史上第一次，Ext JS的经历了一个在基础上的巨大重构，这就是新的类系统。新架构的基础几乎每一个都是建立在Ext JS4.x重写的单个类上，因此在开始编码之前理解这个类系统是很重要的。

本手册适用于任何希望创造新的或扩大在现有的Ext JS 4.x类的开发者。它分为4个部分：

• 第一节：“概述”解释为什么需要一个强大的类系统
• 第二节：“命名约定”讨论命名类，方法，属性，变量和文件的最佳做法。
• 第三节：“实践”提供了详细的一步一步的代码示例
• 第四节：“错误的处理和调试”提供有用的提示和技巧，如何处理异常

1   概述

Ext JS 4有 300多个类。我们有超过20万开发者的巨大社区，他们来自世界各地，有各种编程背景。在这种规模的框架中，我们面对的一个巨大挑战就是提供一个共同的代码架构。这个架构要求：

• 熟悉和简单易学
• 能快速开发，调试方便，无痛部署
• 精心组织，可扩展性和可维护性

JavaScript是一个没有类的，原型为导向（prototype-oriented）的语言 。因此， JavaScript语言本质上最强大的功能之一是灵活性。它可以使用许多不同的编码风格和技巧，以许多不同的方式做同样的工作。然而，该功能也是不可预知的成本。如果没有一个统一的结构，JavaScript代码会真的很难理解，维护和再利用 。

另一方面，基于类（Class-based）编程，仍然停留OOP的最流行​​的模式。基于类的语言，通常需要强类型，提供封装，标准的编码约定。通常使得开发者坚持一个大原则，编写的代码更可能是可预见的、可延伸和可扩展的。然而，他们却不具有JavaScript这样的语言的动态能力。

每种方法都有其自身的利弊，我们能否对各方都去其糟粕，取其精华？答案是肯定的，我们已经在Ext JS 4的解决方案中实现了。

2    命名约定

使用一致的命名约定作为所有类的代码基础，而命名空间和文件名有助于保持你的代码的组织，结构化和可读性。

2.1     类

类名只能包含字母和数字字符 。数字是允许的，但在大多数情况下不推荐使用，除非是表达一个技术术语（比如Base64）。不要使用下划线、连字符，或任何其他非字母数字字符。例如：

MyCompany.useful_util.Debug_Toolbar不推荐

MyCompany.util.Base64可接受

类名应该被组织到适当的和正确的命名空间和包中，用（.）分隔包。最低限度，应该有一个独特的顶级命名空间的类名称。例如：

 

MyCompany.data.CoolProxy
MyCompany.Application

 

 

顶级的命名空间和实际类名应该用驼峰命名法，其他名称应全部小写。例如：

 

MyCompany.form.action.AutoLoad

 

 

除了Sencha 发布的类以外，都不应该使用Ext作为顶级命名空间 。

缩略语也应该遵循上面列出的驼峰命名法。例如：

 

Ext.data.JsonProxy 来替代 Ext.data.JSONProxy
MyCompany.util.HtmlParser，来替代MyCompary.parser.HTMLParser
MyCompany.server.Http，来替代 MyCompany.server.HTTP

 

 

2.2   源文件

由于类名称直接映射到存储这些类的文件路径上。因此，每个文件只能有一个类。例如：

• 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是您的应用程序的类目录。所有的类都应该在这个共同的根路径的中，这是最好的开发、维护和部署经验。

2.3     方法和变量

• 和类名一样，方法和变量名只可包含字母数字字符。数字是允许的，但在大多数情况下不推荐使用，除非是表达一个技术术语（比如Base64）。不要使用下划线、连字符，或任何其他非字母数字字符。
• 方法和变量名应该总是使用驼峰命名法。这也适用于首字母缩写的方法和变量名。
• 例子

• 可以接受的方法名称：用encodeUsingMd5() getHtml() 而不是getHTML（）。用getJsonResponse()而不是。用getJSONResponse() parseXmlContent()而不是parseXMLContent()
• 可接受的变量名：var isGoodName; var base64Encoder; var xmlReader; var httpServer

2.4 属性

• 类的属性名应与上面提到的方法和变量遵循完全相同的约定，除非当他们静态常量时。
• 静态类属性是常量应全部大写。例如：

 

Ext.MessageBox.YES =“YES”
Ext.MessageBox.NO =“NO”
MyCompany.alien.Math.PI =“3.14”(译者：原文写成了4.13 )

 

 

3       实践

3.1     声明

3.1.1  老方法

如果您曾经使用过任何以前版本的Ext JS，你肯定熟悉Ext.extend创建一个类：

 

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

 

除了直接继承，遵循这种做法很容易创建从另一个类继承的新类。但是，我们没有为类的创建提供其他方面流畅的API，如配置，静态和混入。我们马上就会修订这些条目。

让我们看看另一个例子：

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

在这个例子中，我们希望在自己的命名空间创建新类，并使其从Ext.Window继承。我们需要解决两方面的问题：

1. 在指定Window作为其属性之前，My.cool必须是一个已经存在的对象。
2. Ext.Window需要在其被引用之前在同一页面存在并加载

第一个问题通常由Ext.namespace（别名为Ext.ns）解决。该方法通过对象/属性树递归横向创建他们，如果他们不存在。你不得不需要记住在代码里添加Ext.extend。

 

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

 

 

然而，第二个问题不容易解决，因为 Ext.Window可能取决于它直接/间接继承的许多其他类。反过来，这些依赖关系可能还依赖于其他类的存在。出于这个原因，Ext JS 4之前编写的应用程序通常包括整个库EXT - all.js，即使开发者可能只需要一个框架的一小部分。

3.1.2  新方法

Ext JS 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;
        }
 
        return this;
    },
 
    eat: function(foodType) {
        alert(this.name + " is eating: " + foodType);
 
        return this;
    }
});
 
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() ）。然而，建议总是使用 Ext.create并养成习惯，因为它有动态加载的好处。对于动态加载的详细信息，请参阅“入门指南”

3.2     配置

在Ext JS 4中，我们引入一个专用的config属性，这个属性在类创建前就可以由Ext.class的强大的预处理器处理，这些特性包括：

• 配置对于其他类成员是完全封装的
• getter和setter，如果类没有定义这些方法，处理器会自动为类生成类原型。
• 也为每个配置属性生成一个apply方法。在设置值之前，自动生成的setter方法会在内部调用 apply方法。如果你需要在设置值之前执行自定义逻辑，可以覆盖apply方法。如果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);
 
        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 100

 

3.3   静态成员

可以定义静态成员使用statics config

 

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"

 

 

4       错误处理和调试

Ext JS 4包括一些有用的功能，这将有助于您调试和错误处理。

• 您可以使用Ext.getDisplayName()获取任何方法的显示名称。这是对于在抛出错误的时候需要包含类名和方法名的时候特别有用：

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

• 当Ext.define()定义的任何类的任何方法抛出错误时，你应该去看调用堆栈中的方法和类的名称，如果你正在使用一个基于WebKit的浏览器（Chrome或Safari ）。例如，这是Chrome中的样子：

• 另请参见
• Dynamic Loading and the New Class System
• Classes in Ext JS 4: Under the Hood
• The Class Definition Pipeline