MVVM展现框架概述

MVVM模式作为框架核心，包含以下三个部分：

l  Model： 模型，业务数据，表示业务中的对象和操作，和view独立。

l  ViewModel： 视图模型，对数据和UI操作，就是与界面(view)对应的Model。。

l  View： 视图，可视化、交互式UI。代表了ViewModel的状态，显示ViewModel的内容。

具体来说，Model仅仅关注数据信息，不关心任何视图操作行为；其不格式化数据或者影响数据在浏览器中的展现，这些都不是它的责任；格式化数据是View层的任务，同时业务逻辑层被封装在ViewModel中，用来和Model进行交互。

View是指应用中和用户直接交互的部分，他是一个交互式的UI来表示ViewModel的状态，View被认为是主动的，而不是被动的，MVVM主动式的View包含数据绑定事件和理解Model和ViewModel的行为，尽管这些行为可以和属性对应，但View仍然需要响应ViewModel的事件，同时View不负责控制状态。

ViewModel是一个专门用于数据转换的Controller，它可以把Model中的信息转换为View中的信息，同时从View传递命令给Model；

综上，MVVM有以下优点：

l  MVVM使开发更加容易，使前端开发和后端开发人员互不影响。

l  抽象化View层，减少了代码中的业务逻辑。

l  ViewModel比事件驱动更容易测试。

l  ViewModel的测试不用关心UI的自动化和交互 。    

            

分类	选型原则
技术选型	1、 采用Ajax技术路线； 2、 支持HTML4、css2.0以上； 3、 支持REST服务调用；    4、支持IE7及以上版本，Chrome10以上版本以及firefox3.5及以上版本。
开源软件	Jquery1.11.1， KnockoutJS 3.2.0 ，bootstrap   2.3.2， RequireJS 2.1.15

 

KnockoutJS是一个轻量级的MVVM框架，通过简易的UI绑定语法，实现动态更新UI。KnockoutJS的特点：

l  声明式绑定：通过简洁易读的data-bind语法，将DOM元素与ViewModel关联起来。

l  UI自动更新：当模型（ViewModel）状态更新时，自动更新UI界面。

l  依赖跟踪：在模型数据间建立隐式的关系链。

l  模板化：快速生成复杂，可嵌套UI模型数据的函数。

l  支持所有主流浏览器，IE 6+，Firefox 2+，Chrome，Opera，Safari (desktop/mobile)。

l  无其他依赖。

基于KnockoutJS实现模型、视图和视图模型的基础模型框架，满足View和Model分离的需求，两者通过ViewModel联系，并实现视图模型和视图双向绑定功能，视图的变更引起视图模型的变化，视图模型的更改引起视图的更新。

Bootstrap是一个Web应用程序的前端工具包。它是一个CSS和HTML的集合，使用了最新的浏览器技术，为Web开发提供了时尚的版式、表单、按钮，表格，网格系统等。利用BootStrap V2.0快速实现前端组件的展示UI。

通过Ajax与服务端进行数据交互。

通过RequireJS实现对第三方库和js资源的引用，RequireJS 是一个JavaScript 模块载入框架，是 AMD 规范的实现者之一。它使用了不同于传统<script>标签的脚本加载步骤。可以用它来加速、优化代码，其主要目的是为了代码的模块化。