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-简单的计算器实现步骤分解(附图)
May 30 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
Jan 07 Javascript
jquery ajax 局部刷新小案例
Feb 08 Javascript
JS实现的网页倒计时数字时钟效果
Mar 02 Javascript
JS实现合并json对象的方法
Oct 10 Javascript
Angular2学习笔记之数据绑定的示例代码
Jan 03 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
Oct 09 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
Dec 10 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
Dec 20 Javascript
用原生 JS 实现 innerHTML 功能实例详解
Apr 03 Javascript
全面了解JavaScript的作用域链
Apr 03 Javascript
详解vue微信网页授权最终解决方案
Jun 16 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
解析PayPal支付接口的PHP开发方式
2010/11/28 PHP
PHP $_FILES函数详解
2011/03/09 PHP
smarty半小时快速上手入门教程
2014/10/27 PHP
IE autocomplete internet explorer's autocomplete
2007/06/30 Javascript
js面向对象设计用{}好还是function(){}好(构造函数)
2011/10/23 Javascript
php图像生成函数之间的区别分析
2012/12/06 Javascript
用JS做的简单的可折叠的两级树形菜单
2013/09/21 Javascript
Jquery实现控件的隐藏和显示实例
2014/02/08 Javascript
jquery实现经典的淡入淡出选项卡效果代码
2015/09/22 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
2015/12/29 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
2016/01/04 Javascript
Bootstrap表单布局
2016/07/19 Javascript
浅析JavaScript动画模拟拖拽原理
2016/12/09 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
bootstrap confirmation按钮提示组件使用详解
2017/08/22 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
2017/12/20 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
2018/02/07 Javascript
关于自定义Egg.js的请求级别日志详解
2018/12/12 Javascript
js实现倒计时器自定义时间和暂停
2019/02/25 Javascript
vue选项卡切换登录方式小案例
2019/09/27 Javascript
JavaScript实现简易计算器小功能
2020/10/22 Javascript
Python中集合的内建函数和内建方法学习教程
2015/08/19 Python
django框架如何集成celery进行开发
2017/05/24 Python
Python有序字典简单实现方法示例
2017/09/28 Python
Python3爬取英雄联盟英雄皮肤大图实例代码
2018/11/14 Python
pandas中的series数据类型详解
2019/07/06 Python
Python日志无延迟实时写入的示例
2019/07/11 Python
python3排序的实例方法
2020/10/20 Python
python字符串拼接+和join的区别详解
2020/12/03 Python
Ralph Lauren意大利官方网站:时尚界最负盛名的品牌之一
2018/10/18 全球购物
莱德杯高尔夫欧洲官方商店:Ryder Cup Shop
2019/08/14 全球购物
Mountain Hardwear官网:攀岩服装和户外装备
2019/09/26 全球购物
给校长的建议书
2014/03/12 职场文书
本科毕业生求职自荐信
2014/04/09 职场文书
应聘教师自荐书
2014/06/16 职场文书
2014年资料员工作总结
2014/11/18 职场文书