类系统

概述

Ext JS 附带数百个类。到目前为止，我们有超过 200 万的开发人员，他们来自不同的背景和地点。在这个规模上，我们在提供通用的代码架构方面面临着巨大的挑战，即

• 熟悉且易于学习
• 开发速度快、易于调试且部署无痛
• 有组织、可扩展且可维护

由于 JavaScript 是一种无类、基于原型的 语言，其最强大的功能之一是灵活性。对于任何问题，都有多种解决方案，可以使用许多不同的编码风格和技术。然而，这也带来了不可预测性的代价。如果没有统一的结构，JavaScript 代码可能难以理解、维护和重用。

基于类的编程，另一方面，仍然是最流行的面向对象编程模型。基于类的语言 通常需要强类型、封装和标准编码约定。通过使开发人员遵守一套大量的原则，代码更有可能随着时间的推移变得可预测、可扩展和可伸缩。但是，此模型不具备 JavaScript 的动态能力。

每种方法都有优点和缺点，但是我们能否保留两者的优点，同时隐藏缺点？答案是肯定的，您可以在 Ext JS 中找到解决方案。

命名约定

在整个代码库中对类、命名空间和文件名使用一致的命名约定有助于保持代码的组织性、结构性和可读性。

类

类名只能包含字母数字字符。允许使用数字，但不鼓励使用，除非它们属于技术术语。请勿使用下划线、连字符或任何其他非字母数字字符。例如

• MyCompany.useful_util.Debug_Toolbar 不鼓励使用
• MyCompany.util.Base64 是最佳的

类名应在适当的时候分组到包中，并使用对象属性点表示法 (.) 正确命名空间。至少应有一个唯一的顶级命名空间，后跟类名。例如

MyCompany.data.CoolProxy
MyCompany.Application

顶级命名空间和实际类名应为 CamelCased。其他所有内容都应为小写。例如

MyCompany.form.action.AutoLoad

非 Sencha 分发的类永远不应使用 Ext 作为顶级命名空间。

首字母缩略词也应遵循上面列出的 CamelCased 约定。例如

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

源文件

类名直接映射到存储它们的文件路径。因此，每个文件只能有一个类。例如

• 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 是您的应用程序类的目录。所有类都应保留在此公共根目录下，并应正确命名空间，以获得最佳的开发、维护和部署体验。

方法和变量

• 与类名类似，方法和变量名称只能包含字母数字字符。允许使用数字，但不鼓励使用，除非它们属于技术术语。请勿使用下划线、连字符或任何其他非字母数字字符。
• 方法和变量名称应始终为 camelCased。这也适用于首字母缩略词。

示例

• 可接受的方法名称

  • encodeUsingMd5()
  • getHtml() 而不是 getHTML()
  • getJsonResponse() 而不是 getJSONResponse()
  • parseXmlContent() 而不是 parseXMLContent()

• 可接受的变量名称

  • var isGoodName
  • var base64Encoder
  • var xmlReader
  • var httpServer

属性

• 类属性名称遵循完全相同的约定，除非它们是静态常量。

• 作为常量的静态类属性应全部为大写。例如

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

声明

您可以对类创建使用单个方法：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 bob = Ext.create('My.sample.Person', 'Bob');

bob.eat("Salad"); // alert("Bob is eating: Salad");

注意： 我们使用 Ext.create() 方法创建了 My.sample.Person 的新实例。我们可以使用 new 关键字 (new My.sample.Person())。但是，建议养成始终使用 Ext.create 的习惯，因为它允许您利用动态加载。有关动态加载的更多信息，请参阅 入门指南

配置

还有一个专用的 config 属性，它在创建类之前由强大的 Ext.Class 预处理器处理。功能包括

• 配置完全与其他类成员隔离
• 如果在类创建期间尚未定义方法，则每个 config 属性的 getter 和 setter 方法都会自动生成到类原型中。
• 自动生成的 setter 方法在设置值之前，在内部调用 apply 方法（如果在类上定义）。如果需要在设置值之前运行自定义逻辑，可以覆盖 config 属性的 apply 方法。如果您的 apply 方法未返回值，则 setter 将不会设置该值。当设置不同的值时，还将调用 update 方法（如果已定义）。apply 和 update 方法都将新值和旧值作为参数传递。

对于使用 config 的 Ext 类，您无需手动调用 initConfig()。但是，对于您自己的扩展 Ext.Base 的类，仍然需要调用 initConfig()。

您可以在下面看到配置示例。

Ext.define('My.own.Window', {
   extend: 'Ext.Component',
   /** @readonly */
   isWindow: true,

   config: {
       title: 'Title Here',

       bottomBar: {
           height: 50,
           resizable: false
       }
   },

   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) {
           if (!this.bottomBar) {
               return Ext.create('My.own.WindowBottomBar', bottomBar);
           }
           else {
               this.bottomBar.setConfig(bottomBar);
           }
       }
   }
});

/** A child component to complete the example. */
Ext.define('My.own.WindowBottomBar', {
   config: {
       height: undefined,
       resizable: true
   }
});

这是如何使用它的示例

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

alert(myWindow.getBottomBar().getHeight()); // alerts 100

静态

可以使用 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
    }
});

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"

错误处理 & 调试

Ext JS 包含一些有用的功能，可以帮助您进行调试和错误处理。

• 您可以使用 Ext.getDisplayName() 获取任何方法的显示名称。这对于抛出描述中包含类名和方法名的错误尤其有用

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

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