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 相关文章推荐
真正的JQuery.ajax传递中文参数的解决方法
May 28 Javascript
使用Mootools动态添加Css样式表代码,兼容各浏览器
Dec 12 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
Sep 02 Javascript
node.js中的socket.io入门实例
Apr 26 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
Jun 23 Javascript
js面向对象编程之如何实现方法重载
Jul 02 Javascript
jQuery如何封装输入框插件
Aug 19 Javascript
基于vue实现swipe轮播组件实例代码
May 24 Javascript
小程序ios音频播放没声音问题的解决
Jul 11 Javascript
vue中axios请求的封装实例代码
Mar 23 Javascript
解决layer.msg 不居中 ifram中的问题
Sep 05 Javascript
node.js中module模块的功能理解与用法实例分析
Feb 14 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采集内容中带有图片地址的远程图片并保存的方法
2015/01/03 PHP
PHP模板引擎Smarty之配置文件在模板变量中的使用方法示例
2016/04/11 PHP
Yii2下session跨域名共存的解决方案
2017/02/04 PHP
Yii 2.0自带的验证码使用经验分享
2017/06/19 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
laravel-admin 管理平台获取当前登陆用户信息的例子
2019/10/08 PHP
javascript replace()正则替换实现代码
2010/02/26 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
2012/10/11 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
jquery索引在使用中的一些困惑
2013/10/24 Javascript
jQuery中hide()方法用法实例
2014/12/24 Javascript
javascript获取四位数字或者字母的随机数
2015/01/09 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
2016/08/11 Javascript
JS日程管理插件FullCalendar简单实例
2017/02/07 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
2017/06/01 jQuery
超出JavaScript安全整数限制的数字计算BigInt详解
2018/06/24 Javascript
在layui中select更改后生效的方法
2019/09/05 Javascript
Python中列表、字典、元组、集合数据结构整理
2014/11/20 Python
Python爬虫之正则表达式的使用教程详解
2018/10/25 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
简单了解django索引的相关知识
2019/07/17 Python
用python的turtle模块实现给女票画个小心心
2019/11/23 Python
Python并发请求下限制QPS(每秒查询率)的实现代码
2020/06/05 Python
python+openCV对视频进行截取的实现
2020/11/27 Python
学点简单的Django之第一个Django程序的实现
2021/02/24 Python
CSS3的颜色渐变效果的示例代码
2017/09/29 HTML / CSS
2014教育局对照检查材料思想汇报
2014/09/23 职场文书
民事答辩状格式范文
2015/05/21 职场文书
2015年党务工作者个人工作总结
2015/10/22 职场文书
如何让2019年上半年的工作总结更出色!
2019/07/01 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书
发言稿之优秀教师篇
2019/09/26 职场文书
python中requests库+xpath+lxml简单使用
2021/04/29 Python
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS
Python移位密码、仿射变换解密实例代码
2021/06/27 Python
使用kubeadm命令行工具创建kubernetes集群
2022/03/31 Servers