ExtJS in Review - xtype vs. alias
今天在帮一个兄弟检查一段自定义控件的代码时觉得他对xtype以及alias的使用和ExtJS各示例代码的使用有较多的不一致，而我自己也不是很清楚使用这两个属性时的最佳方法。因此在回家后整理出了这样一篇文档。一方面用来标准化我们自己的代码，另一方面也共享给大家，毕竟对这两个属性进行详细讨论的资料几乎没有。
xtype
首先来看看xtype的定义。在ExtJS的官方文档中是这样对它进行定义的：
This property provides a shorter alternative to creating objects than using a full class name. Using xtype is the most common way to define component instances, especially in a container.
也就是说，在定义一个类的时候，如果我们指定了它的xtype，那么我们就可以通过这个xtype，而不是类型的全名来创建这些类型。例如对于下面的布局声明：
1 items: [ 2 Ext.create('Ext.form.field.Text', { 3 fieldLabel: 'Foo' 4 }), 5 …… 6 ]
其与以下使用xtype声明的布局是等同的：
1 items: [ 2 { 3 xtype: 'textfield', 4 fieldLabel: 'Foo' 5 }, 6 …….. 7 ]
可以看到，在使用xtype的时候，我们可以不再标明类型的全名，进而减少了在使用它们时出错的可能，降低了维护的成本。
而在定义一个类型的时候，我们可以指定该类型所具有的xtype：
1 Ext.define('MyApp.PressMeButton', { 2 extend: 'Ext.button.Button', 3 xtype: 'pressmebutton', 4 text: 'Press Me' 5 });
alias
而在文档中，alias的定义则如下所示：
List of short aliases for class names. An alias consists of a namespace and a name concatenated by a period as <namespace>.<name>
namespace - The namespace describes what kind of alias this is and must be all lowercase.
name - The name of the alias which allows the lazy-instantiation via the alias. The name shouldn't contain any periods.
在一个类型定义中，我们可以指定它所使用的alias：
1 Ext.define('MyApp.CoolPanel', { 2 extend: 'Ext.panel.Panel', 3 alias: ['widget.coolpanel'], 4 title: 'Yeah!' 5 });
而对这个类型的使用也非常简单，在xtype中标示该alias即可：
1 Ext.widget('panel', { 2 items: [ 3 {xtype: 'coolpanel', html: 'Foo'}, 4 {xtype: 'coolpanel', html: 'Bar'} 5 ] 6 });
xtype vs. alias
可以看到，xtype和alias有点像，是吧？那么它们两个有什么区别，什么时候用xtype，什么时候用alias呢？
上面的示例也展示了一个比较有趣的事情，那就是通过alias所定义的别名“coolpanel”可以直接通过xtype引用。也就是说，xtype和alias实际上可以在一定程度上通用的。
最终我在ClassManager类的源码中找到了一系列证据。简单地说，xtype是存在于widget命名空间下的alias。如果为一个新的UI组成声明了它的xtype，那么就等于在widget命名空间下为其声明了一个alias。例如我们也可以通过下面的代码定义刚刚看到的CoolPanel类：
1 Ext.define('MyApp.CoolPanel', { 2 extend: 'Ext.panel.Panel', 3 xtype: ‘coolpanel’, 4 title: 'Yeah!' 5 });
总的来说，为一个UI组成指定一个xtype实际上就等于为其指定一个在widget命名空间下的alias。但是alias所能覆盖的类型范围要比xtype广得多。一个alias不仅仅可以用来声明命名空间为widget的各个类型，更可以在plugin，proxy，layout等众多命名空间下声明类型。
而在Sencha论坛中，一位开发人员也解释了为什么在alias已经存在的情况下定义一个额外的xtype。这仅仅是为了提高性能。在ExtJS的内部实现中常常需要将alias中的命名空间剥离才能得到所需要创建的widget类型。在xtype的帮助下，ExtJS可以摆脱掉耗时的字符串分析工作，从而提高性能。
因此在定义一个自定义widget的时候，我们应当使用xtype，而在定义其它组成时，我们就不得不使用alias了。由于所有的widget使用同一个命名空间，因此我们需要在为自定义widget指定xtype时标示一个前缀，例如在项目egoods中定义的一个自定义button的xtype就应为egoods-button。
References
本文章中所有示例均来自于ExtJS官方文档：http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/
