怎样使用Sencha Touch 2中的类

ST2 采用跟Ext JS 4一样的类系统。这使得我们可以很轻松地在JavaScript中创建或继承新的类。类系统提供了继承，依赖加载，mixin，强大的配置选项等内容。

简单来说，类是一个拥有一些属性和方法的对象。例如：定义一个动物类，定义其名称和功能，使得它能说话，我们只需这样做：

1 2 3 4 5 6 7 8 9

Ext.define('Animal', {     config: {         name: null     },     speak: function() {         alert('grunt');     } });

这样我们就定义了一个动物类，每个动物可以有一个名称，并可以说话。要创建一个新的的动物，我们只需这样：

1 2 3 4

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

在这里，我们创建了一个名为Bob的动物，并命令它说话。现在，我们已经定义了一个类和并创建了一个实例，但我们不知道鲍勃是什么物种，所以让我们定义一个人类的作为动物类的子类：

1 2 3 4 5 6 7

Ext.define('Human', {     extend: 'Animal',       speak: function() {         alert(this.getName());     } });

现在我们已经从动物类继承了一个新的的人类，因此人类获得其所有的方法和配置。实际上，我们重写了说话的方法，因为大多数人有足够的智慧，说他们的名字，而不是咕噜咕噜地叫。现在，我们创建一个名为Bob的人,并让他说话：

1 2 3 4 5

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

你应该也注意到了上面的代码中使用了getName方法，然而我们并没有定义动物类的getName方法。那它来自哪里？答案是：框架自动帮每一个配置项添加了以下方法：

• 一个getter方法 - 如getName就是返回name的当前值。
• 一个setter方法 - 如getName就是为name设置一个新值。
• an applier function - applyName() in this case - which is called by the setter and lets you run a function when a configuration changes

getter和setter都是自动生成的，建议大家使用它们来存取类里面的数据。ST的每一个组件都使用了getter和setter的模式，这意味着如果我们知道一个配置项，也就知道如何获取和设置它的值了。

这也让你的的代码更整洁。举个例子：如果你想在改变Bob的名字时询问用户。就可以定义applyName方法，它会被自动调用：

1 2 3 4 5 6 7

Ext.define('Human', {     extend: 'Animal',       applyName: function(newName, oldName) {         return confirm('Are you sure you want to change name to ' + newName + '?');     } });

我们用浏览器内建的confirm方法弹出了一个确认操作的对话框。如果applier方法返回的是false，那name的值将不会发生改变。

1 2 3 4 5 6 7 8 9

var bob = Ext.create('Person', {     name: 'Bob' });   bob.setName('Fred'); //opens a confirm box, but we click No   bob.speak(); //still alerts 'Bob'   我们已经学习了类系统的这些内容：

• 用Ext.define来定义新的类。
• 用Ext.create来创建对象实例。例如：Ext.create('SomeClass', {some: 'configuration'})
• 用"extend"来继承扩展类。
• 使用系统自动生成的getter和setter方法，这会让代码更整洁。

现在，你已经学会如何定义和使用一个类。但类系统的内容远远不只这些。

依赖与动态加载

大多数时候，类之间都存在着依赖。我们可以使用"requires"关键字来引入一个被依赖的类。人类依赖动物类并扩展动物类，这种情况下并不需要特殊的说明，用"extend"就已经表明了这种依赖关系。

1 2 3 4 5 6 7 8 9

Ext.define('Human', {     extend: 'Animal',       requires: 'Ext.MessageBox',       speak: function() {         Ext.Msg.alert()     } });

当你像这样定义一个类的时候，ST就会检查并异步加载Ext.MessageBox。

Ext.MessageBox也可能依赖于其他类，这些类也将在后台自动加载。Ext.MessageBox和动物类都加载完毕后，就会定义人类。然后就可以使用Ext.create实例化"人"了。

在开发过程中，多文件可以让我们有效地管理代码，但应用发布后，应该尽量减少文件的数目以提高网络响应速度。ST2的JSBuilder工具可以分析你的应用程序，并将你所有代码连同你所用到的ST中的类合并成一个js文件。关于JSBuilder使用方法的介绍，请看指南的第二部分。

每种方法都有其自身的利弊，我们是否能够取其精华，去其糟粕？答案是肯定的，在ST2里，我们已经实现了这一目标。

命名约定

使用统一的风格来命名类、名空间和文件名有助于更好地组织代码，保证代码的条理性和可读性。

1) 类

类名只能由字符和数字组成。不要在类名中出现数字，除非它属于一个技术术语。不要使用下划线，连字符，以及任何字母数字以外的字符。例如：

• MyCompany.useful_util.Debug_Toolbar 不要这样写
• MyCompany.util.Base64 这个OK

每个类都要有命名空间。用"."来为类分配命名空间，把类分配到不同的包内。例如：

• MyCompany.data.CoolProxy
• MyCompany.Application

顶级的命名空间和类名使用骆驼拼写法，其他的都用小写。例如： 

• MyCompany.form.action.AutoLoad

非框架本身的类，不要使用Ext作为顶级命名空间。

首字母缩略词也应该遵循上面列出的骆驼拼写法约定。例如：

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

2) 源文件

类名直接映射到类文件的存储路径。因此，每个文件对应一个类(就像java一样)例如：

• 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 是你存储脚本的目录(译者注：这里不是真的"path/to"而是你的app目录)，所有的类都应该保存在这个目录下，并被正确地划分命名空间。这样Ext .require()方法才能正确地动态载入脚本文件。这样对将来的维护和部署工作都也很会有帮助。 

 

3) 变量和方法

1. 跟类名一样, 变量名和方法名只能由字符和数字组成。不要在类名中出现数字，除非它属于一个技术术语。不要使用下划线，连字符，以及任何字母数字以外的字符。
2. 变量名和方法名应该使用首字母小写的骆驼拼写法。示例：

• 好的方法名： getHtml() getJsonResponse() parseXmlContent()
• 不好的方法名：getHTML() getJSONResponse() parseXMLContent()
• 好的变量名：isGoodName base64Encoder xmlReader httpServer

4) 属性

1. 除静态属性以外的类的属性，其命名方式跟方法和变量的一样。
2. 静态属性全部用大写命名，例如：

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