Sencha Touch学习笔记（一）类

1.类系统（The Class System）

Sencha Touch 使用的类系统源于Ext JS4，如果你使用过或者了解Ext JS4，那么这篇内容对你来说应该相当的容易。
类：不用复述，目前很多编程语言都有类的概念，一个类可以有变量有方法，Sencha Touch也是一样。
注：本篇的大部分案例来源于官网API

下面就是一个例子，一个动物，有名字（这是变量），可以叫（这是方法），在Sencha Touch中就是下面这样定义的

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

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

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

config，用来定义变量，constructor是构造方法，下面的【speak】就是方法，你可以随意定义它的名字。
下面我们就可以创建一个Animal对象

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

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

上面的代码执行后，会出现一个显示“grunt”的提示框。

Sencha Touch也支持类的继承，并且可以对方法进行重载：

 Ext.define('Human', {
            extend: 'Animal',
            config: {
                age: null
            },
            speak: function() {
                alert( "My name is "  
                +this.getName() +",I'm" + this.getAge());
            }
        });

现在我们再创建一次对象：

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

 bob.speak(); 

执行之后显示的结果如下

在上面的例子中，你会注意到，我们其实并没有为我们的动物类定义一个getName功能，所以它是从哪里来的？
这就要源于类系统给类配置选项的能力,不需要你像java中一样需要自己手动的编写getter和setter。
自动生成的：
getName(),setName(), applyName()，updateName()

getter 和 setter方法很好理解，就是获取值和赋值，那么applier和updatier是干什么用的呢？
下面我们再举个例子:
我们给applyName 和 updateName里写一点内容

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

    applyName: function(newName, oldName) {
        return confirm('Are you sure you want to change name to ' + newName + '?')? newName : oldName;
    },
    updateName: function(newName, oldName) {
        alert('Name changed. New name is: ' + newName);
    }
});

下面 我们 使使用setName

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

bob.setName('Fred')

执行后结果如下：
Are you sure you want to change name to Bob?
Name changed. New name is:Bob.
Are you sure you want to change name to Fred?
Name changed. New name is:Fred.
My name is Fred，I‘m 18.

你会发现我们并没有调用applyName ，但是它却被执行了。这说明了applier和getter被setter调用了.这里分别执行了两遍，说明在对象初始化时也执行了一次setter，而且setter需要调用applier和updatier。
了解到applier和updatier的运行原理后，我们可以通过applier和updatier方法来对类的变量进行一些处理，比如把’Bob‘变成’Mr.Bob‘等等。

2.扩展

扩展：大部分的时候，类依赖于其他类的扩展，所以你可以在Ext提供的类的基础上进行一些个性化的编程,Sencha Touch 提供requires 属性，通过ajax方式来引用你所需要的js或者类。如下：

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

    requires: 'Ext.MessageBox',

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

当你的类依赖于Ext.MessageBox时，你可以通过requires的方式让其在后台自动加载，这工作很好的发展模式，因为它意味着你不必管理你自己的脚本加载，而不是在用到的时候再加载，因为加载的文件一个一个的连接是相当慢的。

3.命名规则

使用一致的命名规则对你的类、命名空间，文件名 命名，有助于组织代码，使代码结构化的，可读。

1）Class

类名称只能包含字母数字字符。在大多数情况下数字是允许的但不建议，除非他们属于一个技术术语。不要使用下划线，字符，或任何其他非字母数字字符。例如：
MyCompany.useful_util.Debug_Toolbar 不建议
MyCompany.util.Base64 推荐

一般情况下 这样起名：【命名空间.包名.类名】,命名空间和类名使用驼峰式大小写，其他全部小写，如：
MyCompany.form.action.AutoLoad
甚至像是HTTP这样的缩略词也要遵循驼峰式，像下面这样：
MyCompany.server.Http

2）源文件

类的存放路径应该匹配它的类名：
Ext.mixin.Observable存放在path/to/src/Ext/mixin/Observable.js
其中path/to/src是指你的工程路径，所有的类都应该保持在这个共同的根目录下，最好的开发，维护，和部署经验应该有适当的命名空间。

3）方法和变量

和类类似，名称只能包含字母数字字符。在大多数情况下数字是允许的但不建议，除非他们属于一个技术术语。不要使用下划线，字符，或任何其他非字母数字字符。使用驼峰式大小写，包括类似HTTP这样的缩略语，如
getHttp ()
var httpServer。

4）属性

类的属性名遵循惯例方法和变量名相同，除非当他们是静态常量。静态类的属性是常量应该全部大写，例如：
Ext.MessageBox.YES = “Yes”
说到这，不禁想问configs和properties之间有什么区别？
原来区别在于两者出现的时间，config是create时的参数，不一定全部都赋值；properties是属性，是create后生成的，但有些config能直接从对象中获得，所以容易混淆。

总结：以上呢，我们已经基本学习了类的基本用法，下面来复习一下：

1. 所有类的定义使用Ext.define，包括你自己的类
2. 使用extend属性进行类的扩展（继承）
3. 类创建使用 Ext.create，例如Ext.create(‘SomeClass’, {some: ‘configuration’})
4. 总是使用config语法获得自动getter和setter能使你拥有一个更清洁的代码

Sencha Touch包含一些有用的功能，帮助你调试和错误处理。
你可以使用Ext.getDisplayName()来调用任何类的方法。

类定义的时候除了config还有statics，以及更强大的配置项，如感兴趣可以去API中了解，在此就不进行详细的描述了。