原文: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是插件的入口。它允许插件在组件渲染之前插入组件并与组件进行交互。在这个阶段,插件需要存储客户组件的引用,以便插件定义的方法可以很容易的引用它。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。在客户组件使用插件的时候,就可以很容易的通过类型来设置插件:

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.

【翻译】在Sencha应用程序中使用插件和混入的更多相关文章

  1. 在C#程序中实现插件架构

    阅读提示:这篇文章将讲述如何利用C#奇妙的特性,实现插件架构,用插件(plug-ins)机制建立可扩展的解决方案. 在.NET框架下的C#语言,和其他.NET语言一样提供了很多强大的特性和机制.其中一 ...

  2. 【翻译】在Ext JS 5应用程序中怎样使用路由

    原文:How to Use Routing in Your Ext JS 5 Apps 简单介绍 Ext JS 5是一个重要的公布版本号,它提供了很多新特性来创建丰富的.企业级的Web应用程序.MVV ...

  3. 在微信小程序中使用富文本转化插件wxParse

    在微信小程序中我们往往需要展示一些丰富的页面内容,包括图片.文本等,基本上要求能够解析常规的HTML最好,由于微信的视图标签和HTML标签不一样,但是也有相对应的关系,因此有人把HTML转换做成了一个 ...

  4. 【翻译】在Ext JS 6通用应用程序中使用既共享又特定于视图的代码

    原文:Using Both Shared and View-Specific Code in an Ext JS 6 Universal App 在本文,在展示如何编写Ext JS 6通用应用程序代码 ...

  5. 【翻译】在Ext JS 5应用程序中如何使用路由

    原文:How to Use Routing in Your Ext JS 5 Apps 简介 Ext JS 5是一个重要的发布版本,它提供了许多新特性来创建丰富的.企业级的Web应用程序.MVVM和双 ...

  6. 【翻译】Sencha Touch 2入门:创建一个实用的天气应用程序之三

    原文:Getting Started with Sencha Touch 2: Build a Weather Utility App (Part 3) 作者:Lee BoonstraLee is a ...

  7. Firemonkey实现Mac OS程序中内嵌浏览器的功能(自己动手翻译,调用苹果提供的webkit框架)

    XE系列虽然可以跨平台,但是在跨平台的道路上只是走了一小半的路,很多平台下的接口都没实现彻底,所以为了某些功能,还必须自己去摸索. 想实现程序中可以内嵌浏览器的功能,但是Firemonkey还没有对应 ...

  8. JS 条形码插件--JsBarcode 在小程序中使用

    在小程序中的使用: utils文件夹下 barcode.js 粘粘以下代码 var CHAR_TILDE = 126 var CODE_FNC1 = 102 var SET_STARTA = 103 ...

  9. Gradle 1.12用户指南翻译——第三十九章. IDEA 插件

    本文由CSDN博客万一博主翻译,其他章节的翻译请参见: http://blog.csdn.net/column/details/gradle-translation.html 翻译项目请关注Githu ...

随机推荐

  1. sql server 的osql 使用例子

    一次性执行一个语句并输出到文件: osql -Usa -dSCGWYDJ2012 -P -S192.168.56.1 -Q "exit( SELECT top 1 * FROM A08)&q ...

  2. Hibernate设置时间戳的默认值和更新时间的自动更新

    Generated and default property values 生成的和默认的属性值 The database sometimes generates a property value, ...

  3. 可能是CAP理论的最好解释

    一篇非常精彩的解释CAP理论的文章,翻译水平有限,不准确之处请参考原文,还请见谅. Chapter 1: "Remembrance Inc" Your new venture : ...

  4. android解析网络json数据(1)

    1.首先获得url,传入URL类,利用URL的openconnection方法,获得URLConnection,去的输入流,进行操作,具体代码如下: public class NetConnectio ...

  5. 关于查找iOS中App路径时所要注意的一个问题

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 免责申明:本博客提供的所有翻译文章原稿均来自互联网,仅供学习交 ...

  6. Web开发学习之路--Eclipse+Tomcat+mysql之初体验

    学习了一段时间android,正好要用到android和服务器之间的交互,既然要学习android,那么就涉猎下服务器端的开发了,以前学过php,用thinkphp很快可以搭建起来,但是android ...

  7. 01_MyBatis EHCache集成及所需jar包,ehcache.xml配置文件参数配置及mapper中的参数配置

     1 与mybatis集成时需要的jar ehcache-core-2.6.5.jar mybatis-ehcache-1.0.2.jar Mybatis.日志.EHCache所需要的jar包如下 ...

  8. 一步步创建Qt Widget项目+TextFinder案例(摘自笔者2015年将出的《QT5权威指南》,本文为试读篇)

     创建一个基于应用的QtWidget应用程序 这个手册描述了怎样使用QtCreater创建个一个小的Qt应用程序,Text Finder.它是Qt工具Text Finder例子的简写版本.这个应用 ...

  9. UNIX网络编程——客户/服务器心搏函数

    阅读此博客时,可以参考以前的博客<<UNIX网络编程--socket的keep-alive>>和<<UNIX网络编程--套接字选项(心跳检测.绑定地址复用)> ...

  10. java的list几种实现方式的效率(ArrayList、LinkedList、Vector、Stack),以及 java时间戳的三种获取方式比较

    一.list简介 List列表类,顺序存储任何对象(顺序不变),可重复. List是继承于Collection的接口,不能实例化.实例化可以用: ArrayList(实现动态数组),查询快(随意访问或 ...