sencha 类系统（一）

     最近几天在看sencha touch的js框架，发现类系统的实现很好，但是中文没有很好的参考资料，后来发现官网上的一篇文章写的挺好的。所以翻译出来，英文水平有限，大家轻拍。译文比较长，所以我给分成了两个部分。

    原译文地址：The Sencha Class System

sencha最先在Ext js 4.0中使用了新的类系统。这是一个很重要的改进。这样可以很容易编写面向对象的js代码。作为sencha js框架的重要部分，类系统在Ext js和sencha touch2中是通用的。

Ext js和sencha touch使用类系统去管理依赖，让代码具有很高的重用性的同时又提供了一系列在其他面向对象语言中常见的特性。开发者使用sencha js框架可以将类系统的实现细节交给框架的内部API的同时又可以让代码的实现结构化和面向对象。

创建类

在sencha框架底层创建类的方法很简单就是实例化一个Ext.Class

var Person = new Ext.Class({});

实例化的第一个参数是一个代表类成员的对象。一个有name属性和walk方法的Person类可以这样定义

var Person = new Ext.Class({
    name: 'Mr. Unknown',
    walk: function(steps) {
        alert(this.name + ' is walking ' + steps + ' steps');
    }
});

下面是一段测试Person类的测试代码：

var person = new Person();
person.walk(10); // alerts "Mr. Unknown is walking 10 steps"
 

类构造器（Class  Constructor）

类构造器简单解释就是一个当类实例建立时会被立即执行的类方法。添加同类方法一样（key是contructor）

var Person = new Ext.Class({
    name: 'Mr. Unknown',   constructor: function(name) {
        this.name = name;   return this;
    },   walk: function(steps) {
        alert(this.name + ' is walking ' + steps + ' steps');
    }
});   var jacky = new Person('Jacky');
jacky.walk(10); // alerts "Jacky is walking 10 steps"

类命名空间

命名空间可以让你的代码很有条理，这样就增加了代码的可维护性和重用性。可以将命名空间理解为对类进行分类。分类的标准当然是可以多样的。

推荐的命名空间格式是：

<company/Product ID / Organization >.<Functionality Group(s)>.<Class Name>

下面是一些好的命名空间的例子：

Ext.chart.Lable

Ext.data.writer.Xml

MyCompanny.util.VideoConverter

此文后面的例子够会将我们创建的所有简单的类放在My.sample下。实例代买如下：

Ext.ns(‘My.sample’);
My.sample.Person=new Ext.Class({/*_*/});

注意上面使用的Ext.ns。这是为了让嵌套式类层次更简单的一种速记方式。这个方法确保在赋值之前命名空间对象已存在。一个可以完成相同功能但是相当冗长的方式代码可：

if (!Ext.isObject(My)) {
    My = {};
}   if (!Ext.isObject(My.sample)) {
    My.sample = {};
}   My.sample.Person = new Ext.Class({ /*…*/ });

类文件组织

保持类文件的条理可以提高代码的重用性同时也可以让其他开发者对你的项目结构一目了然。sencha官方推荐这种最佳实践：

1.一个JavaScript文件只包含一个类

2.文件名与类名之间直接映射。比如说My.cool.Class，应该在My/cool/Class.js

创建类（重游）

目前我们定义的类：

Ext.ns('My.sample');
My.sample.Person = new Ext.Class({ /*…*/ });

是时候去更深入的了解这里是怎么运行的。我们使用Ext.Class创建了一个匿名类，并将它复制给了My.sample的Person属性。这种方式可以工作的很好，但是却又几点限制。

1.我们对每一个需要创建的类必须手动确认在赋值之前命名空间对象的存在。

2.如果我们的类先前存在的类存在依赖会怎么样？一个典型的例子就是父子关系，子类必须确保父类的存在。这种情况下父类可以需要异步加载，这样子类在定义完成后可能并没有准备好。

3.如果需要在同一个应用中同时使用两个类的不同版本（拥有相同的名字）而又不重写彼此怎么办？

4.如果你需要在当前方法中获取当前类的方法让代码更容易被调试？

上述所有问题的答案是  Ext.define

Ext.define介绍

Ext.define极大的简化了类的定义代码。此方法接受三个参数：

Ext.define((String) className, (Object) classMembers, (Optional Function)  onCreated)

1.className是类的全名（包含命名空间）

2.classMembers一个键值对表示类成员的对象

3.onCreated是一个可选的回调函数，当所有该类的所有依赖都已准备完毕并且类也已创建完毕时调用。由于类创建时的异步特性，当需要定义类定义之后的逻辑时，该方法十分有用。

此外该方法经常用来向下兼容代码。

所以新的Person类的定义为：

Ext.define(‘My.sample.Person’,{
   name:’Mr. Unknown’,
   constructor:function(name) {/*_*/},
   walk:function(steps){/*_*/},
});

虽然是只是对代码进行了微小的改变，但是却解决了上面提出的问题：

1.在此不需要再关注命名空间对象。Ext.define自动处理。

2.只是简单的通过在定义类时使用class name，就不再需要把类引用赋值给变量，而是稍后将此引用赋值给提供的命名空间。

3.同时使用同一个类的不同版本也会变得很简单。具体引用的类可以通过在类名前添加不同的前缀实现。这样我们就可以同时使用

Ext JS 4.x button和Ext JS 3.xbutton，而不需要改变代码。（原文还真没理解清楚，大家可以参考一下原文）

4.所有类都知道它们自己的名字（即在代码中可以获取）,这样你可以从任何类方法获取该类的名字，而每个类方法又拥有唯一的签名，这样让调试变得更加容易。

所以，除非你明确的想创建一个匿名类，否则应该使用Ext.define来代替前面的new Ext.Class.(但是从实现上说Ext.define中会调用Ext.Class完成功能)。

类处理器（Class Processor）

Sencha 类系统是建立在一系列的处理器（Processors）之上的。processors可以分为两类：pre-processors和post-precessors。pre-processor听起来好像很复杂。class  pre-processors可能会更好理解一些

它们像一系列在类真正创建和使用之前运行的hooks。笼统的来讲Ext.define完成以下工作：

1.遍历提供的classMembers对象，把他们设置为class prototype的属性；

2.在遍历过程中，如果遇到特殊的属性，比如:extend,mixins,requires,config时使用他们相应的pre-processor处理。

这就说，当在创建类时，你在classMembers对象中提供:

1.extend属性，extend pre-processor将会处理类的继承；

2.mixins属性，mixins pre-processor会将其他类混合进当前类中；

3.config属性，config pre-processor会为config中的每一项自动生成setters和getters；

4.requires属性，Ext.Loader中注册的pre-processor会在创建类之前将所需的类加载进来；

5.statics属性，statics pre-processor会statics的所有属性作为累的静态成员。

class post processors是当类准备好时运行的hooks，Ext JS 4中使用的post-processor:

1.singleton,当类创建后立即创建类的唯一实例。

2.alernateClassName，为了方便或向下兼容创建的类的别名。

3.alias，生成可以映射到类且方便记忆的xtype.

通过这种设计，新的类系统不仅具有很多有用的特性还具有很强的扩展性，你可以类创建过程的任何点创建自己的hooks。