【翻译】Deft JS：通过依赖注入实现低耦合MVC

原文：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自身的控制类简单，值得使用。