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 开发编程风格Idiomatic.js指南中文版
May 28 Javascript
javascript显示中文日期的方法
Jun 18 Javascript
原生JS实现平滑回到顶部组件
Mar 16 Javascript
前端框架Vue.js中Directive知识详解
Sep 12 Javascript
JS自定义滚动条效果简单实现代码
Oct 27 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
Sep 04 Javascript
详解基于mpvue的小程序markdown适配解决方案
May 08 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
Sep 18 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
Nov 08 Javascript
ES6 Object方法扩展的应用实例分析
Jun 25 Javascript
vue数据响应式原理知识点总结
Feb 16 Javascript
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 Vue.js
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
无线电广播与收音机发展的历史回眸
2021/03/02 无线电
在yii中新增一个用户验证的方法详解
2013/06/20 PHP
PHP仿博客园 个人博客(2) 数据库增添改删
2013/07/05 PHP
easyui的tabs update正确用法分享
2014/03/21 PHP
php 读取输出其他文件的实现方法
2016/07/26 PHP
ThinkPHP打水印及设置水印位置的方法
2016/10/14 PHP
JS下高效拼装字符串的几种方法比较与测试代码
2010/04/15 Javascript
判断多个input type=file是否有已经选择好文件的代码
2012/05/23 Javascript
JS中处理与当前时间间隔的函数代码
2012/05/23 Javascript
Json和Jsonp理论实例代码详解
2013/11/15 Javascript
jquery得到iframe src属性值的方法
2014/09/25 Javascript
js实现仿百度瀑布流的方法
2015/02/05 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
2015/10/30 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
2016/01/04 Javascript
BootStrap无限级分类(无限极分类封装版)
2016/08/26 Javascript
js实现添加删除表格(两种方法)
2017/04/27 Javascript
微信小程序之GET请求的实例详解
2017/09/29 Javascript
Vue中使用的EventBus有生命周期
2018/07/12 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
2018/09/01 jQuery
vue router带参数页面刷新或回退参数消失的解决方法
2019/02/27 Javascript
js图片查看器插件用法示例
2019/06/22 Javascript
浅探express路由和中间件的实现
2019/09/30 Javascript
Python 网络编程起步(Socket发送消息)
2008/09/06 Python
使用Python保存网页上的图片或者保存页面为截图
2016/03/05 Python
python中正则表达式 re.findall 用法
2018/10/23 Python
Python中的asyncio代码详解
2019/06/10 Python
python基于Selenium的web自动化框架
2019/07/14 Python
python同步windows和linux文件
2019/08/29 Python
解决windows上安装tensorflow时报错,“DLL load failed: 找不到指定的模块”的问题
2020/05/20 Python
Python+Opencv实现把图片、视频互转的示例
2020/12/17 Python
BannerBuzz加拿大:在线定制横幅印刷、广告和标志
2020/03/10 全球购物
班级入场式解说词
2014/02/01 职场文书
数学检讨书1000字
2014/02/24 职场文书
新学期决心书
2014/03/11 职场文书
员工安全生产责任书
2014/07/22 职场文书
MyBatis 动态SQL全面详解
2021/10/05 MySQL