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 相关文章推荐
通过身份证号得到出生日期和性别的js代码
Nov 23 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
Apr 16 Javascript
js中split函数的使用方法说明
Dec 26 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
Aug 12 Javascript
Backbone.js的一些使用技巧
Jul 01 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
Mar 01 Javascript
微信小程序  modal详解及实例代码
Nov 09 Javascript
详解获取jq ul第一个li定位的四种解决方案
Nov 23 Javascript
Javascript中字符串和数字的操作方法整理
Jan 22 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
May 31 Javascript
vue使用高德地图根据坐标定位点的实现代码
Aug 22 Javascript
原生js+canvas实现下雪效果
Aug 02 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下删除一篇文章生成的多个静态页面
2010/08/08 PHP
php设计模式 Facade(外观模式)
2011/06/26 PHP
PHP获取一个字符串中间一部分字符的方法
2014/08/19 PHP
找到一点可怜的关于dojo资料,谢谢作者!
2006/12/06 Javascript
给Function做的OOP扩展
2009/05/07 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
2011/11/02 Javascript
JS鼠标拖拽实例分析
2015/11/23 Javascript
js css+html实现简单的日历
2016/07/14 Javascript
微信小程序 实例开发总结
2017/04/26 Javascript
JavaScript 用fetch 实现异步下载文件功能
2017/07/21 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
2018/05/06 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
2018/09/16 Javascript
详解NodeJs项目 CentOs linux服务器线上部署
2019/09/16 NodeJs
[56:46]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VP vs Effect
2018/04/01 DOTA
python访问sqlserver示例
2014/02/10 Python
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
python实现的文件夹清理程序分享
2014/11/22 Python
用Python的线程来解决生产者消费问题的示例
2015/04/02 Python
详解Django框架中用context来解析模板的方法
2015/07/20 Python
详解Python网络爬虫功能的基本写法
2016/01/28 Python
详解tensorflow实现迁移学习实例
2018/02/10 Python
Python3.6连接Oracle数据库的方法详解
2018/05/18 Python
Python中关键字global和nonlocal的区别详解
2018/09/03 Python
学习Django知识点分享
2019/09/11 Python
Python二元赋值实用技巧解析
2019/10/25 Python
Canvas中设置width与height的问题浅析
2018/11/01 HTML / CSS
韩国流行时尚女装网站:Dintchina(中文)
2018/07/19 全球购物
行政助理求职自荐信
2013/10/26 职场文书
五年级语文教学反思
2014/01/30 职场文书
乡镇计划生育工作汇报
2014/10/28 职场文书
中学生检讨书1000字
2014/10/28 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书
Python3接口性能测试实例代码
2021/06/20 Python
springboot + mongodb 通过经纬度坐标匹配平面区域的方法
2021/11/01 MongoDB
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js
python如何将mat文件转为png
2022/07/15 Python