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文字上下滚动的实现方法
Mar 22 Javascript
可自己添加html的伪弹出框实现代码
Sep 08 Javascript
JS去掉第一个字符和最后一个字符的实现代码
Feb 20 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
Mar 20 Javascript
JavaScript实现随机替换图片的方法
Apr 16 Javascript
JavaScript 封装一个tab效果源码分享
Sep 15 Javascript
js实现上传文件添加和删除文件选择框
Oct 24 Javascript
如何使用Vuex+Vue.js构建单页应用
Oct 27 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
Feb 15 Javascript
vue2里面ref的具体使用方法
Oct 27 Javascript
详解Vue中watch对象内属性的方法
Feb 01 Javascript
手写实现JS中的new
Nov 07 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+mysqli使用面向对象方式更新数据库实例
2015/01/29 PHP
Laravel中间件实现原理详解
2016/10/09 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
PHP实现15位身份证号转18位的方法分析
2019/10/16 PHP
解决jQuery插件tipswindown与hintbox冲突
2010/11/05 Javascript
jquery 学习之一 对象访问
2010/11/23 Javascript
Jquery 实现弹出层插件
2015/01/28 Javascript
浅谈JavaScript字符串拼接
2015/06/25 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
2016/01/08 Javascript
jQuery查看选中对象HTML代码的方法
2016/06/17 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
2016/10/15 Javascript
浅谈jquery的html方法里包含特殊字符的处理
2016/11/30 Javascript
微信小程序 video详解及简单实例
2017/01/16 Javascript
javascript完美实现给定日期返回上月日期的方法
2017/06/15 Javascript
javascript获取指定区间范围随机数的方法
2017/09/08 Javascript
nodejs实现简单的gulp打包
2017/12/21 NodeJs
原生JS实现汇率转换功能代码实例
2020/05/13 Javascript
[57:41]Secret vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python 抓取动态网页内容方案详解
2014/12/25 Python
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
Django CBV类的用法详解
2019/07/26 Python
python实现从wind导入数据
2019/12/03 Python
编码实现字符串转整型的函数
2012/06/02 面试题
Java面试题:为什么要用Java
2012/05/11 面试题
打架检讨书50字
2014/01/11 职场文书
校园十大歌手策划书
2014/02/01 职场文书
食品流通安全承诺书
2014/05/22 职场文书
个人股份合作协议书
2014/10/24 职场文书
2014年财政局工作总结
2014/12/09 职场文书
2015年员工试用期工作总结
2014/12/12 职场文书
中秋节慰问信
2015/02/15 职场文书
2015年组织部工作总结
2015/04/03 职场文书
刑事附带民事起诉状
2015/05/19 职场文书
大队委员竞选演讲稿
2015/11/20 职场文书
CSS3实现的水平标题菜单
2021/04/14 HTML / CSS
HTML中的表单元素介绍
2022/02/28 HTML / CSS