MVVM框架在Web前端应用研究.docVIP

MVVM框架在Web前端应用研究 　　摘要：随着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低耦合思想的体现。视图模型：是对视图逻辑和View与Model模块之间状态控制的封装，是View和Model通信的桥梁，也是MVVM设计思想的核心部分。它包含绑定的数据集合，可根据用户输入通知修改Model、响应Model中的数据变化事件，可发送ViewModel中的变化事件以通知View更新。一个ViewModel可以绑定到多个View上，即多个View可以复用同一个ViewModel，这大大提高了代码的可重用性。模型：封装了与业务逻辑相关的数据，以及数据处理等事件。它不依赖于View和ViewModel，可直接与数据库交互。 　　2 AngularJS中MVVM框架模式的应用 　　2.1 AngularJS简介 　　AngularJS框架于2009年由Google首次发布。因其模块化思想，双向数据绑定，指令（Directives），测试驱动开发等特性，以及其2.0版本对移动设备的良好支持，目前已处于前端JS框架之领导地位。AngularJS 设计初衷是标准的MVC模式，但随着代码重构和API的重写，现在更是将MVVM框架模式表现得淋漓尽致。 　　2.2 AngularJS中MVVM应用模式 　　在AngularJS中，MVVM应用模式主要体现在以下几个部分，结构如图2所示。 　　View：它专注于界面的显示和渲染。在AngularJS中，View除了HTML、CSS这些视图代码，还包含AngularJS指令、表达式等的视图模板。View不能直接与Model交互，视图对象需要通过$scope这个ViewModel来引用。 　　ViewModel：它负责View和Model的交互、协作。ViewModel给View提供显示数据，并提供了View中Command事件操作Model的方式。在AngularJS中，$scope对象充当了这个ViewModel的角色。$scope被称为控制器的功能模块包装，它提供一些API来监控View状态，可以把数据模型和函数暴露给视图（UI模板），它包括数据引用关系、控制器定义行为、视图处理页面布局以及相应的处理跳转等内容。 　　Model：它是与应用程序的业务逻辑相关的数据的封装载体，是业务领域的对象。AngularJS通过数据模型Model驱动，以JavaScript对象的属性的形式呈现。通过数据绑定技术，视图会根据数据模型的变化自动更新，因而模型也是Web应用程序开发和设计中