MVVM展现框架概述

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


Written By

培森

发表评论

Nginx安装部署与测试

1 Nginx安装 用root用户安装,采用源代码编译的方式来进行安装,正式开始前,请确认gcc、g++开发库之类的已经预先安装好 ------------------------------------------------------------------------------------------------ 先把nginx安装要用到的所有文件(“软件/nginx-1.8.0 下面的所有文件”)上传至服务器/root/nginx目录(没...

IDEA 导入eclipse web项目

本案例使用UAP3.0生成的Web项目作为演示 导入项目 可直接Open导入或在Setting中引入要导入的Web项目 或者 2. 引入后Modules中会有引入的Eclipse jar包报错, 移除即可 3. 在Liberal...

GCC离线安装

解压GCC依赖包 tar -zxvf gcc-xxx.tar   rpm -Uvh *.rpm --nodeps --force...

Docker部署SpringBoot项目

1.创建springboot项目 创建springboot项目 package com.eangulee.demo.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapp...

scp远程免密传输

首先在备份服务器上配置: 比如A要把数据发送到B上, A就是备份服务器 mkdir -p ~/.ssh chmod 700 ~/.ssh 在~/.ssh/目录下生成密钥文件ssh-keygen -t rsa -P "" -f ~/.ssh/id_rsa 然后在其他服务器上配置:mkd...