孙连山++李云倩

摘要：随着Web应用的日趋复杂，前端技术的不断推陈出新，MVVM框架模式也得以在Web前端发挥作用。该文将对MVVM框架进行介绍，结合目前备受瞩目的前端AngularJS框架，阐述MVVM在Web前端的应用，并将其与前端传统开发思维对比，分析MVVM在Web前端开发中具有的优势。

关键词：MVVM；Web前端框架；AngularJS

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2016）06-0045-02

面向对象设计（OOD）的核心设计原则是使程序模块达到“高内聚，低耦合” ，而MVC、MVP、MVVM等都是围绕这一核心原则相继产生的框架模式。随着Web 应用的日趋复杂、前端规模不断扩大，Web前端也开启了MVC、MVVM风潮，越来越工程化。

1 MVVM框架模式思想

MVVM框架模式是Model-View-ViewModel模式的简称，于 2005 年由微软的 WPF 和 Silverlight 的架构师 John Gossman 提出。MVVM既吸收了MVC模式的精华，又利用了数据绑定（Data Binding）技术和WPF中命令Command技术对MVP模式进行了改进。其设计思想是 “数据驱动界面”，与传统的“事件驱动界面”相比较，以数据为核心，使视图处于从属地位。数据绑定[1]使表层视图会随底层数据地改变而改变，若用户修改了视图元素值，相当于透过视图元素直接修改了底层数据。Command技术可接受View中用户的输入并做相应处理，它解耦了视图和视图模型。

MVVM框架模式结构如图1所示，由模型（Model）、视图（View）、视图模型（ViewModel）三部分组成[2]。MVVM为View层单独定制了一个Model，既ViewModel。View中的视图逻辑通过双向数据绑定和命令绑定到ViewModel的属性上，通过ViewModel得到Model中的数据，双向数据绑定实现了视图和数据模型的自动同步机制。

MVVM中每个模块在系统中的职责不同。视图：用于界面呈现，它不直接与Model进行交互，而是通过ViewModel与Model通信，并可独立于Model的变化和修改，这也是MVVM低耦合思想的体现。……