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 相关文章推荐
Javascript 文件夹选择框的两种解决方案
Jul 01 Javascript
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
May 24 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
Dec 03 Javascript
jquery插件如何使用 jQuery操作Cookie插件使用介绍
Dec 15 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
Sep 01 Javascript
JavaScript function 的 length 属性使用介绍
Sep 15 Javascript
Flash图片上传组件 swfupload使用指南
Mar 14 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
Apr 21 Javascript
总结JavaScript的正则与其他语言的不同之处
Aug 25 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
Vue 3.0 前瞻Vue Function API新特性体验
Aug 12 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
php判断输入不超过mysql的varchar字段的长度范围
2011/06/24 PHP
使用dump函数,给php加断点测试
2013/06/25 PHP
深入apache配置文件httpd.conf的部分参数说明
2013/06/28 PHP
laravel安装和配置教程
2014/10/29 PHP
php文件扩展名判断及获取文件扩展名的N种方法
2015/09/12 PHP
PHP5.3新特性小结
2016/02/14 PHP
thinkPHP实现的省市区三级联动功能示例
2017/05/05 PHP
js 调用本地exe的例子(支持IE内核的浏览器)
2012/12/26 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
2014/07/29 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
2015/01/27 Javascript
angularjs客户端实现压缩图片文件并上传实例
2015/07/06 Javascript
jQuery  ready方法实现原理详解
2016/10/19 Javascript
js 获取图像缩放后的实际宽高,位置等信息
2017/03/07 Javascript
js实现鼠标拖动功能
2017/03/20 Javascript
js 事件的传播机制(实例讲解)
2017/07/20 Javascript
详解Vue2.0 事件派发与接收
2017/09/05 Javascript
vue2.0结合Element-ui实战案例
2019/03/06 Javascript
详解JavaScript中的链式调用
2020/11/27 Javascript
用Python创建声明性迷你语言的教程
2015/04/13 Python
python获取当前日期和时间的方法
2015/04/30 Python
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
LRUCache的实现原理及利用python实现的方法
2017/11/21 Python
使用python存储网页上的图片实例
2018/05/22 Python
对PyQt5基本窗口控件 QMainWindow的使用详解
2019/06/19 Python
在pyqt5中QLineEdit里面的内容回车发送的实例
2019/06/21 Python
Python 生成一个从0到n个数字的列表4种方法小结
2019/11/28 Python
flask框架url与重定向操作实例详解
2020/01/25 Python
Python利用PyPDF2库获取PDF文件总页码实例
2020/04/03 Python
Python爬虫教程知识点总结
2020/10/19 Python
HTML5 placeholder属性详解
2016/06/22 HTML / CSS
Bulk Powders意大利:运动补充在线商店
2019/02/09 全球购物
校园文化建设方案
2014/02/03 职场文书
2019脱贫攻坚工作总结报告范本!
2019/08/06 职场文书
Golang全局变量加锁的问题解决
2021/05/08 Golang
Keras多线程机制与flask多线程冲突的解决方案
2021/05/28 Python
MYSQL常用函数介绍
2022/05/05 MySQL