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/