前言:关于前端的MVVM架构

　前言：　　

      Web应用的功能越来越强，Javascript代码也越来越多，大量的JS代码要以何种架构来组织就成了一个亟待解决的问题。老牌软件架构模式MVC(Model-View-Controller)就是一种相当不错的方案，虽然它定义不明确需要很多时间来思考如何组织，崇尚代码分离增加了调试难度，但毕竟脸熟（……），从用CakePHP的时候就接触过这个概念，以我能理解的方式描述就是：Models用来处理数据，View将处理结果呈现给用户，Controller用来连接这两者。所以一个Web应用的流程通常是这样的:

• 1. 用户在View上进行操作——比如在文本框输入数值或是点击按钮
• 2. Controller处理这个动作
• 3. Controller通过Model对数据进行增删改查，将其传递到View
• 4. View将数据展示给用户

      以上描述来自Javascript Web Applications一书，其中有用MVC组织JS代码的具体方法。如果想偷懒的话，也有一些现成的JS框架来做这件事。说到JS框架可能最先想到的是jQuery，这类MVC框架和jQuery解决的问题不同，jQuery主要用来对页面元素进行操作上，比如我要移动一个按钮，或是将某个按钮设置为隐藏。而前端MVC框架除了将代码合理的组织以外，操作上也不是侧重于设置一个动作，当触发时进行某些处理这种方式。而是绑定Model，当Model改变时，View接收到通知，重新渲染。不需要手动指定页面元素更新HTML，改变Model时直接改变View

MVVM模式 （简称ViewModel模式，由MVC模式发展而来）

介绍连接：http://www.codeproject.com/KB/WPF/WpfMvvmQuickStart.aspx

 ------- Model-View-ViewModel

          核心思想是将应用程序行为与用户界面相分离，增强测试的方便性，容易维护。

• Model          --- 数据访问层
• View            --- UI界面
• ViewModel  --- 它是View的抽象，负责View与Model之间信息转换，将View的Command传送到Model

View与ViewModel连接的方式：

• Binding Data      -----实现数据的传递
• Command          -----实现操作的调用
• AttachBehavior  -----实现控件加载过程中的操作

 View省去了大量的逻辑代码，转移到了ViewModel,而是执行一些命令向其请求一个动作。相反ViewModel与Model通讯，来更新UI，实现了松耦合，提高了可测试性。

 

 

扩展阅读：

 

1、http://www.cnblogs.com/linzheng/archive/2011/03/12/1981960.html

2、http://hi.baidu.com/liongg/blog/item/bb1e7f3eeb34003670cf6c36.html