ExtJs Plugin 和 Mixin



在Sencha应用中使用Plugin 和 Mixin
原文地址：https://www.sencha.com/blog/using-plugins-and-mixins-in-your-sencha-apps/

介绍：
当我们需要扩展框架类的功能时，我们通常在派生类中直接实现新的功能。然而，当你需要在多个组件上实现同样功能时，最有效的办法是定义
在一个"插件"或“混入”中。插件和混入是一些为其他类增添额外功能的类。本文将讨论插件、混入是什么，有什么区别，他们如何工作。同时，我
们使用Sencha Fiddle 示例来列举细节。

什么是Plugin，怎么使用？
Plugin是一个为Ext.Componet（或者Component的派生类）新增、重写方法的类。和其他类一样，Plugin通过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)方法定义的类，因为init将在组件渲染前被组件的构造函数调用。plugin 可以通过定义在组件的‘plugins’配置项中，也可以
在生成组件实例时包含在配置项中这两种方式包含到组件里去。

当从Ext.plugin.Abstract继承一个plugin 的时候，将默认获得 init(), destroy(), enable() 和 disable() 这些方法，我们下面讨论如何有效使用这些方法。

init()
init方法是plugin的入口方法，它允许plugin在其插入的组件渲染之前与其进行交互。在这一阶段plugin 需要保留其代理的组件的引用，这样plugin所
定义的方法就可以方便的引用组件。Ext.plugin.Abstract 提供了两个访问方法来引用使用插件的组件：
setCmp()—— 在init(cmp) 中使用 setCmp(cmp) 将引用设置到plugin ，以供getCmp使用

getCmp()——该方法为其他方法提供引用

getCmp方法尤为重要，因为plugin及其定义的方法的作用于限于plugin本身，换句或说，this对象是plugin实例本身，而不是使用它的组件，一个
获取代理组件的getter将在plugin 与组件交互过程中变得方便。

init方法将在处理之初实现plugin 的业务逻辑，其余的在组件渲染时进行一次性设置。比如，一个拖动区域应在组件渲染至dom时被创建，因此，
你需要设置一个监听器来监听组件的afterrender事件，并在这里设置plugin 的功能逻辑。

destroy()
destroy方法在代理组件销毁时调用，任何plugin创建的类实例（如drag and drop ，key navigation等）需要在此时以编程方式销毁，任何的设置
在组件上的便捷属性都需要置空或者删除。

enable() / disable()
enable方法仅将plugin的disabled属性设置为false，disable方法将其设置为true。你可以在实现自己的plugin时对这一功能进行扩展，你可以实现
任何在一开始需要检查是否启用（disabled）的功能逻辑，只要愿意，依据你的plugin启用与禁用的需要，你可以进行任意深度的扩展。

获取插件的引用
由于定义在插件的方法属于插件本身，而不属于使用插件的组件，你需要从组件获取插件的引用以调用这些方法。或者，你可以绑定插件的方法
到组件上。（注：根据示例，通过bind方法将插件的方法设置为组价的方法）。
当自定义一个插件类的时候，创建一个创建一个插件别名是很有帮助的（以plugin为前缀，如plugin.myplugin），当代理组件使用插件时，将有一个
很方便的配置方式：
plugins: [{
        ptype: 'myplugin'
}]

别名还可以使你通过组件的findPlugin()方法获取插件的引用，如
var thePlugin = owningClass.findPlugin(‘myplugin');

最后，你也可以通过getPlugin()方法传入插件id的方式获取插件引用：
plugins: [{
        ptype: 'myplugin',
        pluginId: 'myPluginId';
}]
 
var thePlugin = owningClass.getPlugin(‘myPluginId');

什么是Mixin，如何使用？
混入也是为一个类增添功能的类，而它操作起来和插件在以下方面有些不一样：
1.混入可以使用在任何类上，而插件只能在组件类上使用；
2.混入只能通过mixins配置在类定义中声明，而插件可以在类定义中或类的实例中声明；
3.混入一般用来设计于混入类的常用操作（见Ext.mixin.Observable，将触发/监听功能混入其他类中）.也就是说，它更常用于具体的一类“类型”，
（见Ext.panel.Pinnalbe，只用来混入panel 类型）。
4.mixin的方法将被附在目标类的原型上。

当你创建一个使用混入的类的实例时，你可以直接从实例调用任何混入所定义的方法。方法中的this 作用域就是类本身。可以在混入中定义一个与
类中方法重名的方法。这样，混入方法将不会设置在类的原型上。调用这个方法时，仍然调用类原有的方法。
需要调用同名的混入方法，需要通过类获取混入的引用，然后直接调用这个混入方法，当直接调用混入方法时，作用于是混入方法，所以，this是
mixin本身。例如，一个id为'util' 的混入，调用其定义的destroy 方法如下：
this.mixins.util.destroy.call(this);

自定义混入
一个混入可以是通过Ext.define定义的任何类，我们建议其扩展自Ext.Mixin，当你定义混入时，通过继承Ext.Mixin最基本的好处是你可以定义“钩子”
（hooks），hooks是一些在使用混入的类在执行相应方法之前或之后自动调用定义在混入中的方法。举个例子，你可以通过使用'after'这个hook，
来确保使用混入的类在销毁之后自动调用mixin 的afterDestroy方法：
mixinConfig: {
        after: {
                destroy: 'afterDestroy'
        }
}

如何使用before  after on 和 extended 参见API说明

使用混入
使用混入的方法时在数组中加入混入的全称，混入将按照数组中的顺序逐一处理
mixins: [
        'My.utility.MixinClass'  // "util" is used to reference the mixin
]

获取混入的引用
我们需要从类的实例中获取类的混入的引用。可以通过类实例的mixins属性，后面附加混入的ID来完成（"this.mixin.util"）。我们建议在定义混入时，
始终始终使用唯一的id，这里有3种方式来设置或确定混入的id
1. 如果没有继承Ext.Mixin，可以在混入的定义中设置混入配置mixinId
mixinId: 'util'

 如果继承自Ext.Mixin，可以如下设置
mixinConfig: {
        id: 'util'
}

2.混入配置可以设置一个对象，每个混入由对象名或者ID来确定

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

3.如果没有通过以上方法设置混入的标识，可以通过混入全称：
Ext.define('My.utility.MixinClass');
var utilMixin = owningClass.mixins['My.utility.MixinClass'];

什么时候使用Plugin 或者Mixin?
介绍完plugin和mixin是什么之后，我们用哪种方式定义类？由于相同的功能可以写入任何类型，你需要考虑在应用中如何使用这些功能。
插件提供的功能更灵活，因为它可以应用在实例之上，且可能仅仅是在实例上添加杂项（？）如果一系列类都需要的功能，那么定义混入更为有效，
因为plugin不能织入所有以创建的类实例。