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 封装Ajax传递的数据代码
Jun 05 Javascript
详细分析JavaScript函数定义
Jul 16 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
Aug 24 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
May 03 Javascript
js阻止冒泡和默认事件(默认行为)详解
Oct 20 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
Nov 29 Javascript
详解angular路由高亮之RouterLinkActive
Apr 28 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
在Vuex使用dispatch和commit来调用mutations的区别详解
Sep 18 Javascript
vue实现图片上传到后台
Jun 29 Javascript
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
JavaScript实现酷炫的鼠标拖尾特效
Feb 18 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
关于文本留言本的分页代码
2006/10/09 PHP
php中cookie的作用域
2008/03/27 PHP
PHP 显示客户端IP与服务器IP的代码
2010/10/12 PHP
php class类的用法详细总结
2013/10/17 PHP
php+Mysqli利用事务处理转账问题实例
2015/02/11 PHP
php实现的AES加密类定义与用法示例
2018/01/29 PHP
Laravel5.5 视图 - 创建视图和数据传递示例
2019/10/21 PHP
根据分辨率不同,调用不同的css文件
2006/08/25 Javascript
两种简单实现菜单高亮显示的JS类代码
2010/06/27 Javascript
JQuery each打印JS对象的方法
2013/11/13 Javascript
jQuery实现渐变下拉菜单的简单方法
2015/03/11 Javascript
jQuery语法小结(超实用)
2015/12/31 Javascript
javascript实现可键盘控制的抽奖系统
2016/03/10 Javascript
Vue2.0生命周期的理解
2018/08/20 Javascript
vue 实现cli3.0中使用proxy进行代理转发
2019/10/30 Javascript
vue Element左侧无限级菜单实现
2020/06/10 Javascript
vue项目实现多语言切换的思路
2020/09/17 Javascript
深入学习python的yield和generator
2016/03/10 Python
pandas 将索引值相加的方法
2018/11/15 Python
对python3 中方法各种参数和返回值详解
2018/12/15 Python
Django框架 querySet功能解析
2019/09/04 Python
使用python-pptx包批量修改ppt格式的实现
2020/02/14 Python
PyCharm License Activation激活码失效问题的解决方法(图文详解)
2020/03/12 Python
美国最大的农村生活方式零售店:Tractor Supply Company(TSC)
2017/05/15 全球购物
Marc Jacobs彩妆官网:Marc Jacobs Beauty
2017/07/03 全球购物
Bluebella法国官网:英国性感内衣品牌
2019/05/03 全球购物
介绍一下except的用法和作用
2015/01/22 面试题
文秘专业自荐信
2013/10/14 职场文书
经理秘书找工作求职信
2013/12/19 职场文书
爱岗敬业演讲稿范文
2014/01/14 职场文书
商务英语专业求职信范文
2014/01/28 职场文书
学校花圃的标语
2014/06/18 职场文书
新学期开学标语
2014/06/30 职场文书
一劳永逸彻底解决pip install慢的办法
2021/05/24 Python
JavaScript数组reduce()方法的语法与实例解析
2021/07/07 Javascript
css常用字体属性与背景属性介绍
2022/02/28 HTML / CSS