如何在 Sencha Touch 中使用类

Sencha Touch 使用为 Ext JS 4 开发的最先进的类系统。此类系统使得在 JavaScript 中创建新类变得容易，提供继承、依赖项加载、混合、强大的配置选项等等。

最简单地说，类只是一个附加了一些函数和属性的对象。例如，这里有一个动物类，记录其名称和使其说话的函数

Ext.define('Animal', {
    config: {
        name: null
    },

    constructor: function(config) {
        this.initConfig(config);
    },

    speak: function() {
        alert('grunt');
    }
});

这定义了一个名为 Animal 的类，其中每个动物都可以有一个名称并说话。要创建动物的新实例，我们只需使用 Ext.create

var bob = Ext.create('Animal', {
    name: 'Bob'
});

bob.speak(); //alerts 'grunt'

我们创建了一个名为 Bob 的动物并命令它说话。现在我们已经创建了一个类并实例化了它，我们可以开始改进我们拥有的内容。目前我们不知道 Bob 的物种，所以让我们用 Human 子类来澄清一下

Ext.define('Human', {
    extend: 'Animal',

    speak: function() {
        alert(this.getName());
    }
});

现在我们得到了一个从 Animal 继承的新类，因此获得了其所有函数和配置。我们实际上覆盖了 speak 函数，因为大多数人都足够聪明，可以说出自己的名字而不是咕噜声。现在，让我们让 Bob 成为一个人

var bob = Ext.create('Human', {
    name: 'Bob'
});

bob.speak(); //alerts 'Bob'

在前面的示例中，我们在添加 Human 子类时使用了神奇函数。你会注意到，我们实际上没有为 Animal 类定义 getName 函数，那么它从哪里来的？类系统的一部分是为类提供配置选项的能力，每个选项都会自动为你提供以下功能

• 一个返回当前值的 getter 函数，在本例中为 getName()。
• 一个设置新值的 setter 函数，在本例中为 setName()。
• 设置器调用的应用函数，可让您在配置更改时运行函数，在本例中为 applyName()。
• 设置器调用的更新函数，可在配置值更改时运行，在本例中为 updateName()。

获取器和设置器函数是免费生成的，代表了在类中存储数据的推荐方法。Sencha Touch 中的每个组件都使用类系统，并且生成的函数始终遵循相同的模式，因此如果您知道一个配置，您就已经知道如何获取和设置其值。

此方法还可以使您的代码更简洁。例如，如果您希望始终询问用户是否真的想更改 Bob 的姓名，您可以只定义一个将自动调用的 applyName 函数

Ext.define('Human', {
    extend: 'Animal',

    applyName: function(newName, oldName) {
        return confirm('Are you sure you want to change name to ' + newName + '?')? newName : oldName;
    }
});

上一个代码示例使用浏览器的内置确认函数，该函数打开一个对话框，向用户询问问题，并提供“是”和“否”作为答案。如果确认调用返回 false，应用函数允许您取消名称更改。碰巧的是，确认函数返回新名称或旧名称，具体取决于用户单击“是”还是“否”。

如果我们创建一个新的 Bob 实例并尝试更改他的姓名，但在提示时单击“否”，则他的姓名将不会更改

var bob = Ext.create('Human', {
    name: 'Bob'
});

bob.setName('Fred'); //opens a confirm box, but we click No

bob.speak(); //still alerts 'Bob'

应用函数也是一个转换值的好地方。请记住，无论它返回什么，这都将是此配置的新值。一个很好的例子是将标题前置到名称中，如下面的代码示例所示

Ext.define('Human', {
    extend: 'Animal',

    applyName: function(newName, oldName) {
        return 'Mr. ' + newName;
    }
});

另一个配置方法是更新。仅在配置的值发生更改时才会调用更新方法（在本例中为 updateName()）。例如，根据以下代码，将不会调用 updateName()

var bob = Ext.create('Human', {
    name: 'Bob'
});

bob.setName('Bob'); // The name is the same, so update is not called

因此，当我们使用更新方法时，配置正在更改。此函数应该是您更新组件或在配置值更改时执行任何所需操作的位置。以下示例显示了一个 alert

Ext.define('Human', {
    extend: 'Animal',

    updateName: function(newName, oldName) {
        alert('Name changed. New name is: ' + newName);
    }
});

请记住，更新和应用方法也会在组件实例化时调用，因此在以下示例中，我们将收到两个警报

// creating this will cause the name config to update, therefor causing the alert
var bob = Ext.create('Human', {
    name: 'Bob'
});

// changing it will cause the alert to show again
bob.setName('Ed');

我们基本上已经了解了类以下重要的行为

• 所有类都使用 Ext.define 定义，包括您自己的类
• 大多数类都扩展其他类，使用 extend 语法
• 类使用 Ext.create 创建，例如 Ext.create('SomeClass', {some: 'configuration'})
• 始终使用 config 语法以获取自动获取器和设置器，并拥有更简洁的代码库

此时，您已经可以在应用程序中创建类，但类系统会处理更多有助于学习的事情。

依赖项和动态加载

大多数情况下，类依赖于其他类。前面描述的 Human 类依赖于 Animal 类，因为它扩展了它 - 我们依赖 Animal 才能定义 Human。有时您在类中使用其他类，因此您需要确保这些类在页面上。这是使用 requires 语法完成的，如下面的代码示例所示

Ext.define('Human', {
    extend: 'Animal',

    requires: 'Ext.MessageBox',

    speak: function() {
        Ext.Msg.alert(this.getName(), "Speaks...");
    }
});

