类系统

在其历史上的第一次，Ext JS的经历了从地面的巨大重构了新的阶级制度。新架构的背后几乎每一个在Ext JS 4.x的书面单类代表，因此重要的是了解它在开始编码之前。

本手册旨在为开发人员要创建新的或扩大现有教学班在Ext JS 4.x的 它分为4个部分：

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

一，概述

Ext JS的船舶超过300班。我们有超过20万开发者的巨大的社会，来自世界各地的各种编程背景。在规模，一个框架，我们面临着一个共同的代码架构，是一个提供大challange：

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

JavaScript是一个没有阶级的，面向原型的语言。因此自然语言的最强大的功能之一是其灵活性。它可以由许多不同的方式做同样的工作，在许多不同的编码风格和技巧。然而，该功能是不可预知的成本。如果没有一个统一的结构，JavaScript代码可以是真的很难理解，维护和重新使用。

另一方面，基于类的编程，仍然保持作为最流行 ​​的面向对象的模型。基于类的语言，通常需要强类型，提供封装，以及标准编码约定来。由一般开发商坚持的原则，编写的代码更可能是可预见的，可扩展性和可扩展性，随着时间的推移。然而，他们没有像JavaScript这样的语言中找到相同的动态能力。

每种方法都有其自身的优点和缺点，但在同一时间，我们可以有双方的良好的部分，而隐瞒坏的部件？答案是肯定的，我们已经实施了该解决方案的Ext JS 4。

二。命名约定

整个类，命名空间和文件名的代码的基础上使用一致的命名惯例有助于保持你的代码有组织，有结构化和可读性。

1）班

类的名称只能包含字母数字字符。数字是允许的，但在大多数情况下，气馁，除非他们属于一个技术术语。不要使用下划线，连字符，或任何其他非字母数字字符。例如：

• MyCompany.useful_util.Debug_Toolbar被劝阻
• MyCompany.util.Base64是可以接受的

类的名称应在适当和正确的命名空间的使用对象的属性点符号（。）的包分成。在最低限度，应该有一个独特的顶级命名空间的类的名称。例如：

MyCompany的数据的。

顶层的命名空间和实际的类名应该是在CamelCased，一切应该是所有小写。例如：

MyCompany的形式。行动。

不煎茶分布的类不应该使用分机作为顶级命名空间。

缩略语也应遵循上面列出CamelCased公约。例如：

• Ext.data.JsonProxy，而不是对Ext.data.JSONProxy
• MyCompany.util.HtmlParser，而不是对MyCompary.parser.HTMLParser
• MyCompany.server.Http，而不是对MyCompany.server.HTTP

2）源文件

直接映射到它们存储在文件路径的类的名称。因此，必须是每一个类文件。例如：

• Ext.util.Observable存储在路径/ / SRC /分机/ UTIL / Observable.js
• 路径/ / SRC /分机/形式/行动/ Submit.js的存储Ext.form.action.Submit
• MyCompany.chart.axis.Numeric存储在路径/ / SRC / MyCompany的/图表/轴/ Numeric.js

路径/ / SRC是您的应用程序的类目录。所有类应该留在这个共同的根，并应适当命名空间最好的发展，维护和部署的经验。

3）方法和变量

• 同样，以类名，方法和变量名只能包含字母数字字符。数字是允许的，但在大多数情况下，气馁，除非他们属于一个技术术语。不要使用下划线，连字符，或任何其他非字母数字字符。

• 方法和变量名应该总是在camelCased。这也适用于缩略语。

• 举例

  • 可接受的方法名称：getHtml encodeUsingMd5（）（）代替getHTML（）getJsonResponse（）代替getJSONResponse（）parseXmlContent（），而不是 parseXMLContent（）
  • 可接受的变量名：VAR isGoodName VAR base64Encoder VAR的XmlReader VAR httpServer

4）属性

• 类的属性名遵循完全相同的惯例，除了上面提到的方法和变量的情况下，当他们是静态常量。

• 静态类的属性是常量应该全部大写大小写。例如：

  • Ext.MessageBox.YES =“是”
  • Ext.MessageBox.NO =“没有”
  • MyCompany.alien.Math.PI =“4.13”

第三。动手

1。声明

1.1）老办法

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

VAR  mywindow的 =  分机。延长（对象， {  ...  }）;

这种做法很容易跟进，以创建一个新类，从另一个继承。比其他直接继承，但是，我们没有有能说一口流利的API类创建的其他方面，如配置，静态和混入。我们将审查这些项目在细节不久。

让我们来看看另一个例子：

我的。凉爽。 =  分机。扩展（分机窗口， {  ...  }）;

在这个例子中，我们希望我们的一类新的命名空间，使其延长Ext.Window。有两方面的顾虑，我们需要解决：

1. my.cool需要将现有的对象之前，我们可以指定窗口，其财产
2. Ext.Window需要存在/加载在页面上之前，它可以被引用

第一项是通常解决与Ext.namespace（化名Ext.ns的）。这种方法通过对象/属性树递归横向和创建他们，如果他们不存在。枯燥的部分是你要记住他们加入上述Ext.extend所有的时间。

分机，。我的。凉爽。 =  分机。延长（分机窗口， {  ...  }）;

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

1.2）的新途径

Ext JS的4只是一个单一的方法，你需要记住类的创建与消除所有这些缺点：Ext.define。其基本语法如下：

分机。定义（类名，成员，onClassCreated的）;

• 的className：类名
• 成员是一个对象，代表一个类成员的键-值对的集合
• onClassCreated是一个可选的回调函数被调用这个类的所有依赖关系时准备，和类本身是完全建立。由于新的异步性质类的创建，此回调可以在很多情况下是有用的。这些将在第四节进一步讨论

例如：

分机。定义（My.sample.Person' ， {     名称： “未知”    构造函数： 函数（名称） {         如果 （名称） {             名称= 名称;         }        返回 ;     }    吃： 功能（foodType ）的         警报（这个名称+  “吃”  + foodType ）;        返回 本;     } } ）;VAR =  分机创建（'My.sample.Person“ ，“阿龙”  ）;     亚伦。吃（“沙拉” ）;  / /警报（“亚伦是吃色拉”）;

注意：我们创建一个新实例My.sample.Person使用的Ext.create（）方法。我们可以用新的关键字（新My.sample.Person（） ）。然而，它建议得到总是使用习惯Ext.create因为它使您可以动态加载的优势。对于动态加载的更多资讯，请参阅“ 入门指南“

2。组态

在Ext JS 4，我们得到前预处理器强大的处理Ext.Class类创建一个专用的配置属性。功能包括：

• 从其他类成员的配置完全封装
• getter和setter，为每个配置属性的方法自动生成的类到类的类的创建过程中的原型不具有已定义这些方法。
• An 应用apply方法也产生了为每个配置属性。自动生成的setter方法调用设定值之前，国内 method is also generated for every config property. The auto-generated setter method calls the 申请的apply方法。 method internally before setting the value. Override the apply method for a config property if you need to run custom logic before setting the value. If apply does not return a value then the setter will not set the value. For an example see applyTitle below.

Here's an example:

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);            }        }    }});

And here's an example of how it can be used:

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

Static members can be defined using the 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"

IV. Errors Handling & Debugging

Ext JS 4 includes some useful features that will help you with debugging and error handling.

• You can use Ext.getDisplayName() to get the display name of any method. This is especially useful for throwing errors that have the class name and method name in their description:

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

• When an error is thrown in any method of any class defined using Ext.define(), you should see the method and class names in the call stack if you are using a WebKit based browser (Chrome or Safari). For example, here is what it would look like in Chrome:

See Also

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