ExtJS5 - 认识MVVM

从2014年6月份最新发布的ExtJS 5开始，在原先支持MVC（Model-View-Controller）架构的基础上，新增了对MVVM（Model-View-ViewModel）架构的支持。MVVM架构的一大重要特性就是利用模型层和视图层的双向数据绑定，从而更好的实现应用程序代码的分层和解耦。

数据绑定（Data Binding）

组件可以利用新增加的"bind"配置项来关联config配置项（只要它们有setter方法）和来自ViewModel的数据。运用数据绑定机制，能够确保当config配置项绑定的数据发生变化的时候，其对应的setter方法会自动被调用执行，而不需要去自定义处理方法。

双向数据绑定能够实现视图和模型之间的实时数据同步，任何在视图中的数据变化都会自动被回写，并自动更新到绑定了相同数据的其他组件。

视图模型 （ViewModel）

Ext.app.ViewModel是用来管理数据对象（Data Object）的类，绑定相关的数据到对应视图，并在其发生变化的时候进行响应。和ViewController一样，ViewModel属于引用它的视图类（三位一体）。正是因为View和ViewModel进行关联，所以它也能够和其父类的ViewModel进行关联，这就允许子视图类能够继承其父类的ViewModel中的数据。

在实际使用中，ViewModel类通常会被扩展，并使用"formulas"和"stores"这两个重要的特性来简化数据绑定的工作。

Formulas

除了保持数据和提供绑定之外，ViewModel还提供一种按照一定规则对数据进行再加工的方式（Formulas）。Ext.app.ViewModel-cfg-formulas封装了在ViewModel内部的数据依赖性，并保持视图专注于自己的结构。这与对传统的数据模型（Data Model）中的字段进行转换配置工作类似。

Stores

ViewModel通过stores，提供命名对象给它关联的视图，以实现数据绑定。和formulas一样，stores可以使视图比较自由地声明其结构，而避免因为复杂的store定义而变得杂乱。同时还能够确保，它们也有自己的Store实例。

视图控制器（ViewController）

在ExtJS 4中，Controller提供的是在应用程序全局范围内控制业务逻辑的解决方案。而ExtJS 5支持专门针对特定视图的控制器（ViewController），它直接与具体的视图实例进行关联。从实例化到销毁，ViewController始终与引用它的组件联系在一起。而相同视图类的第二个实例，会得到它自己对应的ViewController实例。

相对与在MVC架构下使用全局性的Controller，创建并使用ViewController则更加合适。特别是ViewController简化了事件的连接及组件的引用，使开发人员不必过多地关注声明细节及内存泄露等问题，从而更好地专注于业务逻辑本身。

References and Listeners

ViewController最重要的特性就是帮助大型应用连接组件和事件的能力，甚至当这些组件被容器的不同层次相分离的时候。例如，一个视图可能由各种不同的容器嵌套构成，而ViewController则能够非常简单得处理其中的引用和监听。

相比较在ExtJS 4中使用组件查询的方式，这种在ViewController中使用的新型的连接方式则更加明显和安全，因为这些连接都是被封装在ViewController内部的。也就是说，当把一个视图嵌套到另一个视图的时候，这两个视图的监听和引用是彼此孤立的，并且只与它们各自的ViewController连接。

综合运用

在ExtJS 5中，可以使用ViewController来改进原先的MVC架构，简化与视图的关联；也可以使用ViewModel自动关联视图和数据，并提供Commands来操作数据。当然，更好的编程实践是综合运用ViewModel及ViewController，View和ViewModel之间实现双向数据（属性）绑定，View和ViewController之间实现事件绑定，而ViewController则可以与ViewModel进行通讯，并通过向其发送指令执行相关操作、更新数据。

后记

作为一种逐渐流行起来的软件设计模式，MVVM并不是ExtJS 5发明创造的，更不是其独有的。上面列举的，不过是ExtJS 5在MVVM架构下的具体使用形式，而且还是非常表面化的形式。要真正理解MVVM的核心要义，并把其很好得应用在ExtJS 5项目之中，真正做到应用程序的高效率、低耦合、易维护、可扩展，绝不是一朝一夕之功。那需要在实际项目中，不断地Coding，反复地实践、练习、体会、归纳总结乃至权衡取舍！