Ext JS 5: MVC, MVVM and More 翻译

原文：Ext JS 5: MVC, MVVM and More

 

Sencha Ext JS 框架由于其广泛的部件库，强大的数据包及工具已然成为企业web应用开发 
的工业标准。自2007年初始的 ExtJS 1.0发布以来，产业变化很大 － 现在的web应用比以 
前更大更复杂。

 

Sencha在2010年发布了 Touch 1.0，实现了工业第一个支持MVC模式的面向企业web应用 
的JavaScript框架去处理架构问题。在2011年，我们随后在ExtJS 4.0中应用了这个特性， 
用于在新企业web应用的世界中组织应用代码。

 

因为应用框架对于代码提供良好的结构和稳定性，建立一个好的架构有以下好处：

• 每个应用以同样的方式运行，因此你只需学习一次
• 同理，应用之间易于分享代码
• 可以使用build工具给测试或者产品应用创建最好的版本

Touch 1.0和ExtJS 4.0在如何应用MVC模式建立应用中提供了最好的锻炼，ExtJS5 将这 

个概念推向下一个层次，增加了可选择的MVVM模式。虽然MVC和MVVM非常相似，但使用MVVM可 
以极大的减少开发人员需要写的应用逻辑。

 

ExtJS5完全向后兼容MVC模式。为了使你理解哪些变了哪些没变，让我们深入看看MVC和MVVM 
都做了什么。 

什么是MVC？

Model-View-Controller(MVC)是编写软件的一种架构模型。 它将一个应用的用户接口 
分成三个不同的部分。

MVC在每个应用中可能实现略有差异，但总体来说每个部分有其特定的职责：

• Model 描述的是应用中使用的数据格式。它也可能包括商业规则，验证逻辑和各种其他功能。
• View 向用户展现数据。
• Controller 是MVC应用的中心。它监听应用中的事件，并使Model和View交 
  互。

MVC: 一个例子

让我们看个例子：example

 

在这个例子中，我们看到一个涉及 Master/Detail布局的简单的MVC应用。Master视图 
（Ext.grid.Panel）包含记录，当选中记录时，会在Detail（Ext.form.Panel）视图中显 
示。点击 ‘Save’按钮（在Detail页面），更新Master视图中的数据。

 

这是一个相对简单的例子，你会注意到在Controller中管理了很多组件和Model － 尤其是 
Detail页面。

 

我们一会再回头来用另一个模式看这个例子。

什么是MVVM？

Model-View-ViewModel (MVVM)是另外一种开发软件的模式，很大程度上基于MVC。MVC 
和MVVM的关键区别就是MVVM突出了一个ViewModel，用于管理视图展示的变化的数据（i.e. 
数据绑定）

 

MVVM包含MVC的优点及数据绑定的优势。结果是Model和框架完成尽可能多的工作，最小化应用的逻辑而直接操纵 View。

 

MVVM模式的元素包括：

• Model描述应用中使用的数据格式，和经典的 MVC中一样。
• View向展现用户展数据，和经典 MVC中一样。
• ViewModel是View的抽象，用于调解View和与其关联的Model之间的变化。在MVC中，这将是专门的Controller的责任，但是在MVVM中，ViewModel直接管理由View使用的数据绑定和公式。

记住在MVVM中不是所以View都需要ViewModel，但当使用时，ViewModel是为每个相关的View创建，也就是说，多个示例可能同时存在。

 

MVVM：一个例子

再来看前面由MVC构建的例子，MVVM可以通过数据绑定更好的解决我们之前手动管理控件和Model引用所做的事情。在改进的例子（revised example）中，我们用ViewModel替代Controller来管理两个view间共享的记录的数据绑定。

 

我们不再需要点‘Save’，数据立即更新要归功于双向的数据绑定。这节省了我们很多手动工作并基本上简化了大的应用管理数据的模式。

在MVVM中，Controller哪去了？

即使名字说的Model-View-ViewModel， 但是MVVM模式可能仍然使用Controller － 即使有人可能选择叫它MVC＋VM架构。撇开令人困惑的缩写，ExtJS 5 不会强迫你在MVC和MVVM中选出一个（看一个杂烩的例子here）。

 

ExtJS 4介绍了 MVC Controller， ExtJS 5依旧支持这个概念。然而，ExtJS 5也支持一个新的变化，就是ViewController。

 

ViewController在本质上和ViewModel相似。两个概念都是限定在与其有联系的View中，排除了在传统MVC中管理对象引用和重新存储应用状态的过度需求。个人理解：在使用Controller时，如果要获得一个组件，往往要使用 Ext.ComponentQuery.query('#mvlistId')[0] 这样通过 itemId 来获取组件，如果使用 ViewController，可以通过 this.getView()来得到对应的View，通过this.getView().getViewModel() 得到对应的ViewModel，得到View后可以通过组件间相对路径用 up 和 down来得到，例如：this.getView().down('maintop').hide(); 

 

Re: 蒋锋 2014-09-10 09:05发表 回复lastfornever：这就象我们用cmd 的时候，从一个目录进入另一个目录，你不用每次都输路径全名，知道相对路径更加方便。另外还有一个就是如果你一个窗口里的控件指定了id,如果你建立了二个窗口，那么id就重复了，用up,down的相对路径来找控件则无此问题，而且up,down不仅可以用id,还可以用用各种不同的属性来查找控件。一般情况下用到getCmp的就是 viewport里的控件，因为viewport是唯一的。或者是一些游离于其他控件的独立控件用getCmp来查找。

 

ViewController 和 ExtJS4中传统的MVC中的Controller也很相似，它们都是监听事件并对事件作出回应。然而，ViewController和传统的Controller之间的主要区别是：ViewController是为每个关联的View关联的，然而Controller 控制着全局的多个View。

 

 

ViewController和ViewModel参与组件的生命周期 － 就是说对于每个View实例，唯一的ViewModel和ViewController也被创建。当相关的View被销毁后，ViewModel和ViewController也随后被销毁。

 

在一方面，好处是，相比于加载一个监听所以View的全局事件的通用Controller来说，应用可以节省内存和执行时间。但另一方面，如内存消耗也可能增加因为有更多的ViewModel和ViewController同时存在。

 

最后，记住在MVVM中不是所有的View都需要ViewController － 它们完全是可选的。

结论

ExtJS4开始用MVC为企业web 应用铺平了道路，定义了一致的架构来组织代码。ExtJS5在向后兼容MVC的基础上增加了支持MVVM，因此开发者从ExtJS4升级到最新版本的时候应该没有问题。

 

围绕MVC架构的最好的练习已然和ExtJS5相关，现在开发者通过双向数据绑定可以在构建大的复杂的应用时大量减少业务逻辑的必要性。

 

这篇文章是第一篇关于MVVM和数据绑定的应用架构。

 

资料

• Ext JS 5: View Models and Data Binding