原文:Deft JS: Loosely Coupled MVC through Dependency Injection
应用才刚刚部署?作为经验丰富的软件开发人员,都知道不用多久就要做重大的用户界面修改。无论如何深思熟虑,如何通过需求分析和设计与客户达成一致,能避免修改的设计几乎没有。真正行之有效的软件,是能以最少成本适应不断变化的用户需求的软件。
那么……如何架构软件,才能迅速实现用户界面的变化,而不用破坏底层的基础业务逻辑呢?
模型 视图 控制器(MVC)
在代码中应用架构的起始阶段,重点是将应用划分成不同的管理单元,每个管理单元负责一个应用事务。为此,大多数应用采用模型-视图-控制器架构模式。实现这种模式有多种方式,软件开发专家马丁将这些实现模式经过收集和整理,并编录在这里。
通常,一个MVC架构包括:
- 模型:描述和管理应用数据的行为和状态,并根据请求做成相应的响应或修改状态。
- 视图:将模型数据显示给用户,接受用户输入,并监听用户行为,如单击或选择操作。
- 控制器:模型和视图之间的中介,监听用户行为并相应的在模型上执行操作,然后刷新视图以反应模型的变化。
通过控制器通过观察业务逻辑分离的用户接口组件和布局(视图),然后触发业务逻辑更新应用数据,可使应用更好的适应不断变化的业务需求。
Deft JS MVC
Deft JS是增加的Sencha MVC框架,主要包括:
- 模型使用通常(faceless)的业务逻辑组件,如Ext.data.Store、Ext.Data.Model。
- 视图可使用Ext JS这个丰富的开发包或Sencha Touch内的容器和组件。
- 控制器则通过创建继承于Deft.mv.ViewController对象的特定视图控制实现。
Deft JS视图控制器
通常,一个视图就是一个包含多个组件组成的容器。一个视图控制是yield轻量级的控制器,负责管理指定视图的及其子组件的状态,监听视图及其子组件的事件,并响应用户操作,并委托工作以便注入业务模型和服务(如Ext.data.Stores、Ext.data.Models等)。
在Deft JS,一个视图通常是一个Ext JS类的填充了子组件的子类。视图定义要混入Deft.mixin.Controllable对象,同时要声明相关的视图控制器类名。每一个视图,都要创建一个对应的,从Deft.mvc.ViewController扩展的视图控制器类。这个特定的视图控制需要设置其引用相关的视图组件,并注册视图控制器的方法来处理视图组件的事件。
Deft JS视图控制器及混入的Controllable的主要功能是:
- 支持指定视图的多个独立实例,每一个视图都有其唯一的视图控制器实例。
- 通过自动创建和销毁视图控制器及其相关的视图,以减少内存。
- 为引用视图组件和为视图控制器的方法注册监听事件 提供简洁的配置。
- 在集成的视图的生命周期内,运行移除或销毁视图控制器。
- 自动删除视图、视图组件引用和事件监听,以简化清理操作。
Deft JS依赖注入
许多模型、视图和控制器对象都不是独立的(self-contained)。它们会引用或委托一些工作给其它对象。这些被引用的对象就会成为依赖。通常,你可以显式地创建这些依赖的实例或者从服务定位器手动请求它们。
在应用组件之间鼓励实现低耦合,Deft JS包含一个轻量级用于依赖注入的反转控制(IOC)。当执行IOC主体时,可以通过类声明列表代替手动创建或获取依赖类。当类需要延迟实例化,IOC容器会负责处理这些依赖所需的正确的对象实例,并在运行时将它们注入类。
有了IOC,在类中就不再需要创建依赖类,或者明确定义这些依赖类。此外,它不再需要绑定依赖类的特定实现。通过提供预期的API,可以配置IOC容器注入一个完全不同的实现。
因此,你可以很容易的通过配置IOC容器来模拟任何的依赖类版本来测试你的类。你也可以创建多个不同的应用,在每个应用的IOC容器内配置使用不同的依赖类实现,如Store和Proxy。例如,可配置使用静态JSON文件驱动的模拟Store和Proxy;也可以配置为通过JSONP使用production服务的Store和Proxy。
Deft JS IoC容器及其混入的Injectable的主要功能包括:
- 支持单件模式、类实例原型的分解和工厂模式的依赖关系
- 在Ext JS类的构造函数执行之前,在配置项和属性注入依赖
示例
设想在一个联系人管理应用的视图内包含yield联系人Grid:
Ext.define( 'ContactsApp.view.ContactGridView',
extend: 'Ext.container.Container',
mixins: [ 'Deft.mixin.Controllable', 'Deft.mixin.Injectable' ],
inject: [ 'contactStore' ],
controller: 'ContactsApp.controller.ContactGridViewController',
config: {
contactStore: null
},
...
initComponent: function() {
this.items = [{
itemId: 'contactsGrid',
xtype: 'gridpanel',
store: this.getContactStore(),
...,
bbar: Ext.create( 'Ext.PagingToolbar', {
store: this.getContactStore(),
...
})
},
...
{
xtype: 'container',
...
items: [{
itemId: 'editButton',
xtype: 'button',
text: 'Edit'
}],
...
}];
}
);
视图类的定义通过混入Deft.mixin.Injectable,及它的依赖通过“inject”声明,已经具备注入功能。
当视图通过Ext.create()或 Ext.widget()实例化的时候,Ioc容器将处理“contactStore”的依赖和注入相关的值到“contactStore”的配置。产生的getContactStore()方法将会返回注入值。
另外,视图类通过混入Deft.mixin.Controllable,及使用“controller”声明控制,具备了控制功能。
当视图实例化的时候,指定的视图控制器会被创建及被配置引用视图。当视图销毁的时候,视图控制器也会被销毁。
Ext.define( 'ContactsApp.controller.ContactGridViewController',
extend: 'Deft.mvc.ViewController',
mixins: [ 'Deft.mixin.Injectable' ],
inject: [ 'contactStore' ],
config: {
contactStore: null
},
control: {
contactsGrid: {
click: 'onContactsGridClick'
}
editButton: {
click: 'onEditButtonClick'
}
},
...
destroy: function() {
if (this.hasUnsavedChanges) {
// cancel destruction
return false;
}
// allow destruction
return this.callParent( arguments );
},
...
onEditButtonClick: function () {
this.getEditButton.setDisabled( false );
},
onContactsGridClick: function () {
// add a ContactEditorView to the TabPanel for the selected item
...
},
);
视图控制器扩展自抽象基类Deft.mvc.ViewController,它提供了一个“control”配置项用于简化视图组件的访问器的创建及为它们绑定事件。
示例中,Gird和按钮可通过itemId(也支持自定义选择器)引用,它们的单击事件句柄则定义为视图控制器的方法。两个访问器函数会自动创建:getContactsGrid() 和getEditButton()。当视图被销毁时,视图控制器的destroy方法会被调用,通过它可以阻止视图销毁。如果该方法返回true,视图将被销毁,所有在视图控制器通过“control”定义创建的引用和监听事件会自动被删除。
Ioc容器通常在主应用的javascript文件中的Ext.onReady()内定义,调用Deft.Injector.configure()方法。
Ext.onReady( function () {
Deft.Injector.configure({
contactStore: 'ContactsApp.store.ContactStore'
// contactStore: 'ContactsApp.store.MockContactStore'
});
});
在示例中,Deft JS Ioc容器已配置执行请求ContactsApp.store.ContactStore的单件模式实例“contactStore”。注释行显示如何简单的使用指定模拟类来代替它。
关于Deft JS
Deft JS是一个使用MIT协议,扩展自Ext JS和Sencha Touch API的开源框架,它提供:
- 优雅的异步操作链和使用Promises及Deferreds的数据处理。
Created by a team of software architects working at the innovative digital solutions agency Universal Mind, Deft JS leverages best practices and proven patterns refined over years of delivering cutting edge solutions across a wide range of platforms and devices.
作者:John Yanarella
John Yanarella is a Principal Architect at Universal Mind, an innovative digital solutions agency that fuses the design capabilities of an interactive firm with the the technical expertise of a systems integrator. He is passionate about breaking complex problems down into simple reusable solutions; he created Deft JS and has been a principal author and contributor to several other commercial and open-source frameworks. Follow John on Twitter @johnyanarella.
Deft JS下载地址:http://deftjs.org/
译者著:使用Deft JS确实比使用Ext JS自身的控制类简单,值得使用。
分享到:
相关推荐
重要通知Deft的作者Jason Blevins现在位于github上,并已在上游Deft中实现了递归目录列表和多个文件扩展名。 这意味着不再需要此叉子! 可以在以下位置找到适当的Deft: : 灵巧的涡轮deft-turbo是Emacs软件包Deft的...
Deft JS 6 使用进行大规模Web和移动应用程序开发的基本扩展。关于Deft JS 6通过附加... 可测性通过类注释驱动的依赖项注入促进松散耦合。 可扩展性利用Ext JS和Sencha Touch提供的高级类系统。 可重用性支持在Ext JS和
DEFT
我们描述了一种基于Python的计算机程序DEFT,用于在有效领域理论(EFT)中操纵运算符。 在目前的化身中,DEFT可以应用于尺度组为SU(3)×SU(2)×U(1)的4维Poincaré不变理论,例如标准模型(SM),但有多种...
deft-funnel:DEFT-FUNNEL:一种开放源代码全局优化求解器,用于解决Matlab中受约束的灰箱和黑箱问题
DEFT:用于跟踪的检测嵌入 , Mohamed Chaabane,Peter Zhang,J.Ross Beveridge,Stephen O'Hara arXiv技术报告( ) @article{Chaabane2021deft, title={DEFT: Detection Embeddings for Tracking}, author={...
Deft (Database Editor For Terminal) Deft 提供了一种在命令行下编辑数据库记录的方式。这种方式将日常的“增删改查”操作, 转变为对 YAML 格式文件的编辑。 数据源配置
灵巧箭头 Deft-Arrow 是一个小的模块,它允许您在 DOM 中的任何位置简单地添加一个箭头(三角形)。... 在您的应用模块中添加对deft.arrow的依赖,例如: angular.module('myModule', ['deft.arrow
“ Deft Panda”是一款JavaScript游戏,探讨了Enchant.js框架(特别是其面向对象的JS,碰撞映射和事件处理)的功能以及使用Easystar.js库进行AI寻星的功能。 这是为Cal Poly San Luis Obispo的开放式CPE 378(交互...
原来的应用程序没有使用IoC,所以我按照GitHub用户的在应用程序中添加了Deft JS。介绍此示例应用程序模拟灾难恢复场景工具。 如果这是真的,这个想法将允许决策者为不同的灾难情景制定计划并权衡其成本和收益。 它...
DEFT (当前)具有几个依赖项: ,“西方最快的傅立叶变换”。 DEFT正在进行中。 安装说明 编译: cmake -H. -Bbuild cd build make cd ../test python -m unittest 对于intel-mkl 准备mkl环境: conda create ...
Linux LKM,添加对Elecom DEFT轨迹球的3个功能按钮的支持。 基于Yuxuan Shui的。 注意:仅对于Linux <4.12需要。 该补丁已集成在最新Linux内核中。 要求 Linux 4.2+内核头文件 安装 的Ubuntu # add-apt-...
deft-request 是一个轻量级的 Javascript 浏览器请求框架,支持 Fetch,AJAX,JSONP,甚至支持自定义的请求方式。 使用非常简单 统一各种请求方式的参数
敏捷:Deft为Emacs
欢迎来到DEFT语料库! 欢迎使用最大的专家注释语料库,以自由文本形式进行复杂定义提取。 尘埃落定-该数据与 (DeftEval)相关,我们将在SemEval会议日程安排上发布完整的数据集。 提供培训和开发数据,并且在2020...
DeFT-NAACL2021 论文:分解,融合和生成:一种用于中文定义生成的知情方法( ) 要求 火炬(1.6.0) numpy的(1.19.4) nltk(3.5) 捷霸(0.42.1) gensim(3.8.3) 准备所需的数据 下载我们的组成信息DG数据...
古巴CUDA矿工支持气球128/4学分cpuminer-multi,由tpruvot创作修改为气球128/4,由barrystyle创作最佳的气球,由Belgarion创作(接受捐款:(deft)dJP7aS2GVbmSKbHrS9aRFycdab5UNd4zxa) Beldaion编写的Cuda转换...
Deft 是一个单线程、异步的、事件驱动的高性能Web服务器,基于 Java 开发。 标签:DeftServer
为您提供Voxengo Deft Compressor 音频信号压缩软件下载,Voxengo Deft Compressor是一款音频压缩软件,可以帮助用户进行音频信号压缩,提供了音频清晰度增强,用户界面配色方案,可以对音频后期进行处理,有需要...
deft-rg.github.io