培森的Blog MVVM展现框架概述

MVVM展现框架概述

MVVM模式作为框架核心,包含以下三个部分: l  Model: 模型,业务数据,表示业务中的对象和…

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

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

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

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

1.png

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


本文来自网络,不代表培森的Blog立场,转载请注明出处:https://blog.xupeisen.com/archives/43

作者: 培森

联系我们

联系我们

13262951234

在线咨询: QQ交谈

邮箱: admin@xupeisen.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部