翻译在Sencha应用程序中使用插件和混入

Posted 2020-09-29 liguangsunls

原文：Using Plugins and Mixins in Your Sencha Apps

概述

当扩展一个框架类的功能的时候，通常都会直接将新功能写入派生类，然而，假设所需的同一功能存在于多个组件，那最有效的方式就是将它定义为一个插件或混入。

插件和混入都是用来将额外功能加入到其它类的类。

在本文，将介绍这些类是什么，他们之间的差别，以及他们怎样工作。

在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）方法的类，由于该方法须要通过组件的构造函数在组件渲染之前被调用。

插件能够通过组件的“pulugins”配置项引用和设置，它能够在自己定义组件的原始定义的类主体内【演示样例】或初始化期间的配置对象内【演示样例】设置。

在从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‘);

混入是什么且怎样去使用它？

混入也是用来为类加入功能的类。然而。它与插件的运作方式有以下的不同：

1. 混入能够将功能加入到不论什么类。而插件仅仅能用于Ext.Component类
2. 混入声明仅仅要在类定义内使用mixins配置项，而插件则能够被定义在类内或类的实例。

3. 混入能够是为他们要混入功能的不论什么类笼统的设计的（请參阅Ext.mixin.Observable为不论什么类混入事件的fire/listen功能）。

   也就是说，它能够更明白的将应用訪问限定为特定类别的类（请參阅Ext.panel.Pinnable被设计为仅仅混入面板类）。

4. 混入内定义的方法会被应用到目标类的原型。
   

当创建了一个使用混入的类的实例的时候，就能够直接在类中调用不论什么混入定义的方法。这些方法的内的this作用域就是类自身。【演示样例】有可能在混入中定义的方法会与类自身的方法同名。在这样的情况，混入方法就不会被拷贝到目标类的原型。这事。调用该类的方法将会一直是原始定义的方法。

要调用同名的混入方法，就要从所属类中获取到混入的引用。然后再直接调用混入发昂发。

在直接调用混入的方法时，它的作用域将是混入类。因而。this指向的会是混入类自身【演示样例】。如以下演示样例，假设混入有一个混入id为util，调用混入定义的destroy方法将会是这样：

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

定义自己的混入

虽然我们建议通过扩展Ext.Mixin来定义混入了，但混入也能够通过Ext.define来直接定义。通过扩展Ext.Mixin来定义的主要优点是在定义混入类的时候，同意定义“钩子”。钩子是定义在混入类的方法，会在接收类的对应的方法之前或之后自己主动被调用，比如。要确保混入的afterDestroy方法在类被销毁之后调用，能够使用after钩子：

mixinConfig: {
    after: {
        destroy: ‘afterDestroy‘
    }
}

怎样去使用“before”、“after”、“on”和“extended”钩子的很多其它细节，可參阅Ext.Mixin API文档的顶部描写叙述。

使用自己的混入

使用自己混入的首选方式是在数组中使用完整的类名。配置项mixins中的混入类会按照数组中的列出的顺序进行处理。

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

对象语法（參阅以下的选项2）提供了后向兼容，只是不建议这样，由于键名这样就不符合混入类的id定义。

获取混入类的引用

可能须要从类实例中获取类的混入的引用。这可通过所属类的实例的mixins属性。再通过混入的id来引用（比如：this.mixins.util）。

建议的做法是在定义混入类的时候总是为混入类设置一个唯一的混入id。有以下三种方式来设置或确定混入类的id：

1. 假设不是扩展于Ext.Minxn，能够在混入类的类主体内设置mixinid配置项，比如：
   

   mixinId: ‘util‘

   
   假设混入类扩展自Ext.Mixin，能够在mixinConfig配置项内设置id：
   

   mixinConfig: {
       id: ‘util‘
   }

   
   
   
   
2. mixins配置项也能够被东亚为一个对象并为每个混入类定义一个键，比如：
   
   

   mixins: {
       util: “My.utility.MixinClass”
   }
    

   
   
   
   
3. 假设没有使用以上方法来设置id，也能够使用混入类的完整类名：
   
   

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

   
   

何时使用插件或混入

如今，已经了解了插件和混入，那么，在定义类的时候，何时使用插件，何时使用混入呢？由于同样的功能可能无法写入无法写入任一类的类型，这时候就要考虑怎样在应用程序内使用这些功能。插件更具灵活性，由于它能够在实例上使用。且仅仅对该实例加入开销。然而，假设功能是针对全部类的。那么在混入内定义逻辑就更有效率。由于插件演示样例不会在每个实例被创建的时候被创建。

作者：Seth Lemmons
Seth Lemmons is a Senior Engineer on the Sencha Support team. He has experience in Ext JS, Sencha Touch, and software development. He lives in Boise, Idaho with his wife and ~200k other very nice people. Look for slemmon on the forums.