ExtJS5.0的mvvm分层思想

文章转自http://www.itxxz.com/a/gaoji/2014/1219/461.html

接下来的文章就不转了，复制链接再查看就好

Ext JS提供了mvc和mvvm的应用程序框架支持，这两种架构方法都是关注于将应用程序代码和业务逻辑分离。每一种方法都有自己的优点，这取决于怎么分离应用程序模块。下面我们就简单看一下：IT学习者（www.itxxz.com）

什么是MVC框架？
 

  在一个MVC框架中，大多数的类要么是模型（model）要么是视图(view)要么是控制器(controller)。用户(user)与视图(view)交互，视图(view)呢又显示模型(model)中的数据(data)。这些交互都被控制器(controller)监控，控制器(controller)又在需要的时候通过更新模型(model)和视图(view)与响应交互。

什么是mvvm框架?

mvvm简单说来就是在MVC的基础上，新增了一个类似数据仓库的概念。就是说我有了数据模型(model)，也有了视图展现(view)，还有对其分发处理的控制器(controller)之后，多了一个储蓄所，如下图：

内容来自www.itxxz.com

上面的三个模块就是传统的MVC模式，ExtJS在此基础上提供了VM模块。它发出请求，通过我们指定的模型来组装后返回，之后每次有数据请求时，都可以从这里获取数据，减少了服务器的请求次数。

层级结构关系

下面是ExtJS的MVVM框架的目录结构，对于不知道Extjs环境如何部署的朋友，可参考这篇文章《 Extjs5.0集成Eclipse 》。



这里能够很清楚的看到controller、model、store及view三个层次，也就是MVVM的分层目录。这种思想在ExtJS4.X中也有体现，但是在5.X之后添加了新的特性，就是viewmodel和viewcontroller：itxxz.com





这里的viewmodel就是MVVM中的VM，viewcontroller就是在原来controller基础上的演进，目的是实现了动态加载，防止一次性加载过多的js导致的数据阻塞的问题。





上图就展现了login文件夹下三个js文件的关系。Login.js是一个登陆窗体，调用的方法逻辑都在LoginController.js中，项目初始化的参数存储在LoginModel.js，各司其职，非常明了。

下篇就以一个登录的实例来介绍下ExtJS5.0中是如何实现的。