当您以这种方式创建类时，Sencha Touch 会验证 Ext.MessageBox 是否已加载，如果没有，它会立即使用 AJAX 加载所需的类文件。

Ext.MessageBox 本身也可能依赖于它所依赖的类，然后这些类也会在后台自动加载。加载所有必需的类后，将定义 Human 类，您可以开始使用 Ext.create 来实例化人员。这在开发模式下效果很好，因为它意味着您不必自己管理所有脚本的加载，但在生产中效果不佳，因为通过互联网连接逐个加载文件相当慢。

在生产中，我们希望加载一个 JavaScript 文件，理想情况下仅包含我们的应用程序实际使用的类。这是在 Sencha Touch 中使用 JSBuilder 工具完成的，该工具分析您的应用程序并创建一个包含您所有类和应用程序实际使用的框架类的一个文件构建。有关如何使用 JSBuilder 的详细信息，请参阅构建指南。

每种方法都有其优点和缺点，但是我们是否可以兼得两者的优点而没有缺点呢？答案是肯定的，我们已经在 Sencha Touch 中实现了该解决方案。

命名约定

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

1) 类

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

• 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) 源文件

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

• Ext.mixin.Observable 存储在 path/to/src/Ext/mixin/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 是应用程序类的目录。所有类都应保留在此公共根目录下，并应为最佳开发、维护和部署体验正确命名空间。

3) 方法和变量

与类名类似，方法和变量名只能包含字母数字字符。允许使用数字，但大多数情况下不建议使用，除非它们属于技术术语。请勿使用下划线、连字符或任何其他非字母数字字符。

方法和变量名应始终使用驼峰式大小写。这也适用于缩略词。

以下是一些示例

• 可接受的方法名

  encodeUsingMd5()
  getHtml() instead of getHTML()
  getJsonResponse() instead of getJSONResponse()
  parseXmlContent() instead of parseXMLContent()
  

• 可接受的变量名

  var isGoodName
  var base64Encoder
  var xmlReader
  var httpServer
  

4) 属性

类属性名遵循与方法和变量名相同的约定，但静态常量除外。静态类属性（常量）应全部采用大写，例如

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

在 Sencha Touch 中使用类

1. 声明

1.1. 旧方法

如果您使用 Sencha Touch 1.x 开发过应用程序，您肯定熟悉
创建类的 Ext.extend 函数

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

在创建从另一个类继承的新类时，这种方法很容易遵循。但是，除了直接继承之外，对于类创建的其他方面（例如配置、静态和混合）没有流畅的 API。我们很快将详细回顾这些项目。

让我们看以下示例

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

在此示例中，我们希望对新类进行命名空间，并使其从 Ext.Panel 扩展。我们需要解决两个问题

1. 在将 Panel 分配为其属性之前，My.cool 需要是一个现有对象。
2. 在引用 Ext.Panel 之前，它需要存在或加载到页面中。

第一个问题通常通过使用 Ext.namespace（别名为 Ext.ns）来解决。此方法递归遍历对象/属性树，并在它们不存在时创建它们。缺点是您需要记住始终在 Ext.extend 上方添加此函数调用，如下面的示例所示

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

但是，第二个问题不容易解决，因为 Ext.Panel 可能依赖于许多其他类，它直接或间接继承自这些类，而这些依赖项又可能依赖于其他类的存在。因此，在 Sencha Touch 之前编写的应用程序通常以 ext-all.js 的形式包含整个库，即使它们可能只需要框架的一小部分。

1.2. 新方法

Sencha Touch 消除了所有这些缺点，只需记住一种用于类创建的方法：Ext.define。其基本语法如下

Ext.define(className, members, onClassCreated);

让我们看看方法调用的每个部分

• className 是类名
• members 是一个对象，表示键值对中的类成员集合
• onClassCreated 是一个可选的函数回调，当此类的所有依赖项准备就绪且类本身完全创建时调用。由于类创建的新的异步特性，此回调在许多情况下都很有用。这些将在第 IV 部分中进一步讨论。

示例

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

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

2. 配置

在 Sencha Touch 中，我们引入了专门的config属性，该属性在创建类之前由强大的Ext.Class预处理器处理。config功能包括以下内容

• 配置与其他类成员完全封装。
• 如果类尚未定义这些方法，则在类创建期间自动为每个配置属性生成 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);
    },

    applyTitle: function(title) {
        if (!Ext.isString(title) || title.length === 0) {
            console.log('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);
            }
        }
    }
});

以下代码说明了如何使用先前定义的 My.own.Window 类

var myWindow = Ext.create('My.own.Window', {
    title: 'Hello World',
    bottomBar: {
        height: 60
    }
});

console.log(myWindow.getTitle()); // logs "Hello World"

myWindow.setTitle('Something New');
console.log(myWindow.getTitle()); // logs "Something New"

myWindow.setTitle(null); // logs "Error: Title must be a valid non-empty string"

myWindow.setBottomBar({ height: 100 }); // Bottom bar's height is changed to 100

3. 静态

可以使用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"

错误处理和调试

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

可以使用Ext.getDisplayName()调用来获取任何方法的显示名称。这对于抛出错误非常有用，因为错误的描述中包含类名和方法名，如下面的代码示例所示

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

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

进一步阅读

类只是 Sencha Touch 生态系统的一部分。为了更深入地了解该框架及其工作原理，我们建议阅读以下指南

• 组件和容器
• 数据包
• 布局系统
• 入门