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 相关文章推荐
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
Feb 03 Javascript
简单谈谈javascript代码复用模式
Jan 28 Javascript
jquery实现可自动判断位置的弹出层效果代码
Oct 12 Javascript
jQuery表格插件datatables用法详解
Nov 23 Javascript
angular实现spa单页面应用实例
Jul 10 Javascript
Angular表格神器ui-grid应用详解
Sep 29 Javascript
JS跳转手机站url的若干注意事项
Oct 18 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
Aug 25 Javascript
node中实现删除目录的几种方法
Jun 24 Javascript
Node.js中console.log()输出彩色字体的方法示例
Dec 01 Javascript
javascript实现滚动条效果
Mar 24 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
Jan 11 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中用文本文件做数据库的实现方法
2008/03/27 PHP
ThinkPHP php 框架学习笔记
2009/10/30 PHP
PHP实现小偷程序实例
2016/10/31 PHP
JavaScript中this关键字使用方法详解
2007/03/08 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
2011/07/13 Javascript
js jquery获取随机生成id的服务器控件的三种方法
2013/07/11 Javascript
原生JS实现加入收藏夹的代码
2013/10/24 Javascript
用unescape反编码得出汉字示例
2014/04/24 Javascript
new Date()问题在ie8下面的处理方法
2014/07/31 Javascript
jQuery 遍历函数详解
2015/07/05 Javascript
pace.js页面加载进度条插件
2015/09/29 Javascript
详解Javascript中的Object对象
2016/02/28 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
2016/09/04 Javascript
jQuery实现的网页换肤效果示例
2016/09/20 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
2016/11/02 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
2017/02/15 Javascript
vue-router 中router-view不能渲染的解决方法
2017/05/23 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
微信小程序实战篇之购物车的实现代码示例
2017/11/30 Javascript
简单使用webpack打包文件的实现
2019/10/29 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
2020/11/05 Javascript
深入浅析Python中的迭代器
2019/06/04 Python
python 实现非极大值抑制算法(Non-maximum suppression, NMS)
2020/10/15 Python
python使用matplotlib的savefig保存时图片保存不完整的问题
2021/01/08 Python
python SOCKET编程基础入门
2021/02/27 Python
碧欧泉Biotherm加拿大官方网站:法国高端护肤品牌
2019/10/18 全球购物
TCP/IP模型的分界线
2012/12/01 面试题
南京某公司笔试题
2013/01/27 面试题
介绍一下JNDI的基本概念
2013/07/26 面试题
会计专业毕业生自我评价
2013/09/25 职场文书
社会工作专业求职信
2014/07/15 职场文书
工作证明范本(2篇)
2014/09/14 职场文书
护士求职自荐信
2015/03/25 职场文书
幼儿园体操比赛口号
2015/12/25 职场文书
spring cloud gateway中如何读取请求参数
2021/07/15 Java/Android
Java数据开发辅助工具Docker与普通程序使用方法
2021/09/15 Java/Android