[Sencha ExtJS & Touch] 在Sencha(Extjs/Touch)應用程式中使用plugins(外掛程式)和mixins(混入)

標籤：func   .net   asc   監聽機制   code   family   track   靈活   www   

原文連結：http://blog.csdn.net/lovelyelfpop/article/details/50853591

英文原文：Using Plugins and Mixins in Your Sencha Apps

概述

當須要擴充一個類的功能的時候，通常都會直接將新功能寫入衍生類別，然而，假設多個組件都須要實現某個功能，那最有效方式就是將它定義為一個外掛程式或Mixin。外掛程式和Mixin都是用來將額外功能加入到其它類的類。在本文，將介紹這些類是什麼，他們之間的差別，以及他們的原理。在Sencha Fiddle。我們準備了一些示範範例來示範這些概念。

外掛程式是什麼且怎樣使用它？

外掛程式是一個類，用來為 Ext.Component（或派生於 Ext.Component的類）加入或改動功能，與其它類一樣，外掛程式要使用Ext.define方法來定義，且擴充於Ext.plugin.Abstract。

// Simple example showing how to define a plugin  // extending form Ext.plugin.Abstract     Ext.define('Fiddle.plugin.SamplePlugin', {      extend: 'Ext.plugin.Abstract',      alias: 'plugin.sampleplugin',         init: function (cmp) {          this.setCmp(cmp);      }  });

有趣的是，它是你所定義的外掛程式類中，必須有init(cmp)方法。由於該方法需會被組件的建構函式調用（在組件渲染之前）。外掛程式聲明在組件的“plugins”配置項中。它能夠在類的定義內聲明【示範範例】，或者在類的執行個體中【示範範例】聲明。

在從Ext.plugin.Abstract的擴充建立外掛程式的時候，預設會接收到init、destroy、enable和disable這4個方法。

以下來介紹一下怎樣才幹有效使用這些方法。

init

方法init是外掛程式的入口。它同意外掛程式在組件渲染之前插入組件並與組件進行互動。在這個階段，外掛程式須要將組件的引用存下來，以便外掛程式裡的其它方法能夠非常easy的使用它。Ext.plugin.Abstract 提供了兩個訪問器方法來引用使用該外掛程式的組件。

•    setCmp：在init(cmp)內。可使用setCmp(cmp)來把組件的引用存下來。這樣，外掛程式內就可通過getCmp方法來得到組件的引用。

•    getCmp：該訪問器方法可被外掛程式內其它方法使用。
  

方法getCmp尤為主要。由於外掛程式與它的方法是在外掛程式的範圍範圍內工作，也就是說，this引用的是外掛程式自身。而不是使用外掛程式的組件。當外掛程式須要與它擁有者的組件的進行互動的時候，訪問方法（getter）就可在訪問客戶組件的時候派上用場。

方法init能夠在init被處理的時候設定外掛程式邏輯，可能還須要在它擁有者組件的HTML渲染後再次設定外掛程式邏輯。

比如，一個拖拽地區就須要在組件的HMTL被渲染到DOM後才幹被建立。

在這樣的情形，就須要監聽客戶組件的afterrender事件並在這時候設定組件的功能。【示範範例】

destroy

外掛程式的destroy方法會在組件銷毀的時候被調用。通過外掛程式建立的不論什麼類執行個體（比如。拖與放、鍵盤導航等等）須要在這時候以編程的方式顯式地被銷毀。

還有，不論什麼被設定到組件執行個體的屬性也必須被設定為null或刪除。【示範範例】

enable/disable

方法enable僅僅是用來將外掛程式的disabled屬性設定為false的，而disable方法會將disabled設定為true。

在建立自己的外掛程式時，能夠擴充該功能。還能夠在處理之前先檢測disabled狀態來決定是否使用不論什麼外掛程式邏輯。你還能夠更進一步去使用他們。詳細取決於你的需求。【示範範例】

擷取對外掛程式的引用

在使用的時候，因為外掛程式中定義的方法是屬於外掛程式而不是組件。因而，須要從組件擷取一個引用並將它返回個外掛程式來調用它的方法。又或者，將外掛程式的方法綁定到組件會更方便。【示範範例】

在定義外掛程式類的時候。給外掛程式的別名這樣一個首碼非常實用：alias:plugin.mypulugin。

在客戶組件使用外掛程式的時候，就能夠非常easy的通過類型來設定外掛程式：

plugins: [{      ptype: 'myplugin'  }]

別名同意使用組件的findPlugin方法來搜尋外掛程式的引用。比如：

