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>标签的脚本加载步骤。可以用它来加速、优化代码,其主要目的是为了代码的模块化。