原文：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的开源框架，它提供：
- 通过IOC容器实现低耦合度和依赖注入。
- 通过替代模型视图控制器实现灵活的面向组件的架构
- 优雅的异步操作链和使用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自身的控制类简单，值得使用。