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 变量命名规则
Sep 23 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
Dec 26 Javascript
Bootstrap3制作搜索框样式的方法
Jul 11 Javascript
JavaScript 数组- Array的方法总结(推荐)
Jul 21 Javascript
js中获取键盘事件的简单实现方法
Oct 10 Javascript
js实现百度登录框鼠标拖拽效果
Mar 07 Javascript
js微信应用场景之微信音乐相册案例分享
Aug 11 Javascript
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
js实现轮播图效果 z-index实现轮播图
Jan 17 Javascript
vue全局使用axios的操作
Sep 08 Javascript
nuxt静态部署打包相对路径操作
Nov 06 Javascript
关于JavaScript轮播图的实现
Nov 20 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修改xml文档内容的方法
2015/01/23 PHP
php版微信返回用户text输入的方法
2016/11/14 PHP
php微信公众平台开发(四)回复功能开发
2016/12/06 PHP
Windows Live的@live.com域名注册漏洞 利用代码
2006/12/27 Javascript
Ext JS Grid在IE6 下宽度的问题解决方法
2009/02/15 Javascript
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
2009/06/14 Javascript
jQuery TextBox自动完成条
2009/07/22 Javascript
JS setCapture 区域外事件捕捉
2010/03/18 Javascript
基于JQuery的一句代码实现表格的简单筛选
2010/07/26 Javascript
eval的两组性能测试数据
2012/08/17 Javascript
定时器(setTimeout/setInterval)调用带参函数失效解决方法
2013/03/26 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
2016/09/22 Javascript
提高Web性能的前端优化技巧总结
2017/02/27 Javascript
使用AngularJS2中的指令实现按钮的切换效果
2017/03/27 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
2017/05/02 Javascript
vue实现条件叠加搜索的解决方法
2019/05/28 Javascript
Nautil 中使用双向数据绑定的实现
2019/10/02 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
2019/11/06 Javascript
[46:40]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python3基础之函数用法
2014/08/13 Python
基于Django框架利用Ajax实现点赞功能实例代码
2018/08/19 Python
用python实现k近邻算法的示例代码
2018/09/06 Python
解决python replace函数替换无效问题
2020/01/18 Python
Django表单提交后实现获取相同name的不同value值
2020/05/14 Python
Python pysnmp使用方法及代码实例
2020/08/24 Python
美国创意之家:BulbHead
2017/07/12 全球购物
捷克家具销售网站:SCONTO Nábytek
2020/01/02 全球购物
五十岁生日宴会答谢词
2014/01/15 职场文书
酒店管理毕业生自我鉴定
2014/03/02 职场文书
平安建设实施方案
2014/03/19 职场文书
消防标语大全
2014/06/07 职场文书
学习心理学的体会
2014/11/07 职场文书
2014年房产经纪人工作总结
2014/12/08 职场文书
2016暑期政治学习心得体会
2016/01/23 职场文书
用Python实现Newton插值法
2021/04/17 Python
python基础详解之if循环语句
2021/04/24 Python