var thePlugin = owningClass.findPlugin(‘myplugin');

最後，還能夠使用組件的getPlugin方法和pluginId來引用外掛程式。

plugins: [{      ptype: 'myplugin',      pluginId: 'myPluginId';  }]     var thePlugin = owningClass.getPlugin('myPluginId');

Mixin是什麼且怎樣去使用它？

Mixin也是用來為類加入功能的類。

然而，它與外掛程式的運作方式有下面的不同：

1. Mixin能夠將功能加入到不論什麼類，而外掛程式僅僅能用於Ext.Component類

2. Mixin僅僅能在類的定義內聲明mixins配置項，而外掛程式則既能夠在類定義內，也能夠在類的執行個體中聲明。

3. Mixin或許是為了不論什麼類設計的（請參閱Ext.mixin.Observable，它為不論什麼混入了它的類增加了事件的觸發/監聽機制）。可是它能夠更明白的混入特定的類（請參閱Ext.panel.Pinnable被設計為僅僅能混入Panel類）。

4. Mixin內定義的方法會被應用到目標類的原型(prototype)中去。
   

當建立了一個使用Mixin的類的執行個體的時候，就能夠直接在類中調用不論什麼Mixin定義的方法。這些方法的內的this範圍就是類自身。【示範範例】有可能在Mixin中定義的方法會與類自身的方法同名。

在這樣的情況，Mixin方法就不會被拷貝到目標類的原型。

這時。調用該類的方法將會一直是類自身的方法。

要調用同名的Mixin方法，就要從所屬類中擷取到Mixin的引用，然後再直接調用Mixin方法。在直接調用Mixin的方法時，它的範圍將是Mixin類，因而，this指向的會是Mixin類自身【示範範例】。

如以下示範範例，假設Mixin有一個Mixin的id為util，調用Mixin定義的destroy方法將會是這樣：

this.mixins.util.destroy.call(this);

定義自己的Mixin

雖然我們建議通過擴充Ext.Mixin來定義Mixin了，但Mixin也能夠通過Ext.define來直接定義。通過擴充Ext.Mixin來定義的主要優點是在定義Mixin類的時候，同意定義“鉤子(Hooks)”。

鉤子是定義在Mixin內的方法，會在接收類的對應的方法之前或之後自己主動被調用，比如，要確保Mixin的afterDestroy方法在類被銷毀之後調用，能夠使用after鉤子：

mixinConfig: {      after: {          destroy: 'afterDestroy'      }  }

怎樣去使用“before”、“after”、“on”和“extended”鉤子的很多其它細節。可參閱Ext.Mixin API文檔的頂部描寫敘述。

使用自己的Mixin

使用自己Mixin的首選方式是在數組中使用完整的類名。配置項mixins中的Mixin類會按照數組中的列出的順序進行處理。

mixins: [      'My.utility.MixinClass'  // "util" is used to reference the mixin  ]

對象文法（參閱以下的選項2）提供了與舊版相容，只是不建議這樣。由於鍵名這樣就不符合Mixin類的id定義。

擷取Mixin類的引用

可能須要從類執行個體中擷取類的Mixin的引用。這可通過所屬類的執行個體的mixins屬性，再通過Mixin的id來引用（比如：this.mixins.util）。建議的做法是在定義Mixin類的時候總是為Mixin類設定一個唯一的Mixinid。

有下面三種方式來設定或確定Mixin類的id：

1. 假設不是繼承於基類Ext.Mixin。能夠在Mixin類的類主體內設定mixinid配置項，比如：

   mixinId: 'util'

   假設Mixin類繼承自Ext.Mixin，能夠在mixinConfig配置項內設定id：

   mixinConfig: {      id: 'util'  }

   
   

2. mixins配置項也能夠被定義成一個對象。而且每個Mixin類都有一個鍵(id)，比如：

   mixins: {      util: 'My.utility.MixinClass' }

3. 假設沒有使用以上方法來設定id，也能夠使用Mixin類的完整類名：

   Ext.define('My.utility.MixinClass');  var utilMixin = owningClass.mixins['My.utility.MixinClass'];

何時使用外掛程式或Mixin

如今。已經瞭解了外掛程式和Mixin。那麼。在定義類的時候，何時使用外掛程式，何時使用Mixin呢？由於同樣的功能可能兩者都能夠實現。這時候就要考慮怎樣在應用程式內使用這些功能。

外掛程式更具靈活性。由於它能夠在執行個體上使用，且僅僅對該執行個體加入開銷。然而，假設功能是針對全部類的，那麼在Mixin內定義邏輯就更有效率，由於外掛程式執行個體不會在每個執行個體被建立的時候被建立。

[Sencha ExtJS & Touch] 在Sencha(Extjs/Touch)應用程式中使用plugins(外掛程式)和mixins(混入)