MVVM模式中ViewModel和View、Model有什么区别?


Posted in Javascript onJune 19, 2015

Model:很简单,就是业务逻辑相关的数据对象,通常从数据库映射而来,我们可以说是与数据库对应的model。

View:也很简单,就是展现出来的用户界面。

基本上,绝大多数软件所做的工作无非就是从数据存储中读出数据,展现到用户界面上,然后从用户界面接收输入,写入到数据存储里面去。所以,对于数据存储(model)和界面(view)这两层,大家基本没什么异议。但是,如何把model展现到view上,以及如何把数据从view写入到model里,不同的人有不同的意见。

MVC派的看法是,界面上的每个变化都是一个事件,我只需要针对每个事件写一堆代码,来把用户的输入转换成model里的对象就行了,这堆代码可以叫controller。

而MVVM派的看法是,我给view里面的各种控件也定义一个对应的数据对象,这样,只要修改这个数据对象,view里面显示的内容就自动跟着刷新,而在view 里做了任何操作,这个数据对象也跟着自动更新,这样多美。所以:

ViewModel:就是与界面(view)对应的Model。因为,数据库结构往往是不能直接跟界面控件一一对应上的,所以,需要再定义一个数据对象专门对应view上的控件。而ViewModel的职责就是把model对象封装成可以显示和接受输入的界面数据对象。

至于viewmodel的数据随着view自动刷新,并且同步到model里去,这部分代码可以写成公用的框架,不用程序员自己操心了。

简单的说,ViewModel就是View与Model的连接器,View与Model通过ViewModel实现双向绑定。

Javascript 相关文章推荐
可以文本显示的公告栏的js代码
Mar 11 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
Mar 04 Javascript
js点击出现悬浮窗效果不使用JQuery插件
Jan 20 Javascript
自写的jQuery异步加载数据添加事件
May 15 Javascript
jQuery实现的在线答题功能
Apr 12 Javascript
jQueryUI DatePicker 添加时分秒
Jun 04 Javascript
JS简单实现tab切换效果的多窗口显示功能
Sep 07 Javascript
Javascript 调用 ActionScript 的简单方法
Sep 22 Javascript
js如何编写简单的ajax方法库
Aug 02 Javascript
基于vue.js快速搭建图书管理平台
Oct 29 Javascript
Vue面试题及Vue知识点整理
Oct 07 Javascript
Vue实现table上下移动功能示例
Feb 21 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
Jun 19 #Javascript
使用AngularJS编写较为优美的JavaScript代码指南
Jun 19 #Javascript
javascript格式化日期时间方法汇总
Jun 19 #Javascript
JavaScript中数据结构与算法(四):串(BF)
Jun 19 #Javascript
JavaScript中数据结构与算法(三):链表
Jun 19 #Javascript
js结合正则实现国内手机号段校验
Jun 19 #Javascript
JavaScript中数据结构与算法(二):队列
Jun 19 #Javascript
You might like
上海牌131型七灯四波段四喇叭一级收音机
2021/03/02 无线电
把PHP安装为Apache DSO
2006/10/09 PHP
调试一段PHP程序时遇到的三个问题
2012/01/17 PHP
php树型类实例
2014/12/05 PHP
CentOS6.5 编译安装lnmp环境
2014/12/21 PHP
php快速查找数据库中恶意代码的方法
2015/04/01 PHP
php将html转为图片的实现方法
2017/05/19 PHP
php+ajax实现仿百度查询下拉内容功能示例
2017/10/20 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
Javascript 中的类和闭包
2010/01/08 Javascript
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
2010/09/12 Javascript
中文路径导致unitpngfix.js不正常的解决方法
2013/06/26 Javascript
jQuery对html元素的取值与赋值实例详解
2015/12/18 Javascript
JavaScript 巧学巧用
2017/05/23 Javascript
Angular2进阶之如何避免Dom误区
2018/04/02 Javascript
使用JQuery自动完成插件Auto Complete详解
2019/06/18 jQuery
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
2019/07/25 Javascript
微信小程序实现签字功能
2019/12/23 Javascript
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
vue2.0 解决抽取公用js的问题
2020/07/31 Javascript
python缩进区别分析
2014/02/15 Python
简单介绍Ruby中的CGI编程
2015/04/10 Python
Python实现统计单词出现的个数
2015/05/28 Python
Python数组定义方法
2016/04/13 Python
python简单实现获取当前时间
2016/08/27 Python
python实现微信小程序自动回复
2018/09/10 Python
Python爬虫运用正则表达式的方法和优缺点
2019/08/25 Python
Pytorch中的variable, tensor与numpy相互转化的方法
2019/10/10 Python
Django框架创建项目的方法入门教程
2019/11/04 Python
python3正则模块re的使用方法详解
2020/02/11 Python
Python爬虫如何破解JS加密的Cookie
2020/11/19 Python
波兰最大的度假胜地和城市公寓租赁运营商:Sun & Snow
2018/10/18 全球购物
乌克兰设计师和品牌的服装:Love&Live
2020/04/14 全球购物
盗窃案辩护词
2015/05/21 职场文书
民事纠纷协议书
2016/03/23 职场